一直搞不懂vue中的生命周期，怎么才能搞清楚？

vue官网说，“你暂时不用搞清楚这些...",我觉得你既然准备用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

    对应的中文就如其字面意思，英文不好的童鞋可以寻找翻译软件哦！谢谢！

你好，我是「前端雨爸」，希望我的回答对你有所帮助。

我的回答

首先，理解对于有生命周期的框架来说非常重要，这样能大致把握整个代码的不同阶段的运行过程，减少错误代码的出现。

那怎么能快速掌握生命周期呢？

1. 看官网相关的生命周期图谱

无论 React 还是 Vue 都提供了生命周期的图例，试着去阅读它，明白每个生命周期的 api 钩子在其中的切入点。知道发生在那个阶段。

下图摘自 Vue 官网：

2. 动手实践

在一个组件内，把所有的生命周期方法都给实现一遍，然后看它们在控制台打印的顺序。

上图，摘自我自己理解生命周期过程所做的调试。

最后

相信这样，会对理解生命周期有个帮助。

如果觉得不错，欢迎关注「前端雨爸」，让我们一同在前端路上成长进步。

写这章博客不是为了要获得多少赞，主要是利用vue开发项目时踩的坑太多了。自己曾不理解或者遇到的问题再这里搞清楚，不想后来的人再遇到这样的坑，做技术的要懂得分享，做人嘛，最重要的是开心。

vue官网说，“你暂时不用搞清楚这些...",我觉得你既然准备用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.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算法，有兴趣的童鞋可以去深入了解一下。喜欢的童鞋点个赞 加关注啊哈哈，又来骗赞啦

哔哩哔哩找个视频来看，然后找个例子跑一跑

关于Vue的生命周期，怎么样才能搞懂，作为web前端程序员，我也用口语化的方式说一说吧，到底什么是Vue的生命周期吧？我个人觉得可以从一下几个方面说说：

1、什么是生命周期？

这个从字面上理解，大家都应该知道，生命周期，就像人的生命一样，从出生到老去的过程。在这个过程，我们在合适的年龄时段里可以做某一些事情。比如小时候爱尿床，走路，上学，工作，娶老婆等等哈哈，大概就这意思。

那么关于Vue的生命周期也是类似，就是Vue实例从创建到销毁的过程，这就是生命周期。专业点说法，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、销毁等一系列过程， 我们称这是 Vue 的生命周期。

2、Vue组件有哪些生命周期钩子？

上面已经说了生命周期是从创建->销毁的过程，那么这个过程有几个阶段呢？

主要有8个阶段：

创建前/后， 载入前/后， 更新前/后， 销毁前/销毁后。

也就是：

beforeCreate/created、 beforeMount/mounted、 beforeUpdate/updated、boforeDestroy/destroyed

具体每个生命周期钩子详情，内容过多，可以看官网说明了，有生命周期图。

3、生命周期的作用是什么？

知道了生命周期，那么这些生命周期有什么作用呢？

简单点说就是，有了这些生命周期钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。

更简单一点说就是： 让我能更好的做一些事情吧。

从上面，我们知道了生命周期，那么接下来就是，我们要知道一些用法，

比如：

1、第一次页面加载会触发那几个钩子函数？

会触发beforeCreate、created、 beforeMount、 mounted这几个钩子函数

2、DOM渲染在哪个周期中就已经完成？

DOM 渲染在 mounted 中就已经完成了

3、异步请求一般在那个周期中调用？

一般推荐在created中做异步请求，当然 beforeMount、mounted 也是可以的。

为什么呢， 通过源码可以看出，因为在这三个钩子函数中，data 已经创建。

4、Vue中内置的方法属性和Vue生命周期的运行顺序是怎么样的？

props => methods =>data => computed => watch。

当然我们能看懂源码的话是最好的了，就能知道一些为什么了。

比如： 为什么created钩子函数中可以访问到数据?

简单看下源码中有：

而其中的initState(vm)函数的作用就是初始化 props、methods、data、watch、computed 等属性的，所以created可以访问到数据，而beforeCreate就不行。

举一反三，带着很多问题和为什么去看学习，就可以更好地更深地懂它了。也可以看看别人写的文章，因为网上有很多高手分析的文章很不错。

比如，在 mounted 钩子函数中可以访问到 DOM，在 destroy 钩子函数中，我们可以做一些定时器销毁工作等等。

写这章博客不是为了要获得多少赞，主要是利用vue开发项目时踩的坑太多了。自己曾不理解或者遇到的问题再这里搞清楚，不想后来的人再遇到这样的坑，做技术的要懂得分享，做人嘛，最重要的是开心。

vue官网说，“你暂时不用搞清楚这些...\",我觉得你既然准备用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.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 =\u003e methods =\u003edata =\u003e computed =\u003e watch; 懂了没

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

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

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

示例代码：

handleAsync () {

return new Promise(resolve=\u003e{

const res=\"\";

resolve(res)

})

}

...

async handleShow() {

await this.handleAsync().then(res=\u003e{

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

})

}

...

五、总结

vue 的生命周期，总得来说就是实例的创建和销毁这段时间的一个机制吧。也是vue框架的数据间的交互通信。其实现在看来也没那么难，但是vue的源码实现这一套机制那是难得一逼，涉及到复杂的算法如diff算法，有兴趣的童鞋可以去深入了解一下。喜欢的童鞋点个赞 加关注啊哈哈，又来骗赞啦

多找视频来看，多做项目，多分析，会慢慢理解的！