走进Vue生命周期

天一呦
1,583 阅读3分钟

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

  2. 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实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会

avatar
文章
阅读
粉丝