每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
组件的生命周期分为四个阶段:create(创建)、mount(挂载)、update(更新)、destroy(销毁) 。每个阶段有"之前"、"之后"两个,总共有 8 个生命周期钩子函数。
Vue 生命周期示意图:
生命周期函数
beforeCreate:
- 刚初始化了一个 Vue 空的实例对象;
- data 和 methods 还没有初始化;
- 真实 DOM 没有渲染出来;
created:
- 组件创建结束;
- 可以操作 data 数据,和调用 methods 方法;
- 进行ajax请求异步数据的、初始化数据;
- 真实 DOM 没有渲染出来;
beforeMount:
- 模板编译好了,尚未挂载到页面;
- 真实 DOM 没有渲染出来;
mounted:
- 组件挂载好了;
- 可以进行真实dom的操作;
beforeUpdate:
- data 数据更改后触发;
- 可以触发多次,只要数据更新就会触发;
updated:
- 页面更新完成时触发;
- 可以触发多次,只要数据更新就会触发;
beforeDestroy:
- 销毁前触发;
- vue 实例上 data,methods,指令等处于可用状态;
- 可以执行计时器的关闭,第三方实例的删除;
destroyed:
- 销毁后触发;
- vue 实例上 data,methods,指令等处于不可用状态;
keep-alive
添加 keep-alive 标签后会增加 activated 和 deactivated 这两个生命周期函数,初始化操作放在 actived 里面,一旦切换组件,因为组件是缓存的而没有被销毁,所以它不会执行销毁阶段的钩子函数,所以移除操作需要放在 deactived 里面,在里面进行一些善后操作,这个时候 created 钩子函数只会组件首次加载时执行一次,销毁的钩子函数一直没有执行。
activated(组件激活时):被 keep-alive 缓存的组件激活时调用,可以初始化一些数据。
deactivated(组件停用时):被 keep-alive 缓存的组件停用时调用。在deactived里面,在里面进行一些善后操作。
nextTick()
在下次 DOM 更新循环结束之后执行回调。在修改数据之后使用 nextTick,则可以在回调中获取更新后的 DOM ,简单理解:数据更新了,在 DOM 渲染完成后调用该函数。
注意:在 Vue 生命周期的 created() 钩子函数进行的 DOM 操作一定要放在 Vue.nextTick() 的回调函数中。 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的 DOM结构的时候,这个操作都应该放进 Vue.nextTick() 的回调函数中。