18 runtime-only和runtime-compiler

vue build的两个模式

17中给大家看过这个图

和13结合看看

这里就不得不和13中的 webpack使用vue 结合起来看看, 当时打包出错, 是因为我们当时是直接使用vue实例绑定到了#app上, 而

所以导致其无法正常加载 !

区别

这里 runtime-only 代码更少(少6kb, 创建的时候有写):
是因为不用花代码去解析template–> ast --> render的过程 !

菜鸟总结:

如果你使用渐进式开发, 就用上面的; 如果是完全用vue就用下面的 !

运行过程

大致过程:
template --(解析)–>ast(抽象语法树)–(编译)–>render(函数)–(翻译)–>虚拟dom树–(渲染)–>UI界面

render函数

runtime-compiler的程序是如何演化为render函数的呢?

普通用法

这里就没有template:"< App />"这个东西, 所以就不需要执行template -->ast–>render这些步骤

对象用法

再把cpn抽离出去

注意:

打印App, 发现虽然写的时候有template标签, 但是没有template属性, 只有render属性, 这是为什么呢? 因为下面的东西帮你解析了, 在14中安装了 !

谁渲染的tamplate

npm run build和npm run dev运行过程(了解)

这个暂时可以只是了解, 后期还是要完全弄明白的 !