Vue中的生命周期实例分析

这篇文章主要介绍"Vue中的生命周期实例分析"，在日常操作中，相信很多人在Vue中的生命周期实例分析问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答"Vue中的生命周期实例分析"的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

什么是vue的生命周期

Vue中的生命周期是指组件从创建到销毁的一系列过程。看下面这张官方文档的图：

从图片中可以看出Vue的整个生命周期包括8个状态，按照先后顺序分别为：

• beforeCreate

• Created

• beforeMount

• mounted

• beforeUpdate

• updated

• beforeDestroy

• destroyed

Vue组件的生命周期共分为三个阶段，如下图所示：

创建阶段和销毁阶段在组件的生命周期中只会执行一次，而更新阶段会执行多次。

先看一下创建阶段完成的事情：

在看更新阶段完成的事情：

最后在看一下销毁阶段完成的事情：

先看下面的一段代码：

                                
                更新数据        销毁组件     

在控制台的console里面查看运行后的效果：

然后点击"更新数据"按钮，会看到input绑定的数据发生变化：

数据更新前：

数据更新后：

控制台显示的打印信息：

最后点击"销毁组件"按钮，查看控制台显示的打印信息：

这样，一个完整的Vue实例生命周期就结束了。

注意：Vue组件被销毁以后，这时如果在更新数据就不会有任何反应了，因为组件已经被销毁

到此，关于"Vue中的生命周期实例分析"的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注网站，小编会继续努力为大家带来更多实用的文章！