Vue 就地复用策略注意事项

---template部分

div

 el-popover(ref="message", placement="top-start", title="标题", width="100", trigger="hover",content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"

 a(href="javascript:void(0)", v-if="show", style="margin-right:10px") 我是无辜的
 a(href="javascript:void(0)", v-popover:message="", style="margin-right:10px") 显示弹窗
 a(href="javascript:void(0)", v-if="show", style="margin-right:10px") 我是无辜的2

---js部分

mounted () {
    setTimeout(() => {
        this.show = true;
    }, 2000);
}

这段代码会出现这样的情况：

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 就有动效

 

总之，灵活使用吧，哈哈