谈谈vue生命周期

以下主要从几个方面来讲：

1.vue的生命周期是什么

2.vue生命周期的在项目中的执行顺序

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

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

5.总结

一、vue的生命周期是什么

    vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有:

    beforeCreate

    created

    beforeMount

    mounted

    (

        beforeUpdate

        updated

    )

    beforeDestroy

    destroyed

    对应的中文就如其字面意思，英文不好的童鞋可以有道翻翻

    好了，这里要上图啦~~~

 

 

二、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.beforeDestroy(){

    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框架的数据间的交互通信。

作者：CalvinXie
链接：https://www.jianshu.com/p/410b6099be69
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。