如何正确理解vue中关键详的解 - 行业资讯 - 肥雀云

就目前所了解的情况,关键的作用有以下这些。

　　<李> v)遍历时,用id、uuid之类作为关键,唯一标识节点加速虚拟DOM渲染李　　<李>响应式系统没有监听到的数据,用+新日期()生成的时间戳作为关键,手动强制触发重新渲染李　　　　

场景一大同小异司空见惯,场景二是下面这样的:

　　　　　　& lt; div:关键=皉erender”比; 　　& lt; span>你好Vue。js ! & lt;/span> 　　& lt; complexComponent: propObj=" propObj”: propArr=皃ropArr祝辞& lt;/complexComponent> 　　& lt;/div> 　　　　refresh () { 　　这一点。rerender=+新日期(); 　　} 　　　　

那么vue中关键的相关知识点到底是怎样的呢?

　　<李>官方API知识点李　　<李>上面2个使用场景背后的原理是什么?李　　<李>除键外,还有其它强制更新DOM的方法吗?李　　<李>参考资料李　　　　

<强>
　　

　　<李>在Vue。js中,关键是6个特殊属性关键,裁判,是,槽,slot-scope,其范围中之一。　　<李>键的值可以是号码,也可以是字符串。　　<李>关键主要作用于Vue的虚拟DOM算法,在diff新节点列表和旧的节点时,作为识别VNode的一个线索。　　<李>如果不用钥匙,Vue会用一种算法:最小化元素的移动,并且会尝试尽最大程度在同适当的地方对相同类型的元素,做补丁或者重用。　　<李>如果使用了钥匙,Vue会根据键的顺序记录元素,曾经拥有了关键的元素如果不再出现的话,会被直接或删除者摧毁。　　<李>拥有同一个家长的孩子必须有独特的钥匙。重复的关键的导致呈现错误。　　　　

<强>最常用的用法一:v)
　　

　　　　　　& lt; ul> 　　& lt;李v=跋钅俊毕钅?关键=癷tem.id祝辞…& lt;/li> 　　& lt;/ul> 　　　　

<强>最常用的用法二:强制替换元素或者组件
　　

　　<李>触发组件的生命周期　　<李>触发过渡李　　　　　　　　& lt; transition> 　　& lt;跨度:关键="文本"在{{文本}}& lt;/span> 　　& lt;/transition> 　　　　

文本发生变化时,& lt; span>会被替换,而不会修补,因此过渡会被触发。
　　

我的理解:
　　

文本变化时,跨越的关键发生了变化,也就是说曾经拥有了旧键的跨度不再出现了,当拥有新值的文本作为关键时,拥有了新关键的跨出现了,那么旧键跨度会被移除,旧的过渡也会移除,新键跨度触发渲染,新过渡触发。

结合官方API的知识点,现在再来回顾文章开头提出的场景。

<>强场景一:v)遍历时,用id、uuid之类作为关键,唯一标识节点加速虚拟DOM渲染
　　

答案: 　　

　　<李>如果不用钥匙,Vue会用一种算法:最小化元素的移动,并且会尝试尽最大程度在同适当的地方对相同类型的元素,做补丁或者重用。　　<李>如果使用了钥匙,Vue会根据键的顺序记录元素,曾经拥有了关键的元素如果不再出现的话,会被直接或删除者摧毁。　　　　

<>强场景二:响应式系统没有监听到的数据,用+新日期()生成的时间戳作为关键,手动强制触发重新渲染
　　

答案: 　　

　　<李>如果使用了钥匙,Vue会根据键的顺序记录元素,曾经拥有了关键的元素如果不再出现的话,会被直接或删除者摧毁。　　<李>刷新方法调用后,包含了跨度和complexComponent的div的关键发生了变化,也就是说曾经拥有了旧键的div不再出现了,当拥有新值的rerender作为关键时,拥有了新键的div出现了,那么旧键div会被移除,旧跨度和complexComponent也会移除,新键div触发渲染,新跨越,带着父组件新propObj和propArr的新complexComponent渲染。　　　　

思考: 　　

　　<李>为什么要叫propObj和propArr ?李　　<李>带着父组件新propObj和propArr的新complexComponent渲染。为什么要加粗?李　　　　

由于Vue。js的obj和arr存在无法检测到数据变化的情况,obj是属性的新增和删除(原因是新增和删除都没有触发setter,观察家未告诉外界更新),arr则是数组内元素重新赋值或者修改长度属性(原因是没有使用改变数组本身的方法,没有触发数组原型链拦截器,观察家未告诉外界更新)。