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創建的項目打印出來的結果也是這樣，為什么，難道打印之前內部已經解析好了？