vue.js中created()、activated()、deactivated()理解

created()：在創建vue對象時，當html渲染之前觸發；但是注意，全局vue.js不強制刷新或者重啟時只創建一次，也就是說，created()只會觸發一次；

activated()：在vue對象存活的情況下，進入當前存在activated()函數的頁面時，一進入頁面就觸發；可用於初始化頁面數據、keepalive緩存組件后，可執行方法；

deactivated()：離開組件時執行；

注意：activated()和deactivated()只有在<keep-alive></keep-alive>包裹的時候才有效；

例：

新建兩個組件，compA，compB：

<template>
<div class="app">
我是組件A
</div>
</template>

<script>
export default{
name: "compA",
data(){
return {

}
},
created(){
console.log('created');
},
activated(){
console.log('activated');
},
deactivated(){
console.log('deactivated');
}
}
</script>

同理建compB；

在view中引用兩個組件：

<template>
<div class="app">
<div class="bth">
<button @click="currentComponent='compA'">A</button>
<button @click="currentComponent='compB'">B</button>
</div>
</div>
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
</template>

<script>
import compA from './component/compA'
import compB from './component/compB'
export default{
name: "App",
component: {
compA, compB
},
data(){
return {
currentComponent: 'compA'
}
}
}
</script>

 

在點擊切換B組件時，A組件的deactivated()會執行；

注：:is后綁定組件名，渲染當前組件；