vue生命周期

介绍

每个 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

  • 解绑事件

destroy


 

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×