A difference, choose Runtime-Compiler and Runtime-only mode when main.js different file
Two .vue running process
1. Analysis:
The first step, when the vue template template when passed Vue instance, will be saved in the internal vue options inside the second part, parsing, resolved to AST (abstract syntax tree), the third step will be compiled, compiled render function, the fourth step render function generates virtual dom tree , the fifth step, the virtual dom tree rendered in real dom ui
Therefore: step runtime-compiler is Template -> AST -> the render -> VDOM -> UI , runtime-only step is the render -> VDOM -> UI , clearly higher performance runtime-only, the code amount is more less
Three, render function Detailed
The role of 1.render function
vue when using the template to create a page, you need to pass a rendering function to create a virtual dom tree, this function is to render function. Internal render function takes a callback function createElement () , the function of this role is to generate a VNode node (virtual dom), render function to get the createElement () After creating the VNode node function Vue.js returned to the mount, and rendered into real DOM node, and mount to the root node.
Usage 2.render function
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
const cpn = {
template: '<div>{{message}}</div>',
data () {
return {
message: '我是组件的message'
}
}
}
new Vue({
el: '#app',
// components: { App },
// template: '<App/>'
render: function (creatElement) { //回调函数creatElement
//1.普通用法：creatElement('标签名',{标签属性}, ['标签里面显示的内容'])
return creatElement ('h2',
{class: 'box'},
['hello vue'])
//2.传入组件
return creatElement (cpn)
//这种写法的好处：
//如果把cpn传给template的话它还要编译成ast，这种写法的话直接让render函数生成虚拟dom，效率更高
}
})
3.思考：.vue文件里面的template是由谁处理的？
是由vue-tempalte-compiler解析
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
console.log(App)
//不包含任何template函数,而是一个render函数
new Vue({
render: h => h(App),
}).$mount('#app')
打印这段代码，结果如下：
疑惑：
Runtime-Compiler创建的项目打印出来的结果也是这样，为什么，难道打印之前内部已经解析好了？
