Vue渲染器如何對(duì)節(jié)點(diǎn)進(jìn)行掛載和更新
一、子節(jié)點(diǎn)和元素的屬性
先前我們討論了一個(gè)簡(jiǎn)單的渲染器是如何實(shí)現(xiàn)的 一文詳解Vue中渲染器的簡(jiǎn)單實(shí)現(xiàn)_vue.js_腳本之家 (jb51.net) 但是實(shí)際上還有一些問題需要完善：
- 子節(jié)點(diǎn)不一定只是一個(gè)文本節(jié)點(diǎn),實(shí)際上其可能會(huì)是多個(gè)不同的節(jié)點(diǎn)。
- 我們并沒有對(duì)被掛載的元素的屬性進(jìn)行處理。
1.如何處理子節(jié)點(diǎn)為多個(gè)節(jié)點(diǎn)的情況：
處理vnode的數(shù)據(jù)結(jié)構(gòu)以正確描述多個(gè)節(jié)點(diǎn)的情況
我們可以將vnode的children定義為一個(gè)數(shù)組，數(shù)組的每一項(xiàng)也是一個(gè)vnode，這樣就可以去正確的描述其結(jié)構(gòu)。
const vnode = {
type: 'div',
children: [
{
type: 'p',
children: 'hello'
}
]
}
如上代碼所示其描述的子節(jié)點(diǎn)為一個(gè)<p>hello</p>,在數(shù)組中也可繼續(xù)去添加別的不同類型的vnode，這樣便形成了一種樹形結(jié)構(gòu)虛擬DOM樹，可以更好的去描述真實(shí)DOM的情況。
調(diào)整mountElement去正確的掛載修改后的vnode
function mountElement(vnode, container) {
const el = createElement(vnode.type)
if (typeof vnode.children === 'string') {
setElementText(el, vnode.children)
} else if (Array.isArray(vnode.children)) {
vnode.children.forEach(child => {
patch(null, child, el)
})
}
insert(el, container)
}
我們給vnode.children的類型做了一個(gè)判斷，當(dāng)其為數(shù)組類型時(shí)表示子節(jié)點(diǎn)有多個(gè)，通過遍歷調(diào)用patch來進(jìn)行掛載
2.如何處理被掛載元素的屬性：
####如何修改vnode去描述元素屬性：
給vnode添加props字段，其類型是一個(gè)對(duì)象，對(duì)象的鍵是屬性名，值是屬性值，
const vnode = {
type: 'div',
props: {
id: 'foo'
},
children: [
{
type: 'p',
children: 'hello'
}
]
}
調(diào)整mountElement去正確的掛載修改后的vnode
function mountElement(vnode, container) {
const el = createElement(vnode.type)
if (typeof vnode.children === 'string') {
setElementText(el, vnode.children)
} else if (Array.isArray(vnode.children)) {
vnode.children.forEach(child => {
patch(null, child, el)
})
}
if (vnode.props) {
for (const key in vnode.props) {
el.setAttribute(key, vnode.props[key])
}
}
insert(el, container)
}
增加一個(gè)對(duì)props的判斷，對(duì)其進(jìn)行遍歷，獲取到props對(duì)象的鍵和值，并使用setAttribute函數(shù)將屬性應(yīng)用到el上。 除此之外還可以直接在DOM對(duì)象上直接進(jìn)行元素屬性的設(shè)置：
if (vnode.props) {
for (const key in vnode.props) {
// 直接設(shè)置
el[key] = vnode.props[key]
}
}
以上兩種設(shè)置方法都有一定的局限性，所以我們需要在不同情況下靈活進(jìn)行使用，接下來我們將討論其區(qū)別，從而明確其使用時(shí)機(jī)。
二、HTML Attributes 與 DOM Properties 的區(qū)別
假設(shè)有一個(gè)如下元素:
<input id="my-input" type="text" value="foo" />
對(duì)于此元素而言:
- HTML Attributes是：
id="my-input"、type="text"、value="foo"等 - DOM Properties是：瀏覽器解析元素的HTML后生成的一個(gè)DOM對(duì)象，假設(shè)以上元素對(duì)應(yīng)的DOM對(duì)象為
el，則對(duì)應(yīng)DOM Properties分別是el.id，el.type,el.value.
區(qū)別
二者名稱不一定相同，比如
<div class="foo"></div>
對(duì)于上面的元素：class="foo" 對(duì)應(yīng)的 DOM Properties 是 el.className
二者也不是一一對(duì)應(yīng)的， 有些HTML Attributes沒有對(duì)應(yīng)的DOM Properties反之亦然 關(guān)鍵的一點(diǎn)在于：
HTML Attributes 的作用是設(shè)置與之對(duì)應(yīng)的 DOM Pr operties 的初始值 對(duì)于input標(biāo)簽的value屬性而言，如果沒有修改input值得情況下，el.value讀取得到值是foo,但是當(dāng)文本框被輸入之后，此時(shí)再使用el.value去獲取值時(shí)得到得值就是新輸入得值，但是使用el.getAttribute('value')得到得值仍是foo，即HTML Attributes存儲(chǔ)的是元素的初始值
三、完善元素屬性的設(shè)置
當(dāng)元素在正常的HTML文件中時(shí)，瀏覽器會(huì)自動(dòng)分析 HTML Attributes 并設(shè)置對(duì)應(yīng)的 DOM Properties，但是在Vue中，模板有時(shí)并不會(huì)被解析并設(shè)置對(duì)應(yīng)關(guān)系。
1.對(duì)于屬性值為布爾類型節(jié)點(diǎn)的處理
有如下元素:
<button disabled>Button</button>
在HTML中其會(huì)被解析的結(jié)果是button有一個(gè)disabled的HTML Attributes，對(duì)應(yīng)的DOM Properties(el.disabled)的值設(shè)為true，按鈕為禁止?fàn)顟B(tài)。 在Vue中該HTML對(duì)應(yīng)如下vnode節(jié)點(diǎn):
const button = {
type: 'button',
props: {
disabled: ''
}
}
在渲染器中調(diào)用setAttribute設(shè)置disabled HTML Attributes時(shí)會(huì)起作用，按鈕會(huì)被禁用
el.setAttribute('disabled', '')
但在vue的模板中會(huì)存在屬性是變量的情況，如下
<button :disabled="false">Button</button>
此時(shí)渲染器渲染時(shí)使用的vnode是
const button = {
type: 'button',
props: {
disabled: false
}
}
此時(shí)調(diào)用setAttribute設(shè)置disabled
el.setAttribute('disabled', false)
由于通過setAttribute設(shè)置的屬性會(huì)字符串化即變成如下情況
el.setAttribute('disabled', 'false')
由于el.disable為布爾類型的值，當(dāng)設(shè)置為'false'時(shí)，其實(shí)就是true，即禁用按鈕，這顯然不符合期望。 我們可以通過DOM Properties設(shè)置即el.disabled = false。 通過DOM Properties設(shè)置可以解決當(dāng)前的問題，但是如果屬性值對(duì)于一開始的情況
<button disabled>Button</button>
又會(huì)存在問題，對(duì)于vnode
const button = {
type: 'button',
props: {
disabled: ''
}
}
使用DOM Properties設(shè)置
el.disabled = ''
由于el.disable為布爾類型的值，當(dāng)設(shè)置為''時(shí)，其實(shí)就是false，即不禁用按鈕，這也不符合期望。
很顯然我們?cè)趯?duì)元素屬性進(jìn)行設(shè)置時(shí)需要對(duì)特殊的情況進(jìn)行處理，而不是單一的使用setAttribute設(shè)置HTML Attributes或者設(shè)置DOM Properties，從而正確設(shè)置屬性： 具體的解決方法是: 優(yōu)先設(shè)置元素的 DOM Properties，但當(dāng)值為空字符串時(shí)，要手動(dòng)將值矯正為 true 因此對(duì)mountElement函數(shù)做優(yōu)化
function mountElement(vnode, container) {
const el = createElement(vnode.type)
if (typeof vnode.children === 'string') {
setElementText(el, vnode.children)
} else if (Array.isArray(vnode.children)) {
vnode.children.forEach(child => {
patch(null, child, el)
})
}
if (vnode.props) {
for (const key in vnode.props) {
if (key in el) {
// 獲取該 DOM Properties 的類型
const type = typeof el[key]
const value = vnode.props[key]
// 如果是布爾類型，并且 value 是空字符串，則將值矯正為 true
if (type === 'boolean' && value === '') {
el[key] = true
} else {
el[key] = value
}
} else {
// 如果要設(shè)置的屬性沒有對(duì)應(yīng)的 DOM Properties，則使用 setAttribute 函數(shù)設(shè)置屬性
el.setAttribute(key, vnode.props[key])
}
}
}
insert(el, container)
}
在設(shè)置vnode的props時(shí)，首先確認(rèn)是否存在DOM Properties，存在則優(yōu)先使用，而當(dāng)遇到屬性值為空字符串時(shí)，將值變?yōu)閠rue，若DOM Properties不存在使用setAttribute設(shè)置。
2.只讀DOM Properties處理
有一些元素的DOM 是只讀的，比如
<form id="form1"></form> <input form="form1" />
input的el.form屬性是只讀的，此時(shí)我們只能使用setAttribute去設(shè)置它，需要對(duì)mountElement再次完善，增加一個(gè)shouldSetAsProps函數(shù)用于判斷屬性是否可以使用DOM Properties來設(shè)置否則使用setAttribute
function shouldSetAsProps(el, key, value) {
if (key === 'form' && el.tagName === 'INPUT') return false
return key in el
}
function mountElement(vnode, container) {
const el = createElement(vnode.type)
if (typeof vnode.children === 'string') {
setElementText(el, vnode.children)
} else if (Array.isArray(vnode.children)) {
vnode.children.forEach(child => {
patch(null, child, el)
})
}
if (vnode.props) {
for (const key in vnode.props) {
const value = vnode.props[key]
if (shouldSetAsProps(el, key, value)) {
const type = typeof el[key]
if (type === 'boolean' && value === '') {
el[key] = true
} else {
el[key] = value
}
} else {
el.setAttribute(key, vnode.props[key])
}
}
}
insert(el, container)
}
實(shí)際上類似form屬性的情況很多，在類似的情況下也需要使用和處理form屬性相似的邏輯進(jìn)行優(yōu)化
3.將渲染器處理為與平臺(tái)無關(guān)
同樣的為了不把渲染器限定在瀏覽器平臺(tái)，需要將設(shè)置屬性的邏輯也作為配置項(xiàng)處理
const renderer = createRenderer({
createElement(tag) {
return document.createElement(tag)
},
setElementText(el, text) {
el.textContent = text
},
insert(el, parent, anchor = null) {
parent.insertBefore(el, anchor)
},
patchProps(el, key, preValue, nextValue) {
if (shouldSetAsProps(el, key, nextValue)) {
const type = typeof el[key]
if (type === 'boolean' && nextValue === '') {
el[key] = true
} else {
el[key] = nextValue
}
} else {
el.setAttribute(key, nextValue)
}
}
})
...
function mountElement(vnode, container) {
const el = createElement(vnode.type)
if (typeof vnode.children === 'string') {
setElementText(el, vnode.children)
} else if (Array.isArray(vnode.children)) {
vnode.children.forEach(child => {
patch(null, child, el)
})
}
if (vnode.props) {
for (const key in vnode.props) {
patchProps(el, key, null, vnode.props[key])
}
}
insert(el, container)
}
function patch(n1, n2, container) {
if (!n1) {
mountElement(n2, container)
} else {
//
}
}
我們將patchProps函數(shù)作為配置項(xiàng)傳入，并在mountElement中處理vnode.props時(shí)使用，這樣就可以將邏輯抽離出去。
四、處理class
Vue中對(duì)class做了處理，有多種方式可以設(shè)置class
1.字符串
<p class="foo bar"></p>
2.對(duì)象
<p :class="{ foo: true, bar: false }"></p>
3.數(shù)組：可以組合以上兩種類型
<p :class="[ 'foo bar', { baz: true } ]"></p>
當(dāng)class為字符串時(shí)，直接使用el.className進(jìn)行設(shè)置即可，但是其余兩種情況需要處理，在Vue中其使用normalizeClass去處理，主要的邏輯就是遍歷數(shù)組和對(duì)象，然后使用+=逐步將數(shù)組中的class項(xiàng)和對(duì)象中值為true的項(xiàng)的鍵累加，變?yōu)樽址⒎祷亍?/p>
function normalizeClass(value) {
let res = ''
if (isString(value)) {
res = value
} else if (isArray(value)) {
for (let i = 0; i < value.length; i++) {
const normalized = normalizeClass(value[i])
if (normalized) {
res += normalized + ' '
}
}
} else if (isObject(value)) {
for (const name in value) {
if (value[name]) {
res += name + ' '
}
}
}
return res.trim()
}
五、節(jié)點(diǎn)的卸載：
在之前實(shí)現(xiàn)的渲染器中，卸載是直接使用innerHTML將容器的內(nèi)容清空，這可以達(dá)到效果，但是卻不太完善，因?yàn)樵趯?shí)際情況下：
- 如果容器的內(nèi)容由組件渲染的，則當(dāng)其被卸載時(shí)需要觸發(fā)組件的beforeUnmount等鉤子函數(shù)。
- 如果元素存在自定義指令，自定義指令中同時(shí)存在卸載時(shí)需要觸發(fā)的鉤子函數(shù)。
- 直接使用innerHTML將容器的內(nèi)容清空，元素上的事件不會(huì)被清空
為了解決以上問題，我們使用如下方式去卸載節(jié)點(diǎn)
根據(jù) vnode 對(duì)象獲取與其相關(guān)聯(lián)的真實(shí) DOM 元素，然后使用原生 DOM 操作方法將該DOM 元素移除。
function mountElement(vnode, container) {
const el = vnode.el = createElement(vnode.type)
if (typeof vnode.children === 'string') {
setElementText(el, vnode.children)
} else if (Array.isArray(vnode.children)) {
vnode.children.forEach(child => {
patch(null, child, el)
})
}
if (vnode.props) {
for (const key in vnode.props) {
patchProps(el, key, null, vnode.props[key])
}
}
insert(el, container)
}
調(diào)整mountElement，在創(chuàng)建真實(shí)DOM元素的時(shí)候，將創(chuàng)建的元素賦值給vnode.el,這樣就能通過vnode.el取得并操作真實(shí)DOM。當(dāng)需要卸載時(shí)首先使用vnode.el.parentNode拿到vnode對(duì)應(yīng)的真實(shí)DOM，然后再使用removeChild移除(vnode.el):
function render(vnode, container) {
if (vnode) {
patch(container._vnode, vnode, container)
} else {
if (container._vnode) {
const parent = vnode.el.parentNode
if (parent) {
parent.removeChild(vnode.el)
}
}
}
container._vnode = vnode
}
為方便復(fù)用以及后續(xù)對(duì)組件的生命周期鉤子和自定義指令鉤子的調(diào)用，我們將卸載的邏輯封裝在unmount函數(shù)中。
function unmount(vnode) {
const parent = vnode.el.parentNode
if (parent) {
parent.removeChild(vnode.el)
}
}
function render(vnode, container) {
if (vnode) {
patch(container._vnode, vnode, container)
} else {
if (container._vnode) {
unmount(container._vnode)
}
}
container._vnode = vnode
}
六、對(duì)于patch函數(shù)的優(yōu)化
1.新舊節(jié)點(diǎn)不一樣時(shí)是否一定要使用patch打補(bǔ)丁呢？
在之前實(shí)現(xiàn)的渲染器中，我們使用patch對(duì)于節(jié)點(diǎn)處理邏輯如下:
function patch(n1, n2, container) {
if (!n1) {
mountElement(n2, container)
} else {
// 更新
}
}
如果新舊節(jié)點(diǎn)均存在則意味著需要打補(bǔ)丁去更新其中的內(nèi)容。但是考慮一種情況，當(dāng)新舊節(jié)點(diǎn)的類型不同時(shí)，打補(bǔ)丁是沒有意義的，因?yàn)轭愋偷淖兓瘯?huì)導(dǎo)致節(jié)點(diǎn)屬性的不同，比如vnode的類型(type)從'p'變?yōu)?code>'input',在這種情況下我們應(yīng)該做的是卸載舊的vnode，然后掛載新的vnode。
function patch(n1, n2, container) {
if (n1 && n1.type !== n2.type) {
unmount(n1)
n1 = null
}
if (!n1) {
mountElement(n2, container)
} else {
patchElement(n1, n2)
}
}
通過如上處理在patch中我們先去若舊節(jié)點(diǎn)存在并且新舊節(jié)點(diǎn)類型不同則調(diào)用unmount卸載舊節(jié)點(diǎn)，并將其值置為null，以便后續(xù)去判斷是要執(zhí)行掛載還是打補(bǔ)丁操作。若新舊節(jié)點(diǎn)類型相同則則使用patch去通過打補(bǔ)丁的方式更新。
2.vnode如果描述的是一個(gè)組件的話如何去處理掛載和打補(bǔ)丁呢？
在節(jié)點(diǎn)是一個(gè)組件的情況下，vnode的type會(huì)是一個(gè)對(duì)象，我們通過判斷vnode的type是否為對(duì)象從而執(zhí)行特定的操作:
function patch(n1, n2, container) {
if (n1 && n1.type !== n2.type) {
unmount(n1)
n1 = null
}
const { type } = n2
if (typeof type === 'string') {
if (!n1) {
mountElement(n2, container)
} else {
patchElement(n1, n2)
}
} else if (typeof type === 'object') {
// 組件
}
}
七、如何給節(jié)點(diǎn)掛載事件：
1.在vnode節(jié)點(diǎn)中如何描述事件：
在vnode的props對(duì)象中，凡是以on開頭的屬性都被定義為事件：
const vnode = {
type: 'p',
props: {
onClick: () => {
alert('clicked 1')
}
},
children: 'text'
}
如上所示我們給一個(gè)類型為'p'的vnode描述了一個(gè)onCLick事件
2.如何將描述有事件的vnode節(jié)點(diǎn)掛載
我們先前使用patchProps去掛載vnode的props，為了能夠支持事件的掛載需要對(duì)其進(jìn)行一定的修改
patchProps(el, key, preValue, nextValue) {
if (/^on/.test(key)) {
const name = key.slice(2).toLowerCase()
// 移除上一次綁定的事件處理函數(shù)prevValue
prevValue && el.removeEventListener(name, prevValue)
// 綁定新的事件處理函數(shù)
el.addEventListener(name, nextValue)
} else if (key === 'class') {
el.className = nextValue || ''
} else if (shouldSetAsProps(el, key, nextValue)) {
const type = typeof el[key]
if (type === 'boolean' && nextValue === '') {
el[key] = true
} else {
el[key] = nextValue
}
} else {
el.setAttribute(key, nextValue)
}
}
如上使用正則去匹配on開頭的key，首先判斷是否已經(jīng)掛載了一個(gè)同名的事件處理函數(shù)，有的話就先移除，然后再使用addEventListener掛載新的事件處理函數(shù)。
3.事件處理函數(shù)頻繁更新時(shí)如何優(yōu)化性能？
優(yōu)化思路
我們可以將事件處理函數(shù)固定并命名為invoker，并將實(shí)際的事件處理函數(shù)賦值給invoker.value。這樣在掛載的時(shí)候我們掛載的是invoker，并invoker內(nèi)部執(zhí)行真正的事件處理函數(shù)invoker.value，這樣當(dāng)需要更新事件處理函數(shù)時(shí)我們直接替換invoker.value的值即可，而不用使用removeEventListener去移除。為了能夠在事件處理函數(shù)更新時(shí)判斷有沒有設(shè)置invoker我們將invoker緩存在el._vei上.
patchProps(el, key, prevValue, nextValue) {
if (/^on/.test(key)) {
let invoker = el._vei
const name = key.slice(2).toLowerCase()
if (nextValue) {
if (!invoker) {
invoker = el._vei = (e) => {
invoker.value(e)
}
invoker.value = nextValue
el.addEventListener(name, invoker)
} else {
invoker.value = nextValue
}
} else if (invoker) {
el.removeEventListener(name, invoker)
}
} else if (key === 'class') {
el.className = nextValue || ''
} else if (shouldSetAsProps(el, key, nextValue)) {
const type = typeof el[key]
if (type === 'boolean' && nextValue === '') {
el[key] = true
} else {
el[key] = nextValue
}
} else {
el.setAttribute(key, nextValue)
}
}
一個(gè)vnode上同時(shí)存在多個(gè)事件應(yīng)該如何處理 在之前的實(shí)現(xiàn)中我們直接將el._vei賦值給invoker，這樣無法去處理vnode上的多個(gè)事件，如果像下面這樣定義了多個(gè)事件，會(huì)導(dǎo)致后面的事件覆蓋之前的事件
const newVnode = {
type: 'p',
props: {
onClick: () => {
alert('click')
},
onContextmenu: () => {
alert('contextmenu')
}
},
children: 'text'
}
解決方式是：將patchProps中的 el._vei定義為一個(gè)對(duì)象，將事件名稱作為其鍵，值則是該事件對(duì)應(yīng)的事件處理函數(shù)
patchProps(el, key, prevValue, nextValue) {
if (/^on/.test(key)) {
const invokers = el._vei || (el._vei = {})
//根據(jù)事件名稱獲取 invoker
let invoker = invokers[key]
const name = key.slice(2).toLowerCase()
if (nextValue) {
if (!invoker) {
// 將事件處理函數(shù)緩存到 el._vei[key] 下，避免覆蓋
invoker = el._vei[key] = (e) => {
invoker.value(e)
}
invoker.value = nextValue
el.addEventListener(name, invoker)
} else {
invoker.value = nextValue
}
} else if (invoker) {
el.removeEventListener(name, invoker)
}
} else if (key === 'class') {
el.className = nextValue || ''
} else if (shouldSetAsProps(el, key, nextValue)) {
const type = typeof el[key]
if (type === 'boolean' && nextValue === '') {
el[key] = true
} else {
el[key] = nextValue
}
} else {
el.setAttribute(key, nextValue)
}
}
一個(gè)事件需要多個(gè)事件處理函數(shù)執(zhí)行應(yīng)該如何處理 當(dāng)同一個(gè)事件存在多個(gè)事件處理函數(shù)，比如同時(shí)存在兩個(gè)click的事件處理函數(shù)
const vnode = {
type: 'p',
props: {
onClick: [
() => {
alert('clicked 1')
},
() => {
alert('clicked 2')
}
]
},
children: 'text'
}
此時(shí)我們需要對(duì) el._vei[key]增加一層判斷，時(shí)數(shù)組的情況下，需要遍歷去調(diào)用其中的事件處理函數(shù)
patchProps(el, key, prevValue, nextValue) {
if (/^on/.test(key)) {
const invokers = el._vei || (el._vei = {})
let invoker = invokers[key]
const name = key.slice(2).toLowerCase()
if (nextValue) {
if (!invoker) {
invoker = el._vei[key] = (e) => {
//如果是數(shù)組，遍歷調(diào)用事件處理函數(shù)
if (Array.isArray(invoker.value)) {
invoker.value.forEach(fn => fn(e))
} else {
invoker.value(e)
}
}
invoker.value = nextValue
el.addEventListener(name, invoker)
} else {
invoker.value = nextValue
}
} else if (invoker) {
el.removeEventListener(name, invoker)
}
} else if (key === 'class') {
el.className = nextValue || ''
} else if (shouldSetAsProps(el, key, nextValue)) {
const type = typeof el[key]
if (type === 'boolean' && nextValue === '') {
el[key] = true
} else {
el[key] = nextValue
}
} else {
el.setAttribute(key, nextValue)
}
}
八、事件冒泡處理
當(dāng)vnode的父子節(jié)點(diǎn)的事件之間有關(guān)聯(lián)時(shí)，會(huì)因?yàn)槭录芭莩霈F(xiàn)一定問題，如下情況
const { effect, ref } = VueReactivity
const bol = ref(false)
effect(() => {
const vnode = {
type: 'div',
props: bol.value ? {
onClick: () => {
alert('父元素 clicked')
}
} : {},
children: [
{
type: 'p',
props: {
onClick: () => {
bol.value = true
}
},
children: 'text'
}
]
}
renderer.render(vnode, document.querySelector('#app'))
})
看一下以上代碼:
- 定義了一個(gè)響應(yīng)式數(shù)據(jù)
bol，初始值為false - 在副作用函數(shù)
effect中使用了bol，并且調(diào)用了渲染器將vnode渲染到了id為app的節(jié)點(diǎn)上 - vnode中父節(jié)點(diǎn)的事件
onClick的存在與否取決于bol的值，若為true則父元素的onClick事件才會(huì)掛載。 首次渲染時(shí)由于bol為false，所以vnode中的父節(jié)點(diǎn)并不會(huì)被綁定一個(gè)onClick事件
當(dāng)點(diǎn)擊了渲染處理的p元素，即vnode的子節(jié)點(diǎn)時(shí)，會(huì)出現(xiàn)父元素的click事件也會(huì)被選擇的情況，其過程如下：
- 點(diǎn)擊了
p元素，bol被修改，副作用函數(shù)重新執(zhí)行 - 父元素div的props中
onClick事件掛載 - 對(duì)p的點(diǎn)擊事件冒泡到了父元素
div上，導(dǎo)致觸發(fā)了其上的onClick事件
其流程如下:
為了解決這個(gè)問題: 對(duì)patchProps進(jìn)行處理：屏蔽所有綁定時(shí)間晚于事件觸發(fā)時(shí)間的事件處理函數(shù)的執(zhí)行
patchProps(el, key, prevValue, nextValue) {
if (/^on/.test(key)) {
const invokers = el._vei || (el._vei = {})
let invoker = invokers[key]
const name = key.slice(2).toLowerCase()
if (nextValue) {
if (!invoker) {
invoker = el._vei[key] = (e) => {
if (e.timeStamp < invoker.attached) return
if (Array.isArray(invoker.value)) {
invoker.value.forEach(fn => fn(e))
} else {
invoker.value(e)
}
}
invoker.value = nextValue
invoker.attached = performance.now()
el.addEventListener(name, invoker)
} else {
invoker.value = nextValue
}
} else if (invoker) {
el.removeEventListener(name, invoker)
}
} else if (key === 'class') {
el.className = nextValue || ''
} else if (shouldSetAsProps(el, key, nextValue)) {
const type = typeof el[key]
if (type === 'boolean' && nextValue === '') {
el[key] = true
} else {
el[key] = nextValue
}
} else {
el.setAttribute(key, nextValue)
}
}
修改后的代碼如上: 我們?cè)趇nvoker上添加一個(gè)屬性attached用于記錄事件處理函數(shù)被掛載的時(shí)間，在事件處理函數(shù)invoke.value被執(zhí)行前進(jìn)行判斷，如果事件處理函數(shù)被綁定的時(shí)間invoke.attached晚于事件觸發(fā)的事件e.timeStamp時(shí)，則取消副作用函數(shù)的執(zhí)行。
九、子節(jié)點(diǎn)的更新
在處理完了節(jié)點(diǎn)的事件掛載之后，我們需要處理子節(jié)點(diǎn)的更新 在文章開始我們討論了子節(jié)點(diǎn)vnode.children的類型主要有以下三種:null、string(文本節(jié)點(diǎn))、Array(一個(gè)或者多個(gè)節(jié)點(diǎn)) 通過分析可知： 在子節(jié)點(diǎn)的更新過程中，新舊節(jié)點(diǎn)都有三種類型，這樣總共會(huì)有九種情況,但是并不是每一種情況都要特殊處理,只需要考慮如下情況：
1.當(dāng)新節(jié)點(diǎn)的類型是一個(gè)文本節(jié)點(diǎn)的情況下
- 舊子節(jié)點(diǎn)為null或者文本節(jié)點(diǎn)時(shí)，直接將新節(jié)點(diǎn)的文本內(nèi)容更新上去即可；
- 舊子節(jié)點(diǎn)是一組節(jié)點(diǎn)時(shí)，需要遍歷這一組節(jié)點(diǎn)并使用unmount函數(shù)卸載；
2.當(dāng)新節(jié)點(diǎn)的類型是一組節(jié)點(diǎn)的情況下
- 舊子節(jié)點(diǎn)為null或者文本節(jié)點(diǎn)時(shí)，直接將舊節(jié)點(diǎn)內(nèi)容清空并逐一掛載新節(jié)點(diǎn)即可；
- 舊子節(jié)點(diǎn)是一組節(jié)點(diǎn)時(shí)，需要遍歷舊節(jié)點(diǎn)并使用unmount函數(shù)逐一卸載，并逐一掛載新的節(jié)點(diǎn)；（在實(shí)際處理過程中性能不佳，所以Vue使用了diff算法去處理這種情況下的更新）
3.當(dāng)新子節(jié)點(diǎn)不存在:
- 舊子節(jié)點(diǎn)也不存在，則無需處理；
- 舊子節(jié)點(diǎn)是一組子節(jié)點(diǎn)，則需要逐個(gè)卸載；
- 舊子節(jié)點(diǎn)是文本子節(jié)點(diǎn)，則清空文本內(nèi)容；
根據(jù)以上三種情況，我們將patchChildren函數(shù)進(jìn)行更新
function patchChildren(n1, n2, container) {
//新子節(jié)點(diǎn)是文本節(jié)點(diǎn)
if (typeof n2.children === 'string') {
if (Array.isArray(n1.children)) {
n1.children.forEach((c) => unmount(c))
}
setElementText(container, n2.children)
//新子節(jié)點(diǎn)是一組節(jié)點(diǎn)
} else if (Array.isArray(n2.children)) {
if (Array.isArray(n1.children)) {
n1.children.forEach(c => unmount(c))
n2.children.forEach(c => patch(null, c, container))
} else {
setElementText(container, '')
n2.children.forEach(c => patch(null, c, container))
}
//新子節(jié)點(diǎn)不存在
} else {
if (Array.isArray(n1.children)) {
n1.children.forEach(c => unmount(c))
} else if (typeof n1.children === 'string') {
setElementText(container, '')
}
}
}
十、如何描述沒有標(biāo)簽的節(jié)點(diǎn)：文本和注釋節(jié)點(diǎn)
在先前的實(shí)現(xiàn)中vnode的節(jié)點(diǎn)類型type是一個(gè)字符串，根據(jù)其類型我們可以判斷標(biāo)簽名稱，但是沒有標(biāo)簽名稱的節(jié)點(diǎn)需要如何處理呢，比如下面的節(jié)點(diǎn)？
<div>
<!-- 注釋節(jié)點(diǎn) -->
我是文本節(jié)點(diǎn)
</div>
1.如何使用vnode描述
為了表示沒有標(biāo)簽名稱的節(jié)點(diǎn)，我們需要使用Symbol數(shù)據(jù)類型去作為vnode.type的值，這樣就可以確保其唯一性。
這樣我們用于描述文本節(jié)點(diǎn)的vnode如下：
const Text = Symbol()
const newVnode = {
type: Text,
children: '文本節(jié)點(diǎn)內(nèi)容'
}
用于描述注釋節(jié)點(diǎn)的vnode如下:
const Comment = Symbol()
const newVnode = {
type: Comment,
children: '注釋節(jié)點(diǎn)內(nèi)容'
}
2.如何渲染
假設(shè)我們需要調(diào)整patch函數(shù)去適應(yīng)如上vnode文本節(jié)點(diǎn)的渲染：
function patch(n1, n2, container) {
if (n1 && n1.type !== n2.type) {
unmount(n1)
n1 = null
}
const { type } = n2
if (typeof type === 'string') {
if (!n1) {
mountElement(n2, container)
} else {
patchElement(n1, n2)
}
} else if (type === Text) {
if (!n1) {
// 使用 createTextNode 創(chuàng)建文本節(jié)點(diǎn)
const el = n2.el = document.createTextNode(n2.children)
// 將文本節(jié)點(diǎn)插入到容器中
insert(el, container)
} else {
// 如果舊 vnode 存在，只需要使用新文本節(jié)點(diǎn)的文本內(nèi)容更新舊文本節(jié)點(diǎn)即可
const el = n2.el = n1.el
if (n2.children !== n1.children) {
el.nodeValue = n2.children
}
}
}
增加了一個(gè)對(duì)type類型的判斷，如果類型是Text證明是文本節(jié)點(diǎn)，則判斷舊節(jié)點(diǎn)上是否存在，如果舊節(jié)點(diǎn)存在只需要更新文本內(nèi)容即可，否則需要先創(chuàng)建文本節(jié)點(diǎn)，再將其插入到容器中。
3.優(yōu)化渲染器的通用性
以上實(shí)現(xiàn)的代碼中仍舊依賴了瀏覽器的API：createTextNode和el.nodeValue，為了保證渲染器的通用性，需要將這部分功能提取成為獨(dú)立的函數(shù)，并且作為用于創(chuàng)建渲染器的函數(shù)createRenderer的參數(shù)傳入：
function patch(n1, n2, container) {
if (n1 && n1.type !== n2.type) {
unmount(n1)
n1 = null
}
const { type } = n2
if (typeof type === 'string') {
if (!n1) {
mountElement(n2, container)
} else {
patchElement(n1, n2)
}
} else if (type === Text) {
if (!n1) {
// 使用 createTextNode 創(chuàng)建文本節(jié)點(diǎn)
const el = n2.el = createText(n2.children)
// 將文本節(jié)點(diǎn)插入到容器中
insert(el, container)
} else {
const el = n2.el = n1.el
if (n2.children !== n1.children) {
// 調(diào)用 setText 函數(shù)更新文本節(jié)點(diǎn)的內(nèi)容
setText(el, n2.children)
}
}
}
我們將依賴到瀏覽器API的createTextNode和el.nodeValue分別放到了createText和setText兩個(gè)函數(shù)內(nèi)，并在創(chuàng)建渲染器的函數(shù)createRenderer中作為參數(shù)傳入并使用:
function createRenderer(options) {
const {
createElement,
insert,
setElementText,
patchProps,
createText,
setText
} = options
省略內(nèi)容
}
const renderer = createRenderer({
createElement(tag) {
...
},
setElementText(el, text) {
...
},
insert(el, parent, anchor = null) {
...
},
createText(text) {
return document.createTextNode(text)
},
setText(el, text) {
el.nodeValue = text
},
patchProps(el, key, prevValue, nextValue) {
...
}
})
這樣對(duì)于文本節(jié)點(diǎn)的操作，不再僅依賴于瀏覽器的API我們可以通過改變createRenderer的options參數(shù)對(duì)象里面的createText和setText方法靈活選擇。
以上就是Vue渲染器如何對(duì)節(jié)點(diǎn)進(jìn)行掛載和更新的詳細(xì)內(nèi)容，更多關(guān)于Vue節(jié)點(diǎn)掛載和更新的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要介紹了vue?組件異步加載方式(按需加載)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
elementui之el-tebs瀏覽器卡死的問題和使用報(bào)錯(cuò)未注冊(cè)問題
這篇文章主要介紹了elementui之el-tebs瀏覽器卡死的問題和使用報(bào)錯(cuò)未注冊(cè)問題2019-07-07
Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例
為了防止有人惡意使用腳本進(jìn)行批量操作,會(huì)設(shè)置圖片滑動(dòng)驗(yàn)證，本文就介紹了Vue.js圖片滑動(dòng)驗(yàn)證的實(shí)現(xiàn)示例，感興趣的可以了解一下2023-05-05
vue的路由守衛(wèi)和keep-alive后生命周期詳解
這篇文章主要為大家詳細(xì)介紹了vue路由守衛(wèi)和keep-alive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
vue實(shí)現(xiàn)商品列表的無限加載思路和步驟詳解
這篇文章主要介紹了vue實(shí)現(xiàn)商品列表的無限加載思路和步驟詳解,基礎(chǔ)思路是觸底條件滿足之后 page++,拉取下一頁數(shù)據(jù),結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下,2024-06-06
Vue $router.push打開新窗口的實(shí)現(xiàn)方法
在Vue中,$router.push方法默認(rèn)不支持在新窗口中打開頁面,但通過結(jié)合window.open方法和$router.resolve方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-09-09
在瀏覽器console中如何調(diào)用vue內(nèi)部方法
這篇文章主要介紹了在瀏覽器console中如何調(diào)用vue內(nèi)部方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問題
今天小編就為大家分享一篇解決Vue使用swiper動(dòng)態(tài)加載數(shù)據(jù),動(dòng)態(tài)輪播數(shù)據(jù)顯示白屏的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue開發(fā)配置tsconfig.json文件的實(shí)現(xiàn)
tsconfig.json文件中指定了用來編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng),本文就來介紹一下Vue開發(fā)配置tsconfig.json文件的實(shí)現(xiàn),感興趣的可以了解一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js組件通信之自定義事件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-10-10