Vue中的生命周期介绍

什么是vue的生命周期

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

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

• beforeCreate
• Created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

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

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

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

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

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

先看下面的一段代码：

    
    
    
    
    
    
    


    

        
        更新数据
        销毁组件 
    

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

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

数据更新前：

数据更新后：

控制台显示的打印信息：

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

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

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

到此这篇关于Vue生命周期的文章就介绍到这了。希望对大家的学习有所帮助，也希望大家多多支持脚本之家。