Vue的生命周期

介绍

生命周期是Vue的面试题之一，需要记住它的8个阶段。

任何对象都有它自己的生命周期，比如人类的生老病死。在Vue中也有着它自己的生命周期，分为创建、载入、更新、销毁，而在这些阶段又加上了前后两个钩子函数，具体到

创建前beforeCreate：data，computed，watch，methods 上的方法和数据均不能访问。
创建后created：data、props、computed初始化完成，当前阶段可以访问数据和方法。
载入前beforeMount：模板编译完成，但未挂载到页面。
载入后mounted：初始化完成，进入到运行阶段。
更新前beforeUpdate：
更新后updated：
销毁前beforeDestroy：销毁前，可以做一些提示信息
销毁后destroyed：

前后两个阶段的钩子函数方便开发者处理，下面给出Vue生命周期的例子

<html>
   <head>
      <title>Vue的生命周期</title>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.min.js">
      </script>
   </head>
   <body>
      <div id = "intro" style = "text-align:center;">
         <h1>{{ message }}</h1>
		 <button @click="udp">修改</button>
		 <button @click="quit">销毁</button>
      </div>
      <script type = "text/javascript">
         var vue_det = new Vue({
            el: '#intro',
            data: {
               message: 'Vue的生命周期'
            },
			methods:{
			  udp(){
			    console.log("修改msg");
				this.message = "测试生命周期update";
			  },
			  quit(){
			    console.log("调用销毁方法");
				this.$destroy()//销毁
			  }
			},
			beforeCreate: function(){
				console.log('创建前');
			},
			created: function(){
				console.log('创建后');
			},
			beforeMount: function(){
				console.log('载入前');
			},
			mounted: function(){
				console.log('载入后');
			},
			beforeUpdate: function(){
				console.log('修改前');//点击修改按钮触发
			},
			updated: function(){
				console.log('修改后');//点击修改按钮触发
			},
			beforeDestroy: function(){
				console.log('销毁前');//点击销毁按钮触发
			},
			destroyed: function(){
				console.log('销毁后');//点击销毁按钮触发
			}
         });
      </script>
   </body>
</html>

测试一下

首次载入的效果

Vue的生命周期

当点击修改和销毁后的效果

Vue的生命周期

介绍

相关生命周期面试问题