Vue渲染器如何對節(jié)點進行掛載和更新
一、子節(jié)點和元素的屬性
先前我們討論了一個簡單的渲染器是如何實現的 一文詳解Vue中渲染器的簡單實現_vue.js_腳本之家 (jb51.net) 但是實際上還有一些問題需要完善：
- 子節(jié)點不一定只是一個文本節(jié)點,實際上其可能會是多個不同的節(jié)點。
- 我們并沒有對被掛載的元素的屬性進行處理。
1.如何處理子節(jié)點為多個節(jié)點的情況：
處理vnode的數據結構以正確描述多個節(jié)點的情況
我們可以將vnode的children定義為一個數組，數組的每一項也是一個vnode，這樣就可以去正確的描述其結構。
const vnode = {
type: 'div',
children: [
{
type: 'p',
children: 'hello'
}
]
}
如上代碼所示其描述的子節(jié)點為一個<p>hello</p>,在數組中也可繼續(xù)去添加別的不同類型的vnode，這樣便形成了一種樹形結構虛擬DOM樹，可以更好的去描述真實DOM的情況。
調整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的類型做了一個判斷，當其為數組類型時表示子節(jié)點有多個，通過遍歷調用patch來進行掛載
2.如何處理被掛載元素的屬性：
####如何修改vnode去描述元素屬性：
給vnode添加props字段，其類型是一個對象，對象的鍵是屬性名，值是屬性值，
const vnode = {
type: 'div',
props: {
id: 'foo'
},
children: [
{
type: 'p',
children: 'hello'
}
]
}
調整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)
}
增加一個對props的判斷，對其進行遍歷，獲取到props對象的鍵和值，并使用setAttribute函數將屬性應用到el上。 除此之外還可以直接在DOM對象上直接進行元素屬性的設置：
if (vnode.props) {
for (const key in vnode.props) {
// 直接設置
el[key] = vnode.props[key]
}
}
以上兩種設置方法都有一定的局限性，所以我們需要在不同情況下靈活進行使用，接下來我們將討論其區(qū)別，從而明確其使用時機。
二、HTML Attributes 與 DOM Properties 的區(qū)別
假設有一個如下元素:
<input id="my-input" type="text" value="foo" />
對于此元素而言:
- HTML Attributes是：
id="my-input"、type="text"、value="foo"等 - DOM Properties是：瀏覽器解析元素的HTML后生成的一個DOM對象，假設以上元素對應的DOM對象為
el，則對應DOM Properties分別是el.id，el.type,el.value.
區(qū)別
二者名稱不一定相同，比如
<div class="foo"></div>
對于上面的元素：class="foo" 對應的 DOM Properties 是 el.className
二者也不是一一對應的， 有些HTML Attributes沒有對應的DOM Properties反之亦然 關鍵的一點在于：
HTML Attributes 的作用是設置與之對應的 DOM Pr operties 的初始值 對于input標簽的value屬性而言，如果沒有修改input值得情況下，el.value讀取得到值是foo,但是當文本框被輸入之后，此時再使用el.value去獲取值時得到得值就是新輸入得值，但是使用el.getAttribute('value')得到得值仍是foo，即HTML Attributes存儲的是元素的初始值
三、完善元素屬性的設置
當元素在正常的HTML文件中時，瀏覽器會自動分析 HTML Attributes 并設置對應的 DOM Properties，但是在Vue中，模板有時并不會被解析并設置對應關系。
1.對于屬性值為布爾類型節(jié)點的處理
有如下元素:
<button disabled>Button</button>
在HTML中其會被解析的結果是button有一個disabled的HTML Attributes，對應的DOM Properties(el.disabled)的值設為true，按鈕為禁止狀態(tài)。 在Vue中該HTML對應如下vnode節(jié)點:
const button = {
type: 'button',
props: {
disabled: ''
}
}
在渲染器中調用setAttribute設置disabled HTML Attributes時會起作用，按鈕會被禁用
el.setAttribute('disabled', '')
但在vue的模板中會存在屬性是變量的情況，如下
<button :disabled="false">Button</button>
此時渲染器渲染時使用的vnode是
const button = {
type: 'button',
props: {
disabled: false
}
}
此時調用setAttribute設置disabled
el.setAttribute('disabled', false)
由于通過setAttribute設置的屬性會字符串化即變成如下情況
el.setAttribute('disabled', 'false')
由于el.disable為布爾類型的值，當設置為'false'時，其實就是true，即禁用按鈕，這顯然不符合期望。 我們可以通過DOM Properties設置即el.disabled = false。 通過DOM Properties設置可以解決當前的問題，但是如果屬性值對于一開始的情況
<button disabled>Button</button>
又會存在問題，對于vnode
const button = {
type: 'button',
props: {
disabled: ''
}
}
使用DOM Properties設置
el.disabled = ''
由于el.disable為布爾類型的值，當設置為''時，其實就是false，即不禁用按鈕，這也不符合期望。
很顯然我們在對元素屬性進行設置時需要對特殊的情況進行處理，而不是單一的使用setAttribute設置HTML Attributes或者設置DOM Properties，從而正確設置屬性： 具體的解決方法是: 優(yōu)先設置元素的 DOM Properties，但當值為空字符串時，要手動將值矯正為 true 因此對mountElement函數做優(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 {
// 如果要設置的屬性沒有對應的 DOM Properties，則使用 setAttribute 函數設置屬性
el.setAttribute(key, vnode.props[key])
}
}
}
insert(el, container)
}
在設置vnode的props時，首先確認是否存在DOM Properties，存在則優(yōu)先使用，而當遇到屬性值為空字符串時，將值變?yōu)閠rue，若DOM Properties不存在使用setAttribute設置。
2.只讀DOM Properties處理
有一些元素的DOM 是只讀的，比如
<form id="form1"></form> <input form="form1" />
input的el.form屬性是只讀的，此時我們只能使用setAttribute去設置它，需要對mountElement再次完善，增加一個shouldSetAsProps函數用于判斷屬性是否可以使用DOM Properties來設置否則使用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)
}
實際上類似form屬性的情況很多，在類似的情況下也需要使用和處理form屬性相似的邏輯進行優(yōu)化
3.將渲染器處理為與平臺無關
同樣的為了不把渲染器限定在瀏覽器平臺，需要將設置屬性的邏輯也作為配置項處理
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函數作為配置項傳入，并在mountElement中處理vnode.props時使用，這樣就可以將邏輯抽離出去。
四、處理class
Vue中對class做了處理，有多種方式可以設置class
1.字符串
<p class="foo bar"></p>
2.對象
<p :class="{ foo: true, bar: false }"></p>
3.數組：可以組合以上兩種類型
<p :class="[ 'foo bar', { baz: true } ]"></p>
當class為字符串時，直接使用el.className進行設置即可，但是其余兩種情況需要處理，在Vue中其使用normalizeClass去處理，主要的邏輯就是遍歷數組和對象，然后使用+=逐步將數組中的class項和對象中值為true的項的鍵累加，變?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é)點的卸載：
在之前實現的渲染器中，卸載是直接使用innerHTML將容器的內容清空，這可以達到效果，但是卻不太完善，因為在實際情況下：
- 如果容器的內容由組件渲染的，則當其被卸載時需要觸發(fā)組件的beforeUnmount等鉤子函數。
- 如果元素存在自定義指令，自定義指令中同時存在卸載時需要觸發(fā)的鉤子函數。
- 直接使用innerHTML將容器的內容清空，元素上的事件不會被清空
為了解決以上問題，我們使用如下方式去卸載節(jié)點
根據 vnode 對象獲取與其相關聯(lián)的真實 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)
}
調整mountElement，在創(chuàng)建真實DOM元素的時候，將創(chuàng)建的元素賦值給vnode.el,這樣就能通過vnode.el取得并操作真實DOM。當需要卸載時首先使用vnode.el.parentNode拿到vnode對應的真實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
}
為方便復用以及后續(xù)對組件的生命周期鉤子和自定義指令鉤子的調用，我們將卸載的邏輯封裝在unmount函數中。
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
}
六、對于patch函數的優(yōu)化
1.新舊節(jié)點不一樣時是否一定要使用patch打補丁呢？
在之前實現的渲染器中，我們使用patch對于節(jié)點處理邏輯如下:
function patch(n1, n2, container) {
if (!n1) {
mountElement(n2, container)
} else {
// 更新
}
}
如果新舊節(jié)點均存在則意味著需要打補丁去更新其中的內容。但是考慮一種情況，當新舊節(jié)點的類型不同時，打補丁是沒有意義的，因為類型的變化會導致節(jié)點屬性的不同，比如vnode的類型(type)從'p'變?yōu)?code>'input',在這種情況下我們應該做的是卸載舊的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é)點存在并且新舊節(jié)點類型不同則調用unmount卸載舊節(jié)點，并將其值置為null，以便后續(xù)去判斷是要執(zhí)行掛載還是打補丁操作。若新舊節(jié)點類型相同則則使用patch去通過打補丁的方式更新。
2.vnode如果描述的是一個組件的話如何去處理掛載和打補丁呢？
在節(jié)點是一個組件的情況下，vnode的type會是一個對象，我們通過判斷vnode的type是否為對象從而執(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é)點掛載事件：
1.在vnode節(jié)點中如何描述事件：
在vnode的props對象中，凡是以on開頭的屬性都被定義為事件：
const vnode = {
type: 'p',
props: {
onClick: () => {
alert('clicked 1')
}
},
children: 'text'
}
如上所示我們給一個類型為'p'的vnode描述了一個onCLick事件
2.如何將描述有事件的vnode節(jié)點掛載
我們先前使用patchProps去掛載vnode的props，為了能夠支持事件的掛載需要對其進行一定的修改
patchProps(el, key, preValue, nextValue) {
if (/^on/.test(key)) {
const name = key.slice(2).toLowerCase()
// 移除上一次綁定的事件處理函數prevValue
prevValue && el.removeEventListener(name, prevValue)
// 綁定新的事件處理函數
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，首先判斷是否已經掛載了一個同名的事件處理函數，有的話就先移除，然后再使用addEventListener掛載新的事件處理函數。
3.事件處理函數頻繁更新時如何優(yōu)化性能？
優(yōu)化思路
我們可以將事件處理函數固定并命名為invoker，并將實際的事件處理函數賦值給invoker.value。這樣在掛載的時候我們掛載的是invoker，并invoker內部執(zhí)行真正的事件處理函數invoker.value，這樣當需要更新事件處理函數時我們直接替換invoker.value的值即可，而不用使用removeEventListener去移除。為了能夠在事件處理函數更新時判斷有沒有設置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)
}
}
一個vnode上同時存在多個事件應該如何處理 在之前的實現中我們直接將el._vei賦值給invoker，這樣無法去處理vnode上的多個事件，如果像下面這樣定義了多個事件，會導致后面的事件覆蓋之前的事件
const newVnode = {
type: 'p',
props: {
onClick: () => {
alert('click')
},
onContextmenu: () => {
alert('contextmenu')
}
},
children: 'text'
}
解決方式是：將patchProps中的 el._vei定義為一個對象，將事件名稱作為其鍵，值則是該事件對應的事件處理函數
patchProps(el, key, prevValue, nextValue) {
if (/^on/.test(key)) {
const invokers = el._vei || (el._vei = {})
//根據事件名稱獲取 invoker
let invoker = invokers[key]
const name = key.slice(2).toLowerCase()
if (nextValue) {
if (!invoker) {
// 將事件處理函數緩存到 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)
}
}
一個事件需要多個事件處理函數執(zhí)行應該如何處理 當同一個事件存在多個事件處理函數，比如同時存在兩個click的事件處理函數
const vnode = {
type: 'p',
props: {
onClick: [
() => {
alert('clicked 1')
},
() => {
alert('clicked 2')
}
]
},
children: 'text'
}
此時我們需要對 el._vei[key]增加一層判斷，時數組的情況下，需要遍歷去調用其中的事件處理函數
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 (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)
}
}
八、事件冒泡處理
當vnode的父子節(jié)點的事件之間有關聯(liá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'))
})
看一下以上代碼:
- 定義了一個響應式數據
bol，初始值為false - 在副作用函數
effect中使用了bol，并且調用了渲染器將vnode渲染到了id為app的節(jié)點上 - vnode中父節(jié)點的事件
onClick的存在與否取決于bol的值，若為true則父元素的onClick事件才會掛載。 首次渲染時由于bol為false，所以vnode中的父節(jié)點并不會被綁定一個onClick事件
當點擊了渲染處理的p元素，即vnode的子節(jié)點時，會出現父元素的click事件也會被選擇的情況，其過程如下：
- 點擊了
p元素，bol被修改，副作用函數重新執(zhí)行 - 父元素div的props中
onClick事件掛載 - 對p的點擊事件冒泡到了父元素
div上，導致觸發(fā)了其上的onClick事件
其流程如下:
為了解決這個問題: 對patchProps進行處理：屏蔽所有綁定時間晚于事件觸發(fā)時間的事件處理函數的執(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)
}
}
修改后的代碼如上: 我們在invoker上添加一個屬性attached用于記錄事件處理函數被掛載的時間，在事件處理函數invoke.value被執(zhí)行前進行判斷，如果事件處理函數被綁定的時間invoke.attached晚于事件觸發(fā)的事件e.timeStamp時，則取消副作用函數的執(zhí)行。
九、子節(jié)點的更新
在處理完了節(jié)點的事件掛載之后，我們需要處理子節(jié)點的更新 在文章開始我們討論了子節(jié)點vnode.children的類型主要有以下三種:null、string(文本節(jié)點)、Array(一個或者多個節(jié)點) 通過分析可知： 在子節(jié)點的更新過程中，新舊節(jié)點都有三種類型，這樣總共會有九種情況,但是并不是每一種情況都要特殊處理,只需要考慮如下情況：
1.當新節(jié)點的類型是一個文本節(jié)點的情況下
- 舊子節(jié)點為null或者文本節(jié)點時，直接將新節(jié)點的文本內容更新上去即可；
- 舊子節(jié)點是一組節(jié)點時，需要遍歷這一組節(jié)點并使用unmount函數卸載；
2.當新節(jié)點的類型是一組節(jié)點的情況下
- 舊子節(jié)點為null或者文本節(jié)點時，直接將舊節(jié)點內容清空并逐一掛載新節(jié)點即可；
- 舊子節(jié)點是一組節(jié)點時，需要遍歷舊節(jié)點并使用unmount函數逐一卸載，并逐一掛載新的節(jié)點；（在實際處理過程中性能不佳，所以Vue使用了diff算法去處理這種情況下的更新）
3.當新子節(jié)點不存在:
- 舊子節(jié)點也不存在，則無需處理；
- 舊子節(jié)點是一組子節(jié)點，則需要逐個卸載；
- 舊子節(jié)點是文本子節(jié)點，則清空文本內容；
根據以上三種情況，我們將patchChildren函數進行更新
function patchChildren(n1, n2, container) {
//新子節(jié)點是文本節(jié)點
if (typeof n2.children === 'string') {
if (Array.isArray(n1.children)) {
n1.children.forEach((c) => unmount(c))
}
setElementText(container, n2.children)
//新子節(jié)點是一組節(jié)點
} 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é)點不存在
} else {
if (Array.isArray(n1.children)) {
n1.children.forEach(c => unmount(c))
} else if (typeof n1.children === 'string') {
setElementText(container, '')
}
}
}
十、如何描述沒有標簽的節(jié)點：文本和注釋節(jié)點
在先前的實現中vnode的節(jié)點類型type是一個字符串，根據其類型我們可以判斷標簽名稱，但是沒有標簽名稱的節(jié)點需要如何處理呢，比如下面的節(jié)點？
<div>
<!-- 注釋節(jié)點 -->
我是文本節(jié)點
</div>
1.如何使用vnode描述
為了表示沒有標簽名稱的節(jié)點，我們需要使用Symbol數據類型去作為vnode.type的值，這樣就可以確保其唯一性。
這樣我們用于描述文本節(jié)點的vnode如下：
const Text = Symbol()
const newVnode = {
type: Text,
children: '文本節(jié)點內容'
}
用于描述注釋節(jié)點的vnode如下:
const Comment = Symbol()
const newVnode = {
type: Comment,
children: '注釋節(jié)點內容'
}
2.如何渲染
假設我們需要調整patch函數去適應如上vnode文本節(jié)點的渲染：
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é)點
const el = n2.el = document.createTextNode(n2.children)
// 將文本節(jié)點插入到容器中
insert(el, container)
} else {
// 如果舊 vnode 存在，只需要使用新文本節(jié)點的文本內容更新舊文本節(jié)點即可
const el = n2.el = n1.el
if (n2.children !== n1.children) {
el.nodeValue = n2.children
}
}
}
增加了一個對type類型的判斷，如果類型是Text證明是文本節(jié)點，則判斷舊節(jié)點上是否存在，如果舊節(jié)點存在只需要更新文本內容即可，否則需要先創(chuàng)建文本節(jié)點，再將其插入到容器中。
3.優(yōu)化渲染器的通用性
以上實現的代碼中仍舊依賴了瀏覽器的API：createTextNode和el.nodeValue，為了保證渲染器的通用性，需要將這部分功能提取成為獨立的函數，并且作為用于創(chuàng)建渲染器的函數createRenderer的參數傳入：
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é)點
const el = n2.el = createText(n2.children)
// 將文本節(jié)點插入到容器中
insert(el, container)
} else {
const el = n2.el = n1.el
if (n2.children !== n1.children) {
// 調用 setText 函數更新文本節(jié)點的內容
setText(el, n2.children)
}
}
}
我們將依賴到瀏覽器API的createTextNode和el.nodeValue分別放到了createText和setText兩個函數內，并在創(chuàng)建渲染器的函數createRenderer中作為參數傳入并使用:
function createRenderer(options) {
const {
createElement,
insert,
setElementText,
patchProps,
createText,
setText
} = options
省略內容
}
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) {
...
}
})
這樣對于文本節(jié)點的操作，不再僅依賴于瀏覽器的API我們可以通過改變createRenderer的options參數對象里面的createText和setText方法靈活選擇。
以上就是Vue渲染器如何對節(jié)點進行掛載和更新的詳細內容，更多關于Vue節(jié)點掛載和更新的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue如何給組件添加點擊事件?@click.native，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了Vue中的baseurl如何配置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
解決Vue項目打包后打開index.html頁面顯示空白以及圖片路徑錯誤的問題
這篇文章主要介紹了解決Vue項目打包后打開index.html頁面顯示空白以及圖片路徑錯誤的問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
本文給大家介紹Vue3中setup()函數中聲明變量的幾種方法,希望本文能夠幫助你更好地理解Vue3的開發(fā)方式,感興趣的朋友跟隨小編一起看看吧2023-11-11
vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421
這篇文章主要介紹了vue依賴包報錯問題eslint\lib\cli-engine\cli-engine.js:421,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue是當前很火的一款MVVM的輕量級框架，它是以數據驅動和組件化的思想構建的。因為它提供了簡潔易于理解的api，使得我們很容易上手。這篇文章給大家介紹了vue雙向數據綁定問題，感興趣的朋友一起看看吧2017-10-10
這篇文章主要為大家詳細介紹了Vue中keep-alive組件的作用，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-02-02
這篇文章主要介紹了Vue學習之常用指令,結合實例形式詳細分析了vue.js創(chuàng)建實例、常用指令及相關操作技巧,需要的朋友可以參考下2020-01-01
這篇文章主要為大家詳細介紹了vue使用swiper實現左右滑動切換圖片，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
雙向數據綁定原理主要運用了發(fā)布訂閱模式來實現的，通過Object.defineProperty對數據劫持，觸發(fā)getter，setter方法，這篇文章主要介紹了vue2.x雙向數據綁定原理,需要的朋友可以參考下2023-02-02