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的响应式原理