介绍
每个 Vue 实例在被创建时都要经过一系列的初始化过程。
例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
同时在这个过程中也会运行一些叫做生命周期钩子的函数。
这给了用户在不同阶段添加自己的代码的机会。
注意生命周期钩子的 this
上下文指向调用它的 Vue 实例。不要在选项属性或回调上使用
箭头函数,因为箭头函数并没有 this
。
作用
让 开发者 控制整个vue实例的过程时 更好的添加逻辑。
图示
详情
创建
beforeCreate
表示 实例完成被创建出来之前,会执行它
注意:在beforeCreate 生命周期函数执行的时候,data 和 methods 中的数据都没有初始化
created
在 created 中 data 和 methods 都已经初始化好了
如果要调用 methods 中的方法 或者操作 data 中的数据,最早 只能在created 中操作
挂载
beforeMount
表示 模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中
在 beforeMount 执行的时候 页面中的元素 还没有被真正替换过来 只是之前写的一些模板字符串
mounted
表示 内存中的模板 已经真实的挂载到了页面中 用户已经可以看到渲染好的页面
注意 mounted 是 实例创建期间的最后一个生命周期函数 当执行完mounted 就表示 实例已经被完全创建好了 此时 如果没有其它操作的话 这个实例 静静的 躺在内存中 一动不动
如果要通过某些插件操作页面上的DOM节点了 最早要在mounted中进行
此时 组件已经脱离了创建阶段 进入到了运行阶段
更新
只有当 data 数据改变 可以执行0 或 无限次
beforeUpdate
页面显示的数据 还是旧的 此时 data数据是最新的 页面和最新数据不同步
updated
页面和 data 最新数据已经同步 都是最新的
销毁
beforeDestroy
当执行 beforeDestroy钩子函数的时候, Vue实例就已经从运行阶段,进入到了销毁阶段
当执行 beforeDestroy 的时候,实例身上所有 data 和所有的 methods , 以及过滤器.指令…都处于可用状态,此时。还没有真正执行销毁的过程
destroyed
当执行到destroyed函数的时候,组件已经被完全销毁了,此时,组件中所有的数据、方法、指令、 过滤…都已经不可用了
总结使用场景(欢迎评论补充)
beforeCreate
- 请求数据
- 添加一些loading效果,在created时进行移除
created
- 请求数据,
- 完成数据的初始化
mounted
- 请求数据
- 当需要操作dom的时候执行
beforeUpdated
updated
- 当数据更新需要做统一业务处理的时候使用
beforeDestroy
- 解绑事件