vue2.0的虚拟dom和diff算法

PJ_

已于 2022-08-27 17:02:18 修改

阅读量283

点赞数 1

分类专栏： vue 文章标签： javascript 前端开发语言

于 2022-06-04 11:53:29 首次发布

本文链接：https://blog.csdn.net/weixin_54257364/article/details/123455999

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文深入探讨了虚拟DOM的概念及其在更新DOM时的作用，重点介绍了Diff算法的核心——最小量更新和键值（key）的重要性。通过h函数创建虚拟节点，并展示了如何使用patch函数将虚拟节点转换为真实DOM。同时，文章还讨论了手动实现h函数和Diff算法的准备工作，强调了key在决定节点是否为同一节点时的关键作用，以及无key和有key情况下的不同更新策略。

摘要由CSDN通过智能技术生成

1介绍

1.1 diff算法的目的就是：精选化比对前后变化，最小量更新

1.2 虚拟dom就是：用js对象描述DOM的层次结构，dom中的一切属性都在虚拟dom中有对应的属性

在这里插入图片描述

diff是发生在虚拟dom中的，也就是这个js对象，前后比对变化

在这里插入图片描述

2 h函数

h 函数用来产生虚拟节点（vnode），但不会产生真正的标签
比如这样调用 h 函数

h('a', { props: { href: 'http://www.atguigu.com' } }, '尚硅谷')

将得到这样的虚拟节点：

{ "sel": "a", "data": { "props": { "href": "http://www.atguigu.com" } }, "text": "尚硅谷" }

它表示的真正的 DOM 节点：

<a href="http://www.atguigu.com">尚硅谷</a>

一个虚拟节点的所有属性

{
  children: undefined, // 子节点，undefined表示没有子节点
  data: {}, // 属性样式等
  elm: undefined, // 该元素对应的真正的DOM节点，undefined表示它还没有上树
  key: undefined, // 节点唯一标识
  sel: 'div', // selector选择器 节点类型（现在它是一个div）
  text: '我是一个盒子' // 文字
}

使用patch函数，将虚拟节点生成真实的节点

import { init } from 'snabbdom/init'
import { classModule } from 'snabbdom/modules/class'
import { propsModule } from 'snabbdom/modules/props'
import { styleModule } from 'snabbdom/modules/style'
import { eventListenersModule } from 'snabbdom/modules/eventlisteners'
import { h } from 'snabbdom/h' // helper function for creating vnodes

// 创建出 patch 函数
const patch = init([
  classModule,
  propsModule,
  styleModule,
  eventListenersModule
])

// 创建虚拟节点
const myVNode1 = h(
  'a',
  { props: { href: 'http://www.baidu.com', target: '_blank' } },
  '百度一下就知道'
)

const myVNode2 = h('div', { class: { box: true } }, '我是一个盒子')
// 让虚拟节点上树
const container = document.getElementById('container')
// patch(container, myVNode1)
patch(container, myVNode2)

嵌套使用h函数，将会产生虚拟dom树

//比如这样嵌套使用h函数
h('ul', {}, [
  h('li', {}, '牛奶'),
  h('li', {}, '咖啡'),
  h('li', {}, '可乐')
])
//得到这样的虚拟dom树
{
  "sel": "ul",
  "data": {},
  "children": [
    { "sel": "li", "data": {}, "text": "牛奶" },
    { "sel": "li", "data": {}, "text": "咖啡" },
    { "sel": "li", "data": {}, "text": "可乐" }
  ]
}

3. 手写h函数

vnode.js

将传入的参数组合成对象返

/**
 * 产生虚拟节点
 * 将传入的参数组合成对象返回
 * @param {string} sel 选择器
 * @param {object} data 属性、样式
 * @param {Array} children 子元素
 * @param {string|number} text 文本内容
 * @param {object} elm 对应的真正的dom节点(对象)，undefined表示节点还没有上dom树
 * @returns 
 */
export default function(sel, data, children, text, elm) {
  const key = data.key;
  return { sel, data, children, text, elm, key };
}