react和vue中为什么用key、并且用key的时候为什么不能用index

时间：2022-12-28 10:24:33浏览次数：37

标签：index vue 为什么渲染 DOM key 逆序

为什么用key

在虚拟dom进行diff算法的时候，使用key可以对key进行比较然后来判断两个节点是否是同一节点，极大的增加了速度。

为什么避免使用index

先来总结好了的：

如果只是单纯的渲染或者是顺序操作，使用index没有问题
如果是逆序的删除或者增加，会增加多余的DOM渲染
如果是逆序操作，并且还有输入的DOM，那么会造成渲染错误

标签：index,vue,为什么,渲染,DOM,key,逆序
From： https://www.cnblogs.com/taosifan/p/17009535.html

vue 使用路由component: () =＞import (‘ ‘)报错解决办法
今天帮朋友调代码的时候，在人家的mac上面，项目没有任何错误，到我这里就出现component:()=>import(’')加载路由错误。发现是import处报错，import属于异步引用组件，需要......
vue 实现通过字符串关键字符动态渲染 input 输入框
vue实现通过字符串关键字符动态渲染input输入框今天做一个简单的demo，就是有一个字符串，字符串里面有标识符，前端检测到标识符之后，需要将这个标识符转换成一个input输入框......
Vuex的简单使用，基于Vue2
模仿他的，项目地址https://github.com/iamshaunjp/vuex-playlist视频地址https://www.youtube.com/watch?v=BGAu__J4xoc&list=PL4cUxeGkcC9i371QO_Rtkl26MwtiJ30P2&index......
Vue3 Composition API 的优势
1.OptionsAPI存在的问题使用传统OptionsAPI中，新增或者修改一个需求，就需要分别在data，methods，computed里修改。 2.CompositionAPI的优势我们可以更加优雅的组织......
Vue3之provide 与 inject
provide与inject 作用：实现祖与后代组件间通信，儿子组件中也能用这种方式，但是一般不这么用，父子组件传信息一般直接用props属性。套路：父组件有一个 provide 选项......
Vue3之响应式数据的判断
响应式数据的判断isRef:检查一个值是否为一个ref对象isReactive:检查一个对象是否是由 reactive 创建的响应式代理isReadonly:检查一个对象是否是由 readonly......
Vue3之customRef
customRef作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。比如在input更新数据之后，设置指定时间之后再在h3标签上重新展示最新的数据：<templ......
Vue3之toRaw 与 markRaw
toRaw与markRawtoRaw：作用：将一个由reactive生成的响应式对象转为普通对象。ref的对象不行使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引......
Vue3之readonly 与 shallowReadonly
readonly与shallowReadonlyreadonly:让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景:不希望数据被修改时。示......
Java面试题-前端Vue
Vue的生命周期beforeCreate（创建前）在数据观测和初始化事件还未开始created（创建后）完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来beforeMount（载入前）在......

react和vue中为什么用key、并且用key的时候为什么不能用index

为什么用key

为什么避免使用index

相关文章

赞助商

阅读排行