【Vue生命周期详解】

细谈Vue声明周期

  • 什么是生命周期?
    • Vue的生命周期
    • beforeCreate( 创建前 ):
    • created ( 创建后 ):
    • beforeMount:
    • mounted:
    • beforeUpdate:
    • updated:
    • beforeDestroy:
    • destroyed:

什么是生命周期?

生命周期(Life Cycle)的概念应用很广泛,特别是在政治、经济、环境、技术、社会等诸多领域经常出现,其基本涵义可以通俗地理解为“从摇篮到坟墓”(Cradle-to-Grave)的整个过程。对于某个产品而言,就是从自然中来回到自然中去的全过程,也就是既包括制造产品所需要的原材料的采集、加工等生产过程,也包括产品贮存、运输等流通过程,还包括产品的使用过程以及产品报废或处置等废弃回到自然过程,这个过程构成了一个完整的产品的生命周期。

Vue的生命周期

在面向对象的语言中,存在这个概念,就是说:变量,对象,等,在定义了之后,可以进行相关的操作,但是,有可能在某种条件下他们就不需要了,这个时候就可以进行销毁,析构函数,起的就是销毁一个对象,目的是回收一部分内存,这就和人的“生命周期”是一样的,这个变量和或对象就不存在了!

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

下例图展示了Vue的生命周期:
【Vue生命周期详解】_第1张图片
在Vue的生命周期中,可分为四部分八个函数,分别是创建(beforeCreate(),created ()),挂载(beforeMount(),mounted()),更新(beforeUpdate(),updated()),销毁(beforeDestroy(),destroyed()),通常我们把这八个钩子归为四个模块,也就是上面说的四块流程。

beforeCreate( 创建前 ):

作用:在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。

在实例初始化之后,数据观测和事件配置之前被调用,此时组件的选项对象还未创建,实例完全被创建出来之前,vue 实例的挂载元素$el和数据对象 data 都为 undefined,还未初始化。因此无法访问methods, data, computed等上的方法和数据

注意:此时的el还没有被加载

created ( 创建后 ):

在实例创建完成后被立即同步调用。在这一步中,实例已完成对选项的处理,意味着以下内容已被配置完毕:数据侦听、计算属性、方法、事件/侦听器的回调函数。然而,挂载阶段还没开始,且 $el property 目前尚不可用。

beforeMount:

在挂载开始之前被调用:相关的 render 函数首次被调用。(render()----虚拟DOM),vue 实例的 $el 和 data 都已初始化,挂载之前为虚拟的 dom节点,模板已经在内存中编辑完成了,但是尚未把模板渲染到页面中。data.message 未替换。

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

mounted:

实例被挂载后调用,这时 el 被新创建的vm.$ el 替换了。如果根实例挂载到了一个文档内的元素上,当 mounted 被调用时 vm.$ el 也在文档内。
*注意:注意 mounted 不会保证所有的子组件也都被挂载完成。如果你希望等到整个视图都渲染完毕再执行某些操作,可以在 mounted 内部使用 vm.$nextTick: *

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

beforeUpdate:

当 data 变化时,会触发beforeUpdate方法 。data 数据尚未和最新的数据保持同步。

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

updated:

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

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

注意,updated 不会保证所有的子组件也都被重新渲染完毕。如果你希望等到整个视图都渲染完毕,可以在 updated 里使用 vm.$nextTick:

beforeDestroy:

当实例销毁之前调用。在这一步,实例仍然完全可用。
this还可以获取到实例

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

destroyed:

实例销毁后调用。该钩子被调用后,对应 Vue 实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

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

参考Vue API官网

你可能感兴趣的:(Vue2.0知识点大汇总,vue.js,javascript,前端,前端框架)