欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue中為什么要引入render函數(shù)的實(shí)現(xiàn)

 更新時(shí)間:2022年01月10日 09:41:21   作者:scluis  
本文主要介紹了Vue中為什么要引入render函數(shù)的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

前言

使用Vue腳手架創(chuàng)建項(xiàng)目的入口文件main.js中,默認(rèn)代碼如下:

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

Vue.config.productionTip = false

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

可以看到,代碼中通過(guò)import引入了App組件,但是卻并沒(méi)有通過(guò)components注冊(cè),還使用了一個(gè)render函數(shù),而沒(méi)有利用template屬性

//上述代碼的等價(jià)寫(xiě)法
import Vue from 'vue/dist/vue'//注意此處差異
import App from './App.vue'

Vue.config.productionTip = false

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

想要知道上述代碼為什么等價(jià),就需要從Vue的不同版本說(shuō)起

背景

Vue有兩大部分組成,一個(gè)是核心功能,包括生命周期、事件處理等內(nèi)容,另一部分是模板解析器,用來(lái)對(duì)Vue模板進(jìn)行解析。

Vue.js中包括了這兩部分的全部?jī)?nèi)容(即完整版的vue),但是這樣會(huì)有一個(gè)問(wèn)題,當(dāng)項(xiàng)目開(kāi)發(fā)完畢進(jìn)行打包時(shí),打包后的文件會(huì)引入完整版vue的全部代碼,但是實(shí)際上打包后的輸出文件中已經(jīng)不需要Vue模板解析器部分的代碼了(模板已經(jīng)被解析好了,瀏覽器可以直接運(yùn)行),引入完整版Vue只會(huì)增大打包后文件的體積。

為了解決這個(gè)問(wèn)題,Vue團(tuán)隊(duì)提供了不同版本的Vue,vue.js為完整版的Vue,其他版本都是在vue.js完整版上進(jìn)行的精簡(jiǎn),比如vue.runtime.*為Vue的運(yùn)行版,不包括Vue模板解析器部分代碼。

既然Vue有不同的版本,那么我們?cè)趇mport引入Vue的時(shí)候,到底用的是哪個(gè)版本呢?

查看Vue包中的package.json文件可以發(fā)現(xiàn),ES6模塊化的入口文件是vue.runtime.esm.js,即Vue默認(rèn)幫我們引入的是vue的運(yùn)行版,其中不包括模板解析器部分代碼。

運(yùn)行版Vue想要進(jìn)行模板解析,就需要使用render函數(shù)。Vue官方案例中,入口文件main.js的內(nèi)容如下,其中使用了render函數(shù)進(jìn)行模板解析。

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

Vue.config.productionTip = false

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

如果我們使用template屬性進(jìn)行模板解析,會(huì)報(bào)錯(cuò)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.

//通過(guò) import Vue from 'vue/dist/vue'引入完整版的vue,則代碼不會(huì)報(bào)錯(cuò)

import Vue from 'vue'//默認(rèn)引入運(yùn)行版的vue,使用template編寫(xiě)模板會(huì)報(bào)錯(cuò)

Vue.config.productionTip = false

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

注意:上邊說(shuō)的模板解析指的是解析vm配置對(duì)象的template屬性中定義的模板

組件中的模板(.vue中template標(biāo)簽中的內(nèi)容),vue使用了vue-template-compiler幫助我們解析,而且可以看到他只在開(kāi)發(fā)依賴(lài)中,在生產(chǎn)依賴(lài)中是沒(méi)有的,這也很好解釋?zhuān)驗(yàn)榇虬蟮奈募g覽器已經(jīng)可以直接運(yùn)行了,不存在vue模板語(yǔ)法,也就不需要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-template-compiler": "^2.6.11"
},

原理

在vm的配置對(duì)象中使用template屬性,可以通過(guò)HTML語(yǔ)法,創(chuàng)建vue模板頁(yè)面,我們編寫(xiě)的Vue模板在底層先會(huì)被轉(zhuǎn)換成虛擬Dom,才會(huì)渲染到頁(yè)面中(真實(shí)Dom)。

在vm的配置對(duì)象中使用 render函數(shù) ,可以直接用js構(gòu)建虛擬DOM,免去了轉(zhuǎn)譯(Vue模板轉(zhuǎn)譯成虛擬Dom)的過(guò)程。

后記

到此這篇關(guān)于Vue中為什么要引入render函數(shù)的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Vue引入render函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問(wèn)題

    解決vue2.x中數(shù)據(jù)渲染以及vuex緩存的問(wèn)題

    本篇文章主要介紹了vue2.x中請(qǐng)求之前數(shù)據(jù)顯示以及vuex緩存的問(wèn)題,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-07-07
  • element中el-form-item屬性prop踩坑

    element中el-form-item屬性prop踩坑

    最近需要用到vue,在el-form-item屬性prop上遇到報(bào)錯(cuò)或者沒(méi)綁定到數(shù)據(jù),本文主要介紹了element中el-form-item屬性prop踩坑,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • Vue+Echarts繪制餅圖的示例詳解

    Vue+Echarts繪制餅圖的示例詳解

    這篇文章主要為大家詳細(xì)介紹了如何利用Vue和Echarts實(shí)現(xiàn)繪制餅圖,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
    2023-03-03
  • vue中的provide/inject的學(xué)習(xí)使用

    vue中的provide/inject的學(xué)習(xí)使用

    本篇文章主要介紹了vue中的provide/inject的學(xué)習(xí)使用,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
    2018-05-05
  • vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能示例

    vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能示例

    這篇文章主要介紹了vue基于兩個(gè)計(jì)算屬性實(shí)現(xiàn)選中和全選功能,結(jié)合實(shí)例形式分析了vue計(jì)算屬性get及set操作頁(yè)面元素實(shí)現(xiàn)選中與全選功能相關(guān)操作技巧,需要的朋友可以參考下
    2019-02-02
  • vuex中mapState思想應(yīng)用

    vuex中mapState思想應(yīng)用

    這篇文章主要分享vuex中mapState思想及應(yīng)用,在需求開(kāi)發(fā)過(guò)程中,有的接口返回的結(jié)果中有很多字段需要展示到頁(yè)面上。通??梢詫⑦@些字段在.vue文件中封裝為計(jì)算屬性,或者重新將對(duì)應(yīng)字段賦值到 data 中的字段來(lái)達(dá)到便于使用的目的,具體內(nèi)容,我們一起來(lái)看下面文章內(nèi)容吧
    2021-10-10
  • Vite+Vue3使用MockJS的實(shí)現(xiàn)示例

    Vite+Vue3使用MockJS的實(shí)現(xiàn)示例

    寫(xiě)一些純前端的項(xiàng)目時(shí),自己造數(shù)據(jù)有些麻煩,于是我們可以利用mock造一些簡(jiǎn)單的數(shù)據(jù),來(lái)滿(mǎn)足我們的需求,本文主要介紹了Vite+Vue3使用MockJS的實(shí)現(xiàn)示例,感興趣的可以了解一下
    2024-01-01
  • vue在同一個(gè)頁(yè)面重復(fù)引用相同組件如何區(qū)分二者

    vue在同一個(gè)頁(yè)面重復(fù)引用相同組件如何區(qū)分二者

    這篇文章主要介紹了vue在同一個(gè)頁(yè)面重復(fù)引用相同組件如何區(qū)分二者,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-08-08
  • vue實(shí)現(xiàn)上傳圖片添加水印(升級(jí)版)

    vue實(shí)現(xiàn)上傳圖片添加水印(升級(jí)版)

    這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)上傳圖片添加水印的升級(jí)版,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-09-09
  • vite?vue3下配置history模式路由的步驟記錄

    vite?vue3下配置history模式路由的步驟記錄

    路由存在兩者模式,一種是歷史模式history,一種是hash模式,下面這篇文章主要給大家介紹了關(guān)于vite?vue3下配置history模式路由的相關(guān)資料,需要的朋友可以參考下
    2023-01-01

最新評(píng)論