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运行过程(了解)
这个暂时可以只是了解, 后期还是要完全弄明白的 !