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

Vue渲染器如何對(duì)節(jié)點(diǎn)進(jìn)行掛載和更新

 更新時(shí)間：2024年05月13日 09:35:44   作者：Lumen丶  
這篇文章主要介紹了Vue 的渲染器是如何對(duì)節(jié)點(diǎn)進(jìn)行掛載和更新的,文中通過代碼示例給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下

一、子節(jié)點(diǎn)和元素的屬性

先前我們討論了一個(gè)簡單的渲染器是如何實(shí)現(xiàn)的 一文詳解Vue中渲染器的簡單實(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)文章

最新評(píng)論