前端js-----vue中的key

news/2025/2/22 2:49:47

在官方文档中是这样解释的:key的特殊属性主要用在vue的虚拟DOM算法,在新旧nodes对比时辨识VNodes。如果不能使用key,Vue会使用一种最大 限度减少动态元素并且尽可能的尝试就地修改或修复相同类型元素的算法。而且使用key时,它会基于key的变化重新排列元素顺序,并且会移出或销毁key不存在的元素。有相同父元素的子元素必须有独特的key。重复的key会造成渲染错误。最常见的是结合v-for。它也可以用于强制替换元素或组件而不是重复使用它。当遇到(1)完整的触发组件的生命周期钩子(2)触发过度。场景时,key可能会很有用


总结:我们要利用key属性的优点,必须保证同一父元素的所有子元素有不同的key属性。在有了key属性之后,Vue会记住元素们的顺序,并根据这个顺序在适当的位置插入/删除元素来完成更新,这种方法比没有key属性时的就地复用策略效率更高。然后就是在过渡中使用key,当有相同标签名的元素切换时,需要通过key特性设置唯一值来标记,让Vue区分它们,否则Vue会为了性能只会替换相同标签内部的内容。

Diff算法三个对比:
(1)同层级对比
(2)同key值对比
(3)同组件对比


http://www.niftyadmin.cn/n/1143449.html

相关文章

Vue购物车(全选和全不选)

效果如下&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title><st…

Vue中作用域插槽的妙用

昨天在学后台管理项目的时候遇到了有趣的东西-----作用域插槽 为什么scope.row可以获得本行的数据&#xff0c;说明这个大神在封装组件的时候&#xff0c;用了一个插槽<slot :rowdata></slot> 话又说回来&#xff0c;什么是作用域插槽&#xff1a;当我们在封装组件…

Vue报错:NavigationDuplicated: Avoided redundant navigation to current location(提示这是到当前位置的冗余导航)

今天在做电影app时&#xff0c;需求是&#xff1a;有一个长列表&#xff0c;当我们滑动后&#xff0c;进入了另外一个页面之后在返回列表页时&#xff0c;会依旧保持我们第一次滑动的位置。看图&#xff1a; 解决方法&#xff1a; 在router.js&#xff08;由于配置不同&#xf…

Vue中解决better-scroll的滚动问题以及刷新页面better-scroll不起作用问题

不得不说better-scroll是个很好用的第三方框架&#xff0c;但是使用恰当才能发挥它强大的功能哦&#xff01;具体使用步骤请移步→better-scroll链接Github 但是better-scroll用的恰当的话并不会出现在手机上滚动不了的情况 具体问题&#xff1a; 1.使用的时候为什么滚动不起作…

vue中报错Error in render: “TypeError: Cannot read property ‘length‘ of undefined“

通过查阅资料&#xff0c;其实这种报错会有两种&#xff1a; 1.在html标签模板上使用length会报错&#xff0c;报错原因为在这个时候你还拿不到某个数组的length&#xff0c;解决方案为&#xff1a;在此标签上加个v-if"array.lenth",如果你更想保险的话使用v-if"…

Vue报错[Vue warn]: Error in render: “TypeError: “checkedCount“ is read-only“

写vue时报出这样一个错误&#xff0c;某个东西是只读的&#xff1b; 报错原因&#xff1a;我在用一个变量的时候&#xff0c;我居然是用const声明的&#xff0c;真不细心。声明变量用let&#xff0c;常量用const&#xff1b; 复习一下let和const&#xff1a; 1.let &#xff08…

vue中keep-alive,include的缓存问题(玩好keep-alive)

前提&#xff1a;有A,B,C,D四个页面,A是按钮页(点击按钮进入B页面)&#xff0c;B是订单列表页&#xff0c;C是订单详情页&#xff0c;D是费用详情页 需求&#xff1a;顺序是A->B->C->D,每次都刷新页面&#xff0c;D->C->B时走缓存&#xff0c;但是每次从A到B都…

通过Vuex实现Input双向绑定

store.js: store new Vuex.store({state:{inputVal: },mutations:{setInput (state, newVal) {state.inputVal newVal}} }) 页面中绑定&#xff1a; <template><div><input v-model storeVal></div> </template> <script> export defa…