vue的生命周期

Vue的生命周期

一、vue的生命周期是什么

讲生命周期，当然首先看到vuejs官网的图片详解啦！

1、beforeCreated（）

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

2、created（）

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

3、beforeMount（）

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

4、mounted（）

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

5、beforeUpdate（）

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

6、updated（）

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。

7、beforeDestroy（）

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

8、destroyed（）

Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。

二、vue生命周期的在项目中的执行顺序

...

data () {

    return {

    rendered: false,

}

}

...

1.beforeCeate(){

    console.log(this.rendered);    // undefined  


}

2.created() {

    console.log(this.$el);//undefined

    console.log(this.rendered);  // false

}


3.beforeMount() {

    console.log(this.$el)；//undefined

}




4.mounted() {

    console.log(this.$el);

}




5.beforeDestroty(){

    console.log(this.$el);

    console.log(this.rendered); 

}




6.destroyed() {

    console.log(this.$el);

    console.log(this.rendered);

}

三、vue中内置的方法 属性和vue生命周期的运行顺序（methods、computed、data、watch、props)

从第一二点可知道data的初始化是在created时已经完成数据观测(data observer)，并且诸如methods、computed属性 props等已经初始化；那问题来了，
data props computed watch methods他们之间的生成顺序是什么呢？

根据翻看vue源码可知：

props => methods =>data => computed => watch; 懂了没 

四、自己构造的方法与vue生命周期的运行顺序 如show这些

往往我们在开发项目时都经常用到 $refs 来直接访问子组件的方法，但是这样调用的时候可能会导致数据的延迟滞后的问题，则会出现bug。

解决方法则是推荐采取异步回调的方法，然后传参进去，严格遵守vue的生命周期就可以解决 推荐 es6 的promise。

示例代码：

handleAsync () {

    return new Promise(resolve=>{

       const res="";

        resolve(res)

})

}


async handleShow() {

    await this.handleAsync().then(res=>{

    this.$refs.child.show(res);

})

}

五、总结

vue 的生命周期，总得来说就是实例的创建和销毁这段时间的一个机制吧。也是vue框架的数据间的交互通信。其实现在看来也没那么难，但是vue的源码实现这一套机制那是难得一逼，涉及到复杂的算法如diff算法，