阅读 156

走进Vue生命周期(vue生命周期的作用是什么)

Vue生命周期

每个Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会

所有生命周期钩子的 this 上下文将自动绑定至实例中,因此你可以访问 data、computed 和 methods。这意味着你不应该使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。因为箭头函数绑定了父级上下文,所以 this 不会指向预期的组件实例,并且this.fetchTodos 将会是 undefined。

Vue生命周期和详细的执行过程

1.png

从上图能很清楚的看出单个组件的生命周期:
挂载: beforeCreate => created => beforeMount => mounted
更新: beforeUpdate => updated
销毁: beforeDestroy => destroyed

选项 / 生命周期钩子

  1. beforeCreate

  • 处理该实例的初始化选项

  • 初始化生命周期

  • 初始化事件

  • 初始化render函数

2.png


  1. Created
    加载完成之前,执行。执行顺序:父组件-子组件

3.png

  1. beforeMount

    载入前(完成了data和el数据初始化),但是页面中的内容还是vue中的占位  符,data中的message信息没有被挂在到Bom节点中,在这里可以在渲染前最后一次更改数据的机会,不会触发其他的钩子函数,一般可以在这里做初始数据的获取

4.png

  1. Mounted

  • el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子

  • 如果root实例挂在了一个文档内元素,当mounted被调用时,vm.$el也在文档内

  • 该钩子在服务器端渲染期间不被调用

mounted: function () { 
     this.$nextTick(function () { 
       // 仅在整个视图都被渲染之后才会运行的代码 
   }) 
 }复制代码
  1. beforeUpdate

  • 数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器

  • 数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前

  • 可以在这个钩子中进一步的更改状态,这不会触发附加的重新渲染过程

  • 该钩子在服务器端渲染期间不被调用

  1. Updated
    在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用

当这个钩子被调用时,组件 DOM 已经更新,所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下,你应该避免在此期间更改状态。
如果要相应状态改变,通常最好使用计算属性或watcher取而代之。

updated: function () {           
         this.$nextTick(function () {
         // 仅在整个视图都被重新渲染之后才会运行的代码 
     }) 
}复制代码

!!该钩子在服务器端渲染期间不被调用!!

  1. beforeDestory

  • 实例销毁之前调用。在这一步,实例仍然完全可用

  • 该钩子在服务器端渲染期间不被调用

运用场景:
场景一:离开当前路由,会直接调用
当前路由不使用缓存,离开当前路由会直接调用 beforeDestroy 和 beforeDestroy 销毁
情景二:离开当前路由,不会直接调用,需要程序控制调用
当前路由使用缓存,离开当前路由不会直接调用 beforeDestroy 和 beforeDestroy 销毁,需要使用路由钩子函数主动的调用

beforeLeave(to,from,next){
    this.$destory();
    next();
}复制代码
  1. Destoryed

  • Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁

  • 该钩子在服务器端渲染期间不被调用

5.png

destoryed(){
    window.removeEventListen("resize",this.resizeWin)
}复制代码

Vue实例有一个完整的生命周期,也就是说从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程,我们成为Vue实例的生命周期,钩子就是在某个阶段给你一个做某些处理的机会


作者:天一呦
链接:https://juejin.cn/post/7028876783114174472


文章分类
代码人生
文章标签
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐