目錄

• 前言
• 背景
• 原理
• 後記

前言

使http://www.cppcns.com用腳手架建立專案的入口檔案main.中，預設程式碼如下：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),}).$mount('#app')

可以看到，程式碼中通過import引入了App元件，但是卻並沒有通過components註冊，還使用了一個render函式www.cppcns.com，而沒有利用template屬性

//上述程式碼的等價寫法
import Vue from 'vue/dist/vue'//注意此處差異
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
    template: `<App/>`,components: { App },}).$mount('#app')

想要知道上述程式碼為什麼等價，就需要從Vue的不同版本說起

背景

Vue有兩大部分組成，一個是核心功能，包括生命週期、事件處理等內容，另一部分是模板解析器，用來對Vue模板進行解析。

Vue.js中包括了這兩部分的全部內容（即完整版的vue），但是這樣會有一個問題，當專案開發完畢進行打包時，打包後的檔案會引入完整版vue的全部程式碼，但是實際上打包後的輸出檔案中已經不需要Vue模板解析器部分的程式碼了（模板已經被解析好了，瀏覽器可以直接執行），引入完整版Vue只會增大打包後文件的體積。

為了解決這個問題，Vue團隊提供了不同版本的Vue，vue.js為完整版的Vue，其他版本都是在vue.js完整版上進行的精簡，比如vue.runtime.*為Vue的執行版，不包括Vue模板解析器部分程式碼。

既然Vue有不同的版本，那麼我們在import引入Vue的時候，到底用的是哪個版本呢？

檢視Vue包中的package.json檔案可以發現，ES6模組化的入口檔案是vue.runtime.esm.js，即Vue預設幫我們引入的是vue的執行版，其中不包括模板解析器部分程式碼。

執行版Vue想要進行模板解析，就需要使用render函式。Vue官方案例中，入口檔案main.js的內容如下，其中使用了render函式進行模板解析。

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),}).$mount('#app')

如果我們使用template屬性進行模板解析，會報錯You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions,or use the compiler-included build.

//通過 import Vue from 'vue/dist/vue'引入完整版的vue，則程式碼不會報錯

import Vue from 'vue'//預設引入執行版的vue，使用template編寫模板會報錯

Vue.config.productionTip = false

new Vue({
    template: `<h1>hello</h1>`,}).$mount('#app')

注意：上邊說的模板解析指的是解析vm配置物件的template屬性中定義的模板

元件中的模板（.vue中template標籤中的內容），vue使用了vue-template-compiler幫助我們解析，而且可以看到他只在開發依賴中，在生產依賴中是沒有的，這也很好解釋，因為打包後的檔案瀏覽器已經可以直接運行了，不存在vue模板語法，也就不需要vue-template-compiler了。

"dependencies": {
    "core-js": "^3.6.5","vue": "^2.6.11"
},"devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-service": "~4.5.0","babel-eslint": "^10.1.0","eslint": "^6.7.2","eslint-plugin-vue": "^6.2.2","vue-templahttp://www.cppcns.comte-compiler": "^2.6.11客棧"
},

原理

在vm的配置物件中使用template屬性，可以通過HTML語法，建立vue模板頁面，我們編寫的Vue模板在底層先會被轉換成虛擬Dom，才會渲染到頁面中（真實Dom）。

在vm的配置物件中使用 render函式 ，可以直接用js構建虛擬DOM，免去了轉譯（Vue模板轉譯成虛擬Dom）的過程。

後記

到此這篇關於Vue中為什麼要引入render函式的實現的文章就介紹到這了,更多相關Vue引入render函式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！