[toc] ### vue生命周期 ``` beforeCreate created: 无法获取dom beforeMount mounted updated beforeDestroyed destroyed ``` #### 1.beforeCreate 在实例初始化之后，在initState之前被vue内部的callHook方法触发了beforeCreate里的回调函数，所以这个时候data中的数据还不是响应式的，无法获取到 ```js initLifecycle(vm) initEvents(vm) initRender(vm) callHook(vm, 'beforeCreate') // 在 initState 之前调用 // 注入 initInjections(vm) // resolve injections before data/props // 响应式 initState(vm) initProvide(vm) // resolve provide after data/props callHook(vm, 'created') ``` #### 2.created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。 在执行data()方法前props属性有数据已经可以访问，watch和computed监听函数此时为null，此时this.computed里的计算属性值为undefined。data函数执行完后，watch和computed监听函数才可用，因为data函数执行完后，data函数return的属性这时才可用。然而，挂载阶段还没开始，$el 属性目前不可见。 #### 3.beforeMount 在挂载开始之前被调用，在这之后组件的 render 函数首次被调用 #### 4.mounted 可以操作dom, el被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子 #### 5.beforeUpdate 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程 #### 6.updated 由于数据更改之后，导致虚拟DOM重新渲染和打补丁，在这之后会调用该钩子 #### 7.beforeDestroyed 实例销毁之前调用，在这时，实例还可以使用 #### 8.destroyed Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 #### 9.activated keep-alive 组件激活时调用。 #### 10.deactivated keep-alive 组件停用时调用。