快捷導(dǎo)航

Vue組件渲染與更新實(shí)現(xiàn)過程淺析

更新時(shí)間：2023年03月03日 09:04:04 作者：周興

這篇文章主要介紹了Vue組件渲染與更新實(shí)現(xiàn)過程，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧

1. 模板編譯

Vue的模板編譯就是將模板字符串轉(zhuǎn)換為渲染函數(shù)的過程。具體來說，當(dāng)組件的生命周期執(zhí)行到created和beforeMounted之間時(shí)，Vue會將模板(template)編譯成渲染函數(shù)(render)，render函數(shù)是一個(gè)純JavaScript函數(shù)，由with語句構(gòu)成，它接收一個(gè)Vue組件實(shí)例作為參數(shù)。當(dāng)render函數(shù)執(zhí)行時(shí)會調(diào)用h函數(shù)，生成虛擬DOM節(jié)點(diǎn)(vnode)。

下面給出了常見的template模板以及模板編譯后的結(jié)果：

插值

`<p>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{message}}</p>`

with(this){return _c('p',[_v(_s(message))])}
// _c 表示 createElement   也就是h函數(shù)  返回vnode 
// _v 表示 createTextVNode
// _s 表示 toString

表達(dá)式

`<p>{<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->{flag ? message : 'no message found'}}</p>`

with(this){<!--{cke_protected}{C}%3C!%2D%2D%20%2D%2D%3E-->return _c('p',[_v(_s(flag ? message : 'no message found'))])}

屬性和動態(tài)屬性

`<div id="div1" class="container">
	<img :src="imgUrl"/>
</div>`

with(this){
	return _c('div',
			{staticClass:"container",attrs:{"id":"div1"}},
			[_c('img',{attrs:{"src":imgUrl}})]
			)
}

條件

`<div>
    <p v-if="flag === 'a'">A</p>
    <p v-else>B</p>
</div>`

with(this){
	return _c('div',[(flag === 'a')?_c('p',[_v("A")]):_c('p',[_v("B")])])
}

循環(huán)

`<ul>
    <li v-for="item in list" :key="item.id">{{item.title}}</li>
</ul>`

with(this){
	return _c('ul',_l((list),
		function(item){return _c('li',{key:item.id},
		[_v(_s(item.title))])}),0
		)
}

事件

`<button @click="clickHandler">submit</button>`

with(this){return _c('button',{on:{"click":clickHandler}},[_v("submit")])}

v-model

`<input type="text" v-model="name">`

with(this){
return _c('input',
	{directives:[{name:"model",rawName:"v-model",value:(name),expression:"name"}],attrs:{"type":"text"},domProps:{"value":(name)},on:{"input":function($event){if($event.target.composing)return;name=$event.target.value}}}
	)
}

2. 組件渲染和更新

Vue組件渲染和更新的過程簡單地概況為以下幾個(gè)步驟：

初始化組件實(shí)例：在渲染一個(gè)組件之前，Vue會創(chuàng)建一個(gè)組件實(shí)例，并將組件的選項(xiàng)對象進(jìn)行合并、處理，最終形成一個(gè)組件實(shí)例的配置對象。
渲染組件：Vue將組件實(shí)例的配置對象轉(zhuǎn)化為一個(gè)渲染函數(shù)，并執(zhí)行該渲染函數(shù)，生成一個(gè)虛擬DOM樹。此時(shí)，Vue會對虛擬DOM樹進(jìn)行初次渲染，將組件顯示在頁面上。
監(jiān)聽數(shù)據(jù)變化：當(dāng)組件實(shí)例中的響應(yīng)式數(shù)據(jù)發(fā)生變化時(shí)，Vue會立即檢測到這些變化，并重新計(jì)算組件的渲染函數(shù)，生成一個(gè)新的虛擬DOM樹。
對比新舊虛擬DOM樹：Vue會將新生成的虛擬DOM樹和上一次渲染時(shí)生成的虛擬DOM樹進(jìn)行比較，找出需要更新的部分。
更新組件：Vue會將需要更新的部分進(jìn)行精細(xì)化地修改，使組件達(dá)到更新的效果。如果有需要，Vue會重新渲染整個(gè)組件。

到此這篇關(guān)于Vue組件渲染與更新實(shí)現(xiàn)過程淺析的文章就介紹到這了,更多相關(guān)Vue組件渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: