从vue源码中看diff算法

一、v-for必须要指定key,其作用是什么?

在源码中有一个函数为,其中就是通过判断两个vnode的type和key进行判断,如果这两个属性相同,那么这两个vnode就是相同,所以在设置key的时候也不可以设置为object等无法通过三等号判断的类型。

js 复制代码
export function isSameVNodeType(n1: VNode, n2: VNode): boolean {
  return n1.type === n2.type && n1.key === n2.key
}

二、diff分为五种对比策略

源码在packages/runtime-core/src/renderer.ts的patchKeyedChildren()函数。

1、从前向后

2、从后向前

3、新节点 > 旧节点

4、旧节 > 新节点

5、乱序

相关推荐
百锦再几秒前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
快起来别睡了4 分钟前
Vue 3 中的组件通信与组件思想详解
vue.js
优雅永不过时_v9 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
WildBlue12 分钟前
🧊 HTML5 王者对象 Blob - 二进制世界的魔法沙漏
前端·javascript·html
不讲道理的柯里昂17 分钟前
Vue MathJax Beautiful,基于Mathjax的数学公式编辑插件
vue.js·开源
啷咯哩咯啷17 分钟前
Vue3构建低代码表单设计器
前端·javascript·vue.js
用户261245834016118 分钟前
vue学习路线(10.监视属性-watch)
前端·vue.js
凌览20 分钟前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
爱学习的小学渣23 分钟前
JS用法:Map,Set和异步函数
前端·javascript
独立开阀者_FwtCoder41 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript