vue中Runtime-Compiler和Runtime-only的区别

一、选择Runtime-Compiler和Runtime-only不同模式的时候main.js文件的区别

  

二.vue程序运行过程

 

 

 1.解析:

第一步,当把vue模板template传给Vue实例的时候,vue内部会保存在options里面,第二部,进行解析,解析成ast(抽象语法树),第三步会进行编译,编译成render函数,第四步render函数会生成虚拟dom树,第五步,把虚拟dom树渲染成真实dom ui

 

所以:runtime-compiler的执行步骤是template -> ast -> render -> vdom -> ui,runtime-only的执行步骤是 render -> vdom -> ui,显然runtime-only的性能更高,代码量更少

三、render函数详解

1.render函数的作用

vue在使用模板创建页面的时候,需要先通过一个渲染函数来创建虚拟dom树,这个函数就是render函数。render函数内部有一个回调函数createElement(),这个函数的作用就是生成一个 VNode节点(虚拟dom),render 函数得到createElement() 创建的 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。

2.render函数的用法

 

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创建的项目打印出来的结果也是这样,为什么,难道打印之前内部已经解析好了?

 

 

 

 

 

posted @ 2019-12-01 21:53  leahtao  阅读(1203)  评论(1编辑  收藏  举报