两种方法实现vue的虚拟DOM

虚拟DOM的优势

• 首先是可以对真实的元素节点进行抽象，抽象成VNode（虚拟节点），这样方便后续对其进行各种操作
  • 因为对于直接操作DOM来说是有很多的限制的，js每操作一次操作DOM，会使DOM进行重排或者重绘，每次操作都会消耗大量资源 ，比如diff、clone等等，但是使用JavaScript编程语言来操作这
    些，就变得非常的简单
  • 我们可以使用JavaScript来表达非常多的逻辑，而对于DOM本身来说是非常不方便，用js操作 虚拟DOM，DOM元素会在内存中更改，等所有操作结束之后，只需要一次更新即可，提高性能
• 其次是方便实现跨平台，包括你可以将VNode节点渲染成任意你想要的节点
  • 如渲染在canvas、WebGL、SSR、Native（iOS、Android）上
  • 并且Vue允许你开发属于自己的渲染器（renderer），在其他的平台上渲染

虚拟DOM的渲染过程

template -> render渲染函数 ->虚拟DOM（VNode）-> 真实DOM -> 浏览器展示

方法一

实现template语法

定义templa语法

image.png

创建虚拟DOM

//1.创建虚拟DOM
      class VNnode {
        //构造函数
        //一个节点会有标签（tag）属性（props）value，标签类型
        constructor(tag, props, value, type) {
          //标签名转小写
          this.tag = tag && tag.toLowerCase()
          this.props= props
          this.value = value
          this.type = type
          this.children = []
        }
        //追加子元素
        appendChild(vnode) {
          this.children.push(vnode)
        }
      }

生成虚拟DOM

 // 2.生成虚拟DOM
      //使用递归来变量DOM元素，生成虚拟DOM
      //vue源码使用栈结构 ，用栈结构存储父元素来实现递归
      function getVNode(node) {
        //获取节点类型
        let nodeType = node.nodeType
        //定义虚拟DOM
        let _vnode = null
        ///nodeType 为一表示标签节点
        if (nodeType === 1) {
          let nodeName = node.nodeName
          //节点属性
          let attrs = node.attributes
          //获取props
          let _attrObj = {}
          //遍历所有节点
          for (let i = 0; i < attrs.length; i++) {
            _attrObj[attrs[i].nodeName] = attrs[i].nodeValue
          }
          //nodeName标签名 ,_attrObj 属性 第三位value  nodeType 标签类
          // <div></div>,标签节点,中间的value是文本节点,所有value是undefined
          //生成虚拟DOM
          _vnode = new VNnode(nodeName, _attrObj, undefined, nodeType)
          //node的子节点
          let childNodes = node.childNodes
          // 打印验证生成的子节点
          //console.log(childNodes)
          //子节点进行循环遍历生成虚拟DOM
          for (let i = 0; i < childNodes.length; i++) {
            _vnode.appendChild(getVNode(childNodes[i]))
          }
        }
        //文本节点
        //<div>哈哈哈</div> 中间的哈哈哈才能表示文本节点,所以标签名和属性时undefined
        else if (nodeType === 3) {
          _vnode = new VNnode(undefined, undefined, node.nodeValue, nodeType)
        }
        return _vnode
      }

验证上面的模板转换为VNode

 let root = document.querySelector('.root')
      //转换为虚拟DOM
      let vroot = getVNode(root)
      console.log(vroot)

VNode

VNode生成成功，现在需要把虚拟DOM生成真实DOM

将虚拟DOM生成真正的DOM

 //3.将虚拟DOM生成真正的DOM
      //逆转第二步骤
      function parseVNode(vnode) {
        //获取类型
        let type = vnode.type
        //定义真实DOM
        let _node = null
        //文本节点
        if (type === 3) {
          return document.createTextNode(vnode.value) //创建文本节点
        } else if (type === 1) {
          //元素节点
          _node = document.createElement(vnode.tag) // 创建元素标签名
          //1.属性
          let props = vnode.props //props此时为键值对 即还原 class = 'value'
          Object.keys(props).forEach((key) => {
            let attrName = key //属性名
            let attrValue = props[key] //属性值
            //绑定标签的属性值
            _node.setAttribute(attrName, attrValue)
          })
          //2.子节点
          let children = vnode.children
          console.log(children)
          //遍历子节点 ,子节点此时为虚拟DOM
          children.forEach((subvnode) => {
            _node.appendChild(parseVNode(subvnode)) //调用转换真实DOM函数,递归转换为子元素
          })
          return _node
        }
      }

验证真实DOM生成

 //将虚拟DOM转换为真实DOM
      let Edom = parseVNode(vroot)
      console.log(Edom)

RNode

真实DOM生成成功

方法二

这里不使用模板语法利用h函数来生成虚拟DOM，通过mount方法将虚拟DOM进行挂载

h函数

实现h函数

function h(tag, props, children) {
  //创建虚拟DOM
  //vnode实际上是一个JavaScript对象,把传过来的参数放到一个对象中进行返回就行
  return {
    tag,
    props,
    children
  }
}

验证虚拟DOM生成

生成虚拟DOM

实现mount函数

//实现mount
const mount = (vnode, container) => {
  //将VNode生成真实节点元素
  //1.创建真实标签元素,将标签元素保留到VNode上
  const el = vnode.el = document.createElement(vnode.tag)
  //2.处理props
  if (vnode.props) {
    //进行循环拿到key:value
    for (const key in vnode.props) {
      const value = vnode.props[key]
      //判断如果是onClick类似事件,进行截取on之后的单词进行转换为小写
      if (key.startsWith("on")) {
        el.addEventListener(key.slice(2).toLowerCase(), value)
      } else {
        //设置属性
        el.setAttribute(key, value)
      }
    }
  }
  //3.处理children
  if (vnode.children) {
    if (typeof vnode.children === "string") {
      //判断children是字符串,说明是元素的内容,直接赋值即可
      el.textContent = vnode.children
    } else {
      //如果是数组表明是有子元素节点,进行遍历数组元素,继续调用mount函数
      vnode.children.forEach(item => {
        mount(item, el)
      })
    }
  }
  //4.将元素挂载到contaniner
  container.appendChild(el)
}

验证mount函数挂载成功

      //2.将VNode通过mount 挂载到真实节点上
      mount(vnode, document.getElementById('root'))

mount