vue及react原理方面总结

虚拟DOM中key 的作用

  • key 是虚拟 DOM 对象的标识,可提高页面更新渲染的效率。
  • 当状态中的数据发生变化时,React 会根据新数据生成新的虚拟 DOM ,接着对新旧虚拟 DOM 进行 Diff 比较,规则如下:

旧虚拟 DOM 找到和新虚拟 DOM 相同的 key: 若内容没变,直接复用真实 DOM;若内容改变,则生成新的真实 DOM,替换页面中之前的真实DOM
旧虚拟 DOM 未找到和新虚拟 DOM 相同的 key:根据数据创建新的真实 DOM ,渲染到页面

使用 index 作为 key 可能引发的问题:

  • 若对数据进行逆序添加、逆序删除等破坏顺序的操作,会进行没有必要的真实 DOM 更新。界面效果没问题,但效率低下。
  • 如果结构中包含输入类的DOM(如 input 输入框) ,则会产生错误的 DOM 更新。
  • 若不存在对数据逆序添加、逆序删除等破坏顺序的操作,且没有输入类DOM,使用index则没有问题。
    在这里插入图片描述

vue2和vue3的响应式原理

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43848576/article/details/131121191