官方介绍 key的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。 它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用： 完整地触发组件的生命周期钩子 触发过渡 如何理解呢 假设有三个子组件，每个子组件里面有一个有状态的孙子组件。 <Child v-for="item in array" :text="item" @delete="remove(i)"/> // array: [1, 2, 3] 进行删除操作时（删除2） 当不设置 key 时，vue遍历2个数组，对比发现1没变，并且因为是相同类型的元素于是复用1，然后对比发现2变成了3，于是将2改成3，但子元素没变，就地复用，于是就会出现问题，最后3被删除了，于是删除3对应的子元素 当设置了 key时，会基于 key 的变化重新..... Vue系列-key的作用 Vue
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。 所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 基础生命周期 beforeCreate 在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 created 在实例创建完成后被立即调用。 在这一步，实例已完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。 然而，挂载阶段还没开始，$el property 目前尚不可用。 beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用。 该钩子在服务器端渲染期间不被调用。 mounted 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mo.... Vue系列-生命周期 Vue
Herman 的个人博客