資訊專欄INFORMATION COLUMN
摘要：原文鏈接我的，歡迎。這次想要分享的一篇文章是從一個(gè)奇怪的錯(cuò)誤出發(fā)理解的基本概念。瞬間明白了，原來是函數(shù)，一個(gè)考驗(yàn)編程能力的函數(shù)，比更接近編譯器。來看這里有一個(gè)小知識(shí)點(diǎn)被忽略在實(shí)例掛載之后，元素可以用訪問腦補(bǔ)會(huì)用到的場(chǎng)景中。。。
原文鏈接我的blog，歡迎STAR。
這次想要分享的一篇文章是：從一個(gè)奇怪的錯(cuò)誤出發(fā)理解Vue的基本概念。
這篇文章以Vue的兩種構(gòu)建方式做為切入點(diǎn)，深入探討了Vue的基本概念，編譯以及掛載的相關(guān)過程。
在這篇文章里學(xué)到很多以前忽略的地方:
開始學(xué)習(xí)vue的時(shí)候，由于有一些react基礎(chǔ)，對(duì)組件的形式有些了解，就直接從vue-cli開始了，忽略了vue的兩種構(gòu)建模式，既是使用默認(rèn)的運(yùn)行時(shí)構(gòu)建。
從vue官網(wǎng)里，可以很清楚的了解，vue存在兩種構(gòu)建模式，運(yùn)行構(gòu)建和獨(dú)立構(gòu)建。他們的區(qū)別在于獨(dú)立構(gòu)建包含模板編譯，而運(yùn)行構(gòu)建不含模板編譯。
那么問題來了，在項(xiàng)目那么多組件里，每個(gè)組件都有template選項(xiàng)，既然運(yùn)行時(shí)構(gòu)建不含模板編譯, 那是怎么項(xiàng)目是怎么運(yùn)行起來，難道我是使用了假的vue？？
來看看官網(wǎng)的說明：
運(yùn)行時(shí)構(gòu)建不含模板編譯器，因此不支持template選項(xiàng)，只能用render選項(xiàng)，但即使使用運(yùn)行時(shí)構(gòu)建，在單文件組件中也依然可以寫模板，因?yàn)閱挝募M件的模板在構(gòu)建時(shí)預(yù)編譯為render函數(shù)。
瞬間明白了，原來是render函數(shù)，一個(gè)考驗(yàn)JavaScript編程能力的函數(shù)，比template更接近編譯器。
那么問題又來了，render函數(shù)與template有什么關(guān)系？
render 函數(shù)、 template 屬性以及 el屬性。
分享的這篇文章有一點(diǎn)總結(jié)的很好：
當(dāng)Vue選項(xiàng)對(duì)象中有render渲染函數(shù)時(shí)，Vue構(gòu)造函數(shù)將直接使用渲染函數(shù)渲染DOM樹，當(dāng)選項(xiàng)對(duì)象中沒有render渲染函數(shù)時(shí)，Vue構(gòu)造函數(shù)首先通過將template模板生成render函數(shù)，然后再渲染DOM樹，而當(dāng)選項(xiàng)對(duì)象中既沒有render渲染函數(shù)，也沒有template模板時(shí)，會(huì)通過el屬性獲取掛載元素的outerHTML來作為模板，并編譯生成渲染函數(shù)。
似曾相識(shí)的幾句話……
Vue官網(wǎng)API搜索template：
這里最后一句話，如果Vue選項(xiàng)中包含render函數(shù)，template選項(xiàng)將被忽略，也就是說在渲染DOM樹時(shí)render函數(shù)的優(yōu)先級(jí) 大于 template選項(xiàng)。
意思也是在進(jìn)行DOM渲染的時(shí)候，render函數(shù)優(yōu)先級(jí)最高，template和el次之。
來看 el：
這里有一個(gè)小知識(shí)點(diǎn)被忽略： 在實(shí)例掛載之后，元素可以用vm.$el訪問（腦補(bǔ)會(huì)用到的場(chǎng)景中。。。）
最后一條信息里：
如果render函數(shù)和template屬性都不存在，掛在DOM元素的HTML會(huì)被提取出來用作模板，此時(shí)，必須使用Runtime + Compiler構(gòu)建的Vue庫(kù)。
也就是說： 在進(jìn)行DOM樹渲染時(shí)，render渲染函數(shù)的優(yōu)先級(jí)最高，template次之且需要編譯成渲染函數(shù)，在前兩者均不存在時(shí)，掛載DOM元素的outerHTML會(huì)被提取出來用作模板。
當(dāng)然，構(gòu)建Vue實(shí)例時(shí)，可以不含有render, template, el三者中任何一個(gè)。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82330.html
摘要：，谷歌給的一份性能指南和最佳實(shí)踐。目前而言，前端社區(qū)有三大框架和。隨后重點(diǎn)講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個(gè)是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...
摘要：，谷歌給的一份性能指南和最佳實(shí)踐。目前而言，前端社區(qū)有三大框架和。隨后重點(diǎn)講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個(gè)是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...
摘要：本篇文章主要是我在開發(fā)前研究了的單頁(yè)面應(yīng)用，因?yàn)樾枰玫降模源_保安裝了，建議官網(wǎng)安裝最新的穩(wěn)定版本。本文章只是和大家探討怎么利用配合做一個(gè)單頁(yè)面應(yīng)用，具體關(guān)于里面的內(nèi)容怎么寫并不在本篇文章的介紹范圍。 本篇文章主要是我在開發(fā)前研究了webpack+vue.js的單頁(yè)面應(yīng)用，因?yàn)樾枰玫絥ode的npm，所以確保安裝了node，建議官網(wǎng)安裝最新的穩(wěn)定版本。并且在項(xiàng)目中需要加載一些np...
閱讀 1604·2021-11-25 09:43
閱讀 2508·2019-08-30 15:54
閱讀 2981·2019-08-30 15:53
閱讀 1121·2019-08-30 15:53
閱讀 775·2019-08-30 15:52
閱讀 2565·2019-08-26 13:36
閱讀 845·2019-08-26 12:16
閱讀 1242·2019-08-26 12:13
