Vue 相同组件 生命周期只调用一次

Vue 相同组件 生命周期只调用一次

先来看一下官方文档的组件的介绍

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项

所以说每一个组件是一个单独的实例，但是为什么我写了多个相同的组件，但是 生命周期只调用一次呢？
再来卡看key的官方文档

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素

em… 大概的意思就是 key 作用于 Virtual DOM 的算法，如果你不写，Vue就会使用一种最大限度减少动态元素并且 尝试 修改 / 复用 Virtual DOM，而且不是重新创建

<example-component :data="data1"></example-component>
<example-component :data="data2"></example-component>
<example-component :data="data3"></example-component>
<example-component :data="data4"></example-component>

这种组件模板 Vue就会把组件进行复用 ，而不是重新创建，所以只会使用调用一次生命周期
而加上之后 key 之后 Vue 就会组件单独的重新创建

<example-component key="example1" :data="data1"></example-component>
<example-component key="example2" :data="data2"></example-component>
<example-component key="example3" :data="data3"></example-component>
<example-component key="example4" :data="data4"></example-component>