标签：compB vue created deactivated activated compA 组件

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后绑定组件名，渲染当前组件；

标签：compB,vue,created,deactivated,activated,compA,组件
来源： https://www.cnblogs.com/coderwhytop/p/14776453.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。