Vue的声明周期

Posted lijieqiqi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue的声明周期相关的知识,希望对你有一定的参考价值。

vue实例的生命周期

  • 什么是声明周期:从 Vue 实例创建、运行、到销毁期间,总是伴随着各种各样的事件,这些事件,统称为生命周期!

  • 声明周期钩子:就是声明周期事件的别名而已

  • 主要的声明周期函数分类

    • 创建期间的生命周期函数

      • beforeCreate:实例刚在内存中被创建出来,此时,还没有初始化好 data 和methods属性

      • created:实例已经在内存中创建OK,此时 data 和 methods 已经创建OK,此时还没有开始编译模板

      • beforeMount:此时已经完成了模板的编译,但是还没有挂载到页面中

      • mounted:此时已经将编译好的模板,挂载到了页面指定的容器中显示

    • 运行期间的生命周期函数

      • beforeUpdate:状态更新之前执行此函数,此时 data 中的状态值是最新的,但是在界面上显示的数据还是旧的,因为此时还没有开始重新渲染 DOM 节点

      • updated:实例更新完毕之后调用此函数,此时 data 中的状态值和界面上显示的数据,都已经完成了更新,界面已经被重新渲染好了!

    • 销毁期间的声明周期函数

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

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

 

beforeCreate 实例创建阶段

  • 说明

    • 第1个声明周期函数,表示实例完全被创建出来之前会执行他

    • 注意: 在 beforeCreate 声明周期函数执行的时候,data 和 methods中的数据都还没初始化

  • 类型Function

  • 详细

    在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用。

  • 参考生命周期图示

created

  • 说明

    • 第2个生命周期函数,表示实例已经在内存中创建OK

    • 注意: 在 created 中,data 和 methods 都已经被初始化好了!

    • 如果要调用 methods 中的方法,或者操作 data 中的数据,最早,只能在 created 中操作

  • 类型Function

  • 详细

    在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

  • 参考生命周期图示

beforeMount 模板渲染阶段

  • 说明

    • 第3个声明周期函数,表示 模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中

    • 注意: 在 beforeMount 执行的时候,页面中的元素,还没有被真正替换过来,只是之前写的一些模板字符串

  • 类型Function

  • 详细

    在挂载开始之前被调用:相关的 render 函数首次被调用。

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

  • 参考生命周期图示

mounted

  • 说明

    • 第4个声明周期函数,表示,内存中的模板,已经真实的挂载到了页面中,用户已经也以看到渲染好的页面了

    • 意: mounted 是实例创建期间的最后一个声明周期函数,当执行完 mounted 就表示,实例已经被完全创建好了,此时如果没有其他操作的话,这个实例,就静静的躺在内存中,一动不动

    • 如果要操作页面上的 DOM 节点,最早要在 mounted 中执行

    • 只要执行完了 mounted ,就表示整个 Vue 实例已经初始化完毕了 此时组件已经脱离了创建阶段;进入了运行阶段

  • 类型Function

  • 详细

    el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。

    注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted

     mounted: function () 
      this.$nextTick(function ()
        // Code that will run only after the
        // entire view has been rendered
      )
     

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

  • 参考生命周期图示

beforeUpdate 组件运行阶段

这两个事件,会根据 data 数据的改变,有选择性的触发 0次 到 多次

  • 说明

    • 这时候,表示 我们界面还没有被更新 【数据被更新了吗? 数据肯定被更新了】

    • 得出结论: 当执行 beforeUpdate 的时候,页面中的显示的数据,还是旧的,此时 data 数据是最新的,页面尚未和 最新的数据保持同步

  • 类型Function

  • 详细

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

    该钩子在服务器端渲染期间不被调用,因为只有初次渲染会在服务端进行。

  • 参考生命周期图示

updated

  • 说明

    • updated 事件执行的时候,页面和 data 数据已经保持同步了,都是最新的

  • 类型Function

  • 详细

    由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。

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

    注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕,可以用 vm.$nextTick 替换掉 updated

     updated: function () 
      this.$nextTick(function ()
        // Code that will run only after the
        // entire view has been re-rendered
      )
     

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

  • 参考生命周期图示

activated

deactivated

beforeDestroy 销毁阶段

  • 说明

    • 当执行 beforeDestroy 钩子函数的时候,Vue实例就已经从运行阶段,进入到了销毁阶段;

    • 当执行 beforeDestroy 的时候,实例身上的所有的 data 和所有的 methods,以及过滤器、指令.... 都处于可用状态,此时,还没有真正执行销毁的过程

  • 类型Function

  • 详细

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

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

  • 参考生命周期图示

destroyed

  • 说明

    • 当执行到 destroyed 函数的时候,组件已经被完全销毁了,此时,组件中所有的数据、方法、指令、过滤器都已经不可用了

  • 类型Function

  • 详细

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

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

  • 参考生命周期图示

errorCaptured

2.5.0+ 新增

  • 类型(err: Error, vm: Component, info: string) => ?boolean

  • 详细

    当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

    你可以在此钩子中修改组件的状态。因此在模板或渲染函数中设置其它内容的短路条件非常重要,它可以防止当一个错误被捕获时该组件进入一个无限的渲染循环。

    错误传播规则

    • 默认情况下,如果全局的 config.errorHandler 被定义,所有的错误仍会发送它,因此这些错误仍然会向单一的分析服务的地方进行汇报。

    • 如果一个组件的继承或父级从属链路中存在多个 errorCaptured 钩子,则它们将会被相同的错误逐个唤起。

    • 如果此 errorCaptured 钩子自身抛出了一个错误,则这个新错误和原本被捕获的错误都会发送给全局的 config.errorHandler

    • 一个 errorCaptured 钩子能够返回 false 以阻止错误继续向上传播。本质上是说“这个错误已经被搞定了且应该被忽略”。它会阻止其它任何会被这个错误唤起的 errorCaptured 钩子和全局的 config.errorHandler

以上是关于Vue的声明周期的主要内容,如果未能解决你的问题,请参考以下文章

VUE 的声明周期

Vue3声明周期的理解

Vue基础-生命周期

前端Vue框架 04 路由:逻辑跳转路由传参 项目组件的数据局部化处理data(){ return{} } 组件的声明周期 组件间通信 各种第三方插件(vuex,axios,ele(

前端vue经典面试题78道(重点详细简洁)

Vue 生命周期钩子解读