手写vue将虚拟 Dom 转化为真实 Dom

最新推荐文章于 2024-06-01 16:31:18 发布

豆华

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量548

点赞数 9

分类专栏： js手写汇总 vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/Dou_Hua6/article/details/136746817

版权

js手写汇总同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

vue

3 篇文章 0 订阅

订阅专栏

vue将虚拟 Dom 转化为真实 Dom

{
  tag: 'DIV',
  attrs:{
  id:'app'
  },
  children: [
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] }
      ]
    },
    {
      tag: 'SPAN',
      children: [
        { tag: 'A', children: [] },
        { tag: 'A', children: [] }
      ]
    }
  ]
}

把上面虚拟Dom转化成下方真实Dom

<div id="app">
  <span>
    <a></a>
  </span>
  <span>
    <a></a>
    <a></a>
  </span>
</div>

实现

// 真正的渲染函数
function _render(vnode) {
  // 如果是数字类型转化为字符串
  if (typeof vnode === "number") {
    vnode = String(vnode);
  }
  // 字符串类型直接就是文本节点
  if (typeof vnode === "string") {
    return document.createTextNode(vnode);
  }
  // 普通DOM
  const dom = document.createElement(vnode.tag);
  if (vnode.attrs) {
    // 遍历属性
    Object.keys(vnode.attrs).forEach((key) => {
      const value = vnode.attrs[key];
      dom.setAttribute(key, value);
    });
  }
  // 子数组进行递归操作
  vnode.children.forEach((child) => dom.appendChild(_render(child)));
  return dom;
}