詳解Vue如何手寫虛擬dom并進行渲染

更新時間：2024年03月11日 14:49:26 作者：不要止步于此

這篇文章主要為大家詳細介紹了渲染器的工作原理,以及如何將真實dom或者組件用虛擬dom的形式進行描述并渲染,感興趣的小伙伴可以跟隨小編一起學習一下

虛擬dom如何渲染為真實dom

虛擬dom轉換為真實dom其實就是編寫一個渲染函數，將虛擬dom逐個創(chuàng)建為真實的dom元素并將對應事件添加到當前創(chuàng)建的元素上，再掛載到頁面的指定元素下。

認識虛擬dom

虛擬dom其實就是用來描述真實dom的javascript對象。

來看下面例子，把一個真實dom用虛擬dom來進行描述：

真實dom

<div onclick="onAlert()"><span>點擊我</span><span></span></div>
<script>
    function onAlert() {
      alert('點擊事件回調函數')
    }
</script>

轉換為虛擬dom

const vnode = {
  tag: 'div',
  props: {
    onClick: () => alert('點擊事件回調函數')
  },
  children: [
    {
      tag: 'span',
      children: '點擊我'
    },
    {
      tag: 'span',
    }
  ]
}

渲染器實現

/**
 * @param {object} vnode 虛擬dom對象
 * @param {HTMLElement} container 掛載虛擬dom的真實dom容器
 */
function renderer(vnode, container) {
  const { tag, props, children } = vnode
  const el = document.createElement(tag)
  for(const key in props) {
    if(/^on/.test(key)) {
      // 轉換為合法的監(jiān)聽事件名稱
      const eventNmae = key.substring(2).toLowerCase()
      // 在當前創(chuàng)建的el元素上掛載監(jiān)聽事件
      el.addEventListener(eventNmae, props[key])
    }
  }

  if(typeof children === 'string') {
    // 創(chuàng)建一個文本節(jié)點添加到el元素下
    el.appendChild(document.createTextNode(children))
  } else if(Array.isArray(children)) {
    // 子節(jié)點為數組，遞歸調用renderer函數
    children.forEach(vnode => renderer(vnode, el))
  }
  console.log(container)
  // 將元素掛載到容器上
  container.appendChild(el)
}

現在將上面轉換的虛擬dom傳入函數執(zhí)行看下效果

// 把虛擬dom渲染到id為app的元素下
renderer(vnode, document.getElementById('app'))

下圖可看到虛擬dom已經成功渲染為真實dom，并且點擊事件也成功觸發(fā)了！

虛擬dom描述組件

以上講了如何使用虛擬dom(vnode)描述真實dom，但還不夠！如果我們封裝了一個組件，又該如何使用虛擬dom進行描述呢？

總的來說，組件就是一組dom元素的封裝，這組dom元素就是組件要渲染的內容，比如前面例子的vnode對象就可以認為是一個組件。

方法組件

const MyComponent = function () {
  return {
    tag: 'div',
    props: {
      onClick: () => alert('MyComponent點擊事件回調函數')
    },
    children: [
      {
        tag: 'span',
        children: 'MyComponent'
      },
      {
        tag: 'span',
      }
    ]
  }
}

對象組件

const MyComponent2 = {
  render() {
    return {
      tag: 'div',
      props: {
        onClick: () => alert('MyComponent2點擊事件回調函數')
      },
      children: [
        {
          tag: 'span',
          children: 'MyComponent2'
        },
        {
          tag: 'span',
        }
      ]
    }
  }
}

修改渲染器支持組件渲染

/**
 * @param {object} vnode 虛擬dom對象
 * @param {HTMLElement} container 掛載虛擬dom的真實dom容器
 */
function renderer(vnode, container) {
  const { tag } = vnode
  if(typeof tag === 'string') {
    mountElement(vnode, container)
  } else if(typeof tag === 'function') {
    mountComponent(tag(), container)
  } else if(typeof tag === 'object') {
    mountComponent(tag.render(), container)
  }
}

function mountElement(vnode, container) {
  const { tag, props, children } = vnode
  const el = document.createElement(tag)
  for(const key in props) {
    if(/^on/.test(key)) {
      // 轉換為合法的監(jiān)聽事件名稱
      const eventNmae = key.substring(2).toLowerCase()
      // 在當前創(chuàng)建的el元素上掛載監(jiān)聽事件
      el.addEventListener(eventNmae, props[key])
    }
  }

  if(typeof children === 'string') {
    // 創(chuàng)建一個文本節(jié)點添加到el元素下
    el.appendChild(document.createTextNode(children))
  } else if(Array.isArray(children)) {
    // 子節(jié)點為數組，遞歸調用renderer函數
    children.forEach(vnode => renderer(vnode, el))
  }
  console.log(container)
  // 將元素掛載到容器上
  container.appendChild(el)
}

function mountComponent(vnode, container) {
  // 遞歸調用renderer
  renderer(vnode, container)
}

渲染組件

const vnode = {
  tag: 'div',
  children: [
    {
      tag: 'span',
      props: {
        onClick: () => alert('span點擊事件回調函數')
      },
      children: '我是span標簽'
    },
    // 組件
    {
      tag: MyComponent,
    },
    // 組件
    {
      tag: MyComponent2,
    }
  ]
}

// 把虛擬dom渲染到id為app的元素下
renderer(vnode, document.getElementById('app'))

下圖可看到，對應的組件及事件都已經掛載成功！