vue diff算法与虚拟dom知识整理(3) 了解h函数和虚拟节点概念实现虚拟节点上dom树

news2024/9/29 9:32:48

虚拟dom之前我们也有了基本的了解
简单说就是用js数据结构来描述html的dom结构树

首先为什么要用虚拟dom啊？
官方给出的回答是 diff最小量精细化算法是发生在虚拟dom上的
也就是我们之前说的节点与节点比较并不是发生在html元素上的而是发生在js中的虚拟dom上的
在这里插入图片描述
就是当节点发生变化或者节点依赖数据发生变化时对比哪里不一样才能知道怎么更新惊动的地方最少且也能完成更新的目的
这个比较的过程被叫做 diff算法而这个过程是在js部分对这些虚拟dom节点进行的

那我我们现在就要想 dom是如何变为虚拟dom的呢？

但这个知识属于模板编译原理范畴这里因为时间问题就不去讲解了

我们需要知道虚拟dom是通过什么渲染的那么提示通过 h函数渲染的

h这个没有什么太大含义就是作者在编写代码时给一个函数命的名所以以后我们如果要做开源或者技术栈命名规范还是挺重要的后面别人去参考你的代码也会反向推导你函数的命名

h函数的作用是用来产生虚拟节点
例如我们这样去调用h函数

h('a',{props: {href: 'https://blog.csdn.net/weixin_45966674?type=blog'}}，'测试标签')

那么这个函数就会帮我们创建出一个这样的虚拟节点

{
    'sel': 'a'
    "data": {
        props: {
            href:'https://blog.csdn.net/weixin_45966674?type=blog'
        }
    },
    "text": '测试标签'
}

也可以把他看成这样

<a href= "https://blog.csdn.net/weixin_45966674?type=blog">测试标签</a>

那么我们对应看一下也就是说 h标签的第一个参数是你要创建一个什么标签
字符串类型
例如 “div” “p” “h1” 等等
第二个参数是一个对象
这里首先我们外面一个对象 {}
然后里面要先有一个字段props
这个就代表属性它里面有时一个 json对象对应键值就是标签属性
例如

{
    props: {
        href: "链接",
        name: "name值"
    }
}

第三个不用讲就是标签中的内容

然后我们这样就声明出了一个虚拟dom节点
又叫 vnode
其中v对应单词 virtual 意思就是虚拟的
node就是节点虚拟节点

首先 h就是来声明一个虚拟的dom节点至于怎么将dom节点转到h上变成虚拟dom节点这里涉及到模板编译原理时间问题就不特意去说了后续我会更文讲解这里我们就好好把虚拟dom玩明白

虚拟节点主要会有以下几个属性
在这里插入图片描述
children 是它的子节点子元素为 undefined 表示没有子集
data 就是我们刚才看到的他身上带的标签属性
elm 对应这个元素真正的dom节点如果为 undefined 表示这个节点还没有上dom树
key 表示节点的唯一标识特别是我们在vue开发中循环渲染元素时就需要在标签上加个key属性用来区分
sel 代表用了一个什么标签就是我们h的第一个参数 “标签名例如 div”
text 表示文字

好我们别光说不练
我们打开上文中创建的案例
找到 src下的index.js
将引包之外的代码都给他干掉
在这里插入图片描述
然后将 src下的 index.js 代码改成这样

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";
 
  //创建虚拟节点
  var vonm = h("a",{props: {
    href: "https://blog.csdn.net/weixin_45966674?type=blog"
  }},
  "测试虚拟dom");
  console.log(vonm);

这里我们须知 h函数还没有那么强他不会真的在html的dom树上加一个节点他只是在js中创建了一个虚拟dom节点
h函数还没有那么强大然后我们启动项目
打开控制台我们用 console.log 输出的这个h生成的虚拟节点就在这里了
在这里插入图片描述
我们来简单看看他的几个属性

这样可那种像一个json一样看着就有点没什么感觉
那么我们让他上一下页面dom树

这个时候我们要创建一个 patch 函数

后续我会更文这个会比较快去讲述patch函数它是diff算法的一个核心函数
非常有用
本文先不讲后续马上更文去讲

我们将src下的index.js代码修改如下

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
 
  //创建虚拟节点
  var vonm = h("a",{props: {
    href: "https://blog.csdn.net/weixin_45966674?type=blog"
  }},
  "测试虚拟dom");
  console.log(vonm);

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,vonm);

这里用init 传一个数组里面是其他所有依赖一个patch就出来了具体的patch我后面会出文去讲这篇我们先弄明白h和虚拟节点
然后我们需要获取到一个节点
通过document.getElementById获取到id为container的节点
然后第一个参数是要挂载的节点第二个参数则是虚拟dom节点
再次运行项目我们的虚拟节点就上去成了真的节点
在这里插入图片描述
而我我们的超链接点击之后是真的能跳转的
我们的标签属性都是自然生效
但每次我们点击都是在当前界面打开

学了html伙伴们都知道怎么解决
我们将src下的index.js改成这样

import {
    init,
    classModule,
    propsModule,
    styleModule,
    eventListenersModule,
    h,
  } from "snabbdom";

  //创建patch函数
  const patch = init([
    classModule,
    propsModule,
    styleModule,
    eventListenersModule
  ]);
 
  //创建虚拟节点
  var vonm = h("a",{props: {
    href: "https://blog.csdn.net/weixin_45966674?type=blog",
    target: "_blank"
  }},
  "测试虚拟dom");
  console.log(vonm);

  //让虚拟节点上树
  const container = document.getElementById('container');
  patch(container,vonm);