2024年最新Vue源码：虚拟DOM和diff算法(2)，2024年最新科学技术协会面试题目

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

h函数用来产生虚拟节点(vnode)

比如这样会调用h函数

将得到这样的虚拟节点

{

“sel”: “a”,

“data”: {

props: {

href: “http://www.atguigu.com”

}

},

“text”: “尚硅谷”

}

它表示的真正DOM节点

一个虚拟节点都有哪些属性

---

{

children: undefined, // 子元素

data: {}, // 属性、样式

elm: undefined, // 对应真正DOM节点，如果为undefined，表示该节点还未上树

key: undefined, // 节点唯一标识

sel: “div”, // 选择器

text: “我是一个盒子” // 文字

}

h函数可以嵌套使用，从而得到虚拟DOM树（🧨）

---

比如这样嵌套使用h函数

将得到这样的虚拟DOM树

h函数用法很活

---

例如

手写h函数

---

vnode

vnode.js

/**

• vnode函数的功能非常简单，就是把传入的5个参数组合对象返回

*/

export default function (sel, data, children, text, elm) {

return {

sel, data, children, text, elm

};

}

h函数

h.js

import vnode from “./vnode”;

/*

• 编写一个低配版本的h函数，这个函数必须要接收3个参数，缺一不可 —— 重载功能较弱

• 也就是说，调用的时候形态必须是下面三种之一：

• 形态① h(‘div’, {}, ‘文字’)

• 形态② h(‘div’, {}, [])

• 形态③ h(‘div’, {}, h())

• */

export default function (sel, data, c) {

// 检查参数的个数

if (arguments.length !== 3)

throw new Error(‘对不起,h函数必须传入3个参数,我们是低配版h函数’);

// 检查参数c的类型

if (typeof c === ‘string’ || typeof c === ‘number’) {

return vnode(sel, data, undefined, c, undefined);

} else if (Array.isArray©) {

// 说明现在调用h函数是形态②

let children = [];

// 遍历c,手机children

for (let i = 0; i < c.length; i++) {

// 检查c[i]必须是一个对象

if (!(typeof c[i] === ‘object’ && c[i].hasOwnProperty(‘sel’)))

throw new Error(‘传入的数组参数中有项不是h函数’);

// 这里不用执行c[i],因为测试语句中已经执行了

// 只需要收集好children

children.push(c[i]);

}

// 循环结束了,说明children收集完毕了,此时可以返回虚拟节点，有children节点

return vnode(sel, data, children, undefined, undefined);

} else if (typeof c === ‘object’ && c.hasOwnProperty(‘sel’)) {

// 说明现在调用h函数是形态③

// 即传入的c是唯一的children. 不用执行c，因为测试语句中已经执行了c

return vnode(sel, data, [c], undefined, undefined);

} else {

throw new Error(‘传入的参数类型有误’);

}

};

看TS代码，写JS代码

---

• 看源码的TS版代码，然后仿写JS代码

• 只要主干功能，放弃实现一些细节

感受diff算法

===================================================================

通过更改li标签内容得知，diff算法为最小量更新

通过key可