Vue生命周期

  每个Vue实例创建时,都会经历一系列的初始化过程,同时也会调用相应的生命周期钩子,我们可以利用这些钩子,在合适的时机执行我们的业务逻辑。熟悉jQuery的小伙伴,一定知道它的ready()方法比如以下示例:

$(document).ready(function(){
        // DOM 加载完成后,会执行这里的代码
});

Vue的生命周期钩子与之类似,比较常用的有:

created  实例创建完成后调用,此阶段完成了数据观测等,但尚未挂载,$el还不可用。需要初始化处理一些数据时会比较有用。

mounted  el挂载到实例上后调用,一般我们的第一个业务逻辑会在这里开始。

beforeDestroy  实例销毁之前调用。主要解绑一些使用使用addEventListener监听的事件等。

  Vue实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程,我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程,就是生命周期。

  在Vue的整个生命周期中,它提供了一系列的事件,可以让我们注册js方法,可以让我们达到控制整个过程的目的地值得注意的是,在这些事件响应方法中的this直接指向的是vue的实例

下面是Vue生命周期的示例图,更清晰的观察整个生命周期便于了解

嗯,就酱~~

参考:Vue实战---梁灏

原文地址:https://www.cnblogs.com/jin-zhe/p/9834902.html