Vue就地复⽤策略注意事项
---template部分
div
el-popover(ref="message", placement="top-start", title="标题", width="100", trigger="hover",content="这是⼀段内容，这是⼀段内容，这是⼀段内容，这是⼀段内容。"
a(href="javascript:void(0)", v-if="show", ) 我是⽆辜的
a(href="javascript:void(0)", v-popover:message="", ) 显⽰弹窗
a(href="javascript:void(0)", v-if="show", ) 我是⽆辜的2
---js部分
mounted () {
setTimeout(() => {
this.show = true;
}, 2000);
}
javascript void 0 是什么意思
这段代码会出现这样的情况：
1.页⾯进⼊时，⿏标放在 “显⽰弹窗”上 popover⽓泡会出现
2.两秒钟之后⿏标放在 “显⽰弹窗”上 popover⽓泡不再出现，⽽⿏标放在 “我是⽆辜的” a 标签上，popover出现
原因:
1.在刚进⼊页⾯时VNode树只有⼀个 a标签
div
a(显⽰弹窗)
2.2秒之后VNode树
div
a(我是⽆辜的)
a(显⽰弹窗)
a(我是⽆辜的2)
Vue 在2秒后，⽣成了新的Vnode树，这时Vue 将对⽐这两棵树，以此来修改dom
Vue 会使⽤⼀种最⼤限度减少动态元素并且尽可能的尝试修复/再利⽤相同类型元素的算法
上⾯那个例⼦，正是由于第⼀棵树的  a(显⽰弹窗) 这个node  被复⽤导致的
因为他们是相同类型元素，复⽤了这个元素后，会把 a(我是⽆辜的) 节点相应的静态属性重新赋值给 a(显⽰弹窗)  元素，包括⽂本内
容，class名等。
这基本上让⼤家看不到被复⽤的痕迹，就好像是新创建了 a(我是⽆辜的) node ⼀样
其实，a(我是⽆辜的)  本体就是 a(显⽰弹窗)  元素。这样，在2秒之后，⿏标放在 a(我是⽆辜的)  node 上，显⽰出popover，的现象就可以解释了
key
key的特殊属性主要⽤在 Vue 的虚拟 DOM 算法，在新旧 nodes 对⽐时辨识 VNodes。
如果不使⽤ key，Vue 会使⽤⼀种最⼤限度减少动态元素并且尽可能的尝试修复/再利⽤相同类型元素的算法。
使⽤ key，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
Vue 在进⾏ v-for 静态编译时, 如果发现没有指定 :key ，或者重复的key 会给出警告提⽰。
上⾯的例⼦，可以看成是⼿动写的v-for 相当于 a(v-for=(item in [1,2,3])) 。
为了避免上例⼦的情况可以给 a标签上加上 :key 来避免。
但是，也必须要根据场景灵活使⽤，
有时加上key 也可以会引起触发过渡：
<transition>
<span :key="text">{{ text }}</span>
</transition>
只要⼀改变 text 就有动效
总之，灵活使⽤吧，哈哈

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。