vuejs 生命周期理解与应用

182 阅读2分钟

生命周期

主要分为,初始化、运行中、销毁。

生命周期钩子

1. beforeCreate

理解

在实例初始化之后,执行beforeCreate钩子函数。之后再进行数据观测 (data observer) 和 event/watcher事件配。

vue实例初始化_init()中有这样的一个执行顺序:其中initState()是在beforeCreate和created之间

    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm) //初始化
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created') 

在initState()做了这些事情:

    if (opts.props) initProps(vm, opts.props)//初始化Props
    if (opts.methods) initMethods(vm, opts.methods)//初始化methods
    if (opts.data) {
      initData(vm)} else {
      observe(vm._data = {}, true /* asRootData */)}//初始化data
    if (opts.computed) initComputed(vm, opts.computed)//初始化computed

因此,此时data、watcher、methods、computed都不存在。

使用

vue实例只是一个空壳,一般不做操作。

2. created

理解

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

使用

这个时候已经可以使用到数据,也可以更改数据,在这里更改数据不会触发updated函数跟其他的钩子函数,一般可以在这里做初始数据的获取。

3.beforeMount

理解

在挂载开始之前被调用,相关的 render 函数 首次被调用。编译模板为虚拟dom放入到render函数中准备渲染,然后执行beforeMount钩子函数,在这个函数中虚拟dom已经创建完成,但没有挂载,此时DOM还是无法操作的。

使用

一般可以在这里做初始数据的获取。在这里更改数据,不会触发updated跟其他的钩子函数数。

4.mounted

理解

在挂载之后被调用。在这一步渲染出真实dom,并挂载到实例上。 此时,组件已经出现在页面中,数据、真实dom都已经处理好了,事件都已经挂载好了。 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕,可以用 vm.$nextTick 替换掉 mounted。

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

使用

可以在这里操作真实dom等事情。

5.beforeUpdate

理解

当组件或实例的数据更改之后,会立即执行beforeUpdate,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染。

使用

这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。也可以在这个钩子中进一步地修改数据,不会触发附加的重渲染过程(不建议)。

6.updated

理解

虚拟DOM重新渲染 和打补丁之后被调用。不要在此时修改data,否则会继续触发beforeUpdate、updated这两个生命周期,进入死循环!

使用

此时数据已经更改完成,dom也重新render完成,可以操作更新后的虚拟dom。

7.beforeDestroy

理解

当经过某种途径调用$destroy方法后,立即执行beforeDestroy,在这一步,实例仍然完全可用。

使用

一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等。

8.destroyed

理解

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

使用

在这里做善后工作也可以。

beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几个钩子函数,在服务器端渲染期间不被调用

看图

刚接触vue时,看着这个图一头雾水,一脸懵逼,用的多了理解就会更进一步,结合这个图也能帮助自己更好的理解生命周期。用官网那句话:

随着你的不断学习和使用,它的参考价值会越来越高。