Vue的生命周期及调用方法（牢记）

一，Vue的生命周期及调用方法（牢记）

代码演示及解释(牢记）

add:function(){
   this.num++;
},
beforeCreate:function(){
   console.log('1-beforeCreate 初始化之前');
},
created:function(){
   console.log('2-created 创建完成');
},
beforeMount:function(){
   console.log('3-beforeMount 挂载之前');
},
mounted:function(){
   console.log('4-mounted 被挂载');
},
beforeUpdate:function(){
   console.log('5-beforeUpdate 数据更新前');
},
updated:function(){
   console.log('6-updated 被更新后');
},
activated:function(){
   console.log('7-activated');
},
deactivated:function(){
   console.log('8-deactivated');
},
beforeDestroy:function(){
   console.log('9-beforeDestroy 销毁之前');
},
destroyed:function(){
   console.log('10-destroyed 销毁之后')
}

destroyed（销毁）

在切换界面，路由时会对另一个路由界面销毁，可在vue中包裹一个，防止路由销毁。

<keep-alive>
	<router-view>
</keep-alive>

keep-alive

在包装完router-veiw后会有两个属性激活，activated，deactivated
若想排除一个页面不被包装，则exclude=

 <keep-alive exclude="Detail">
       <router-view></router-view>
     </keep-alive>