Vue2.0 v-for 中 :key 到底有什么用?
Vue2.0 v-for 中 :key 到底有什么用?当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略 。 这句话是什么意思?参考地址:https://www.zhihu.com/question/61064119/answer/187145550其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释ke
·
Vue2.0 v-for 中 :key 到底有什么用? 当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用 “就地复用” 策略 。 这句话是什么意思?
参考地址:https://www.zhihu.com/question/61064119/answer/187145550
其实不只是vue,react中在执行列表渲染时也会要求给每个组件添加上key这个属性。要解释key的作用,不得不先介绍一下虚拟DOM的Diff算法了。我们知道,vue和react都实现了一套虚拟DOM,使我们可以不直接操作DOM元素,只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。vue和react的虚拟DOM的Diff算法大致相同,其核心是基于两个简单的假设:1. 两个相同的组件产生类似的DOM结构,不同的组件产生不同的DOM结构。2. 同一层级的一组节点,他们可以通过唯一的id进行区分。基于以上这两点假设,使得虚拟DOM的Diff算法的复杂度从O(n^3)降到了O(n)
更多推荐
已为社区贡献9条内容
所有评论(0)