Vuejs学习笔记(三)-10.runtime-compiler,runtime-only的区别
用vue cli2 新建2个项目,一个使用runtime-compiler,一个使用runtime-only,创建时选项:
创建后的项目对比main.js文件之间的区别:
runtime-compiler方式生成的文件main.js中有模板和注册组件。
runtime-only方式生成的文件main.js中模板。
1.runtime-compiler的Vue程序运行链条:
vm.options.template ------parse----> ast---------compile------------>vm.options.render(functions)-------render------->virtual Dom(虚拟Dom)--------update(diff and patch)------>UI
原理:如果vue中有模板template,vue则会将其解析成ast(抽象语法树),然后在将ast编译后给到render渲染函数,渲染成虚拟DOM,最后更新到UI页面。
2.runtime-only的模式,vue程序运行链条:
vm.options.render(functions)-------render------->virtual Dom(虚拟Dom)--------update(diff and patch)------>UI
render: h=>h(App)是箭头函数,相当于
render: function(h){
return h(App)
}
3. h实际上是一个createElement函数,它可以创建页面DOM
1 new Vue({ 2 el: '#app', 3 // components: { App }, 4 // template: '<App/>' 5 render:function(createElement){ 6 // 1.createElement('标签',{标签属性},[标签内容,子标签]) 7 return createElement('h2',{class:'box'},['hello render']) 8 9 } 10 })
以上代码就是取代(覆盖)了index.html页面默认的<div id='app'></div>,而改成<h2>hello render</h2>
4.在h2标签内部还可以创建字标签button
1 new Vue({ 2 el: '#app', 3 // components: { App }, 4 // template: '<App/>' 5 render:function(createElement){ 6 // 1.createElement('标签',{标签属性},[标签内容,子标签]) 7 return createElement( 8 'h2', 9 {class:'box'}, 10 ['hello render', 11 createElement('button',['按钮']) 12 ] 13 ) 14 } 15 })
由此论证,render:h=>h(App)是不需要在main.js中使用模板的。
5.除了以上方式还有另一种方式,即定义组件后,直接放置到render函数中,来创建组件。
1 // The Vue build version to load with the `import` command 2 // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 import Vue from 'vue' 4 import App from './App' 5 6 Vue.config.productionTip = false 7 const cpn = { 8 template:` 9 <div>我是组件:{{message}}</div> 10 `, 11 data(){ 12 return{ 13 message:"我是CPN" 14 } 15 } 16 } 17 18 /* eslint-disable no-new */ 19 new Vue({ 20 el: '#app', 21 // 方式0: 22 // components: { App }, 23 // template: '<App/>' 24 // 方式1:使用render函数 25 render:function(createElement){ 26 // 1.createElement('标签',{标签属性},[标签内容,子标签]) 27 // return createElement( 28 // 'h2', 29 // {class:'box'}, 30 // ['hello render', 31 // createElement('button',['按钮']) 32 // ] 33 // ) 34 // 方式2:使用组件方式 35 return createElement(cpn) 36 } 37 })
同样可以渲染成前端UI
因此,在这一步中就没有template需要编译了。
6.对于runtime-compiler能解析template的底层支撑是安装了组件:
vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
本文来自博客园,作者:kaer_invoker,转载请注明原文链接:https://www.cnblogs.com/invoker2021/p/14982088.html