本文主要介绍在vue中激活的用法，帮助你更好的理解和使用vue框架。感兴趣的朋友可以了解一下。
点火电极
当keep-alive包装动态组件时，它将缓存不活动的组件实例，而不是销毁它们。它是一个抽象组件，本身不呈现DOM元素，也不出现在父组件链中。
说白了，keep-alive包装的组件都会被缓存。
废话不多说，直接上例子。
现在我们创建两个子组件，conpoment1，compoment2，包含以下内容
模板
div class='wrapper '
ul class='content'/ul
button class=' Add ' id=' Add ' @ click=' Add '添加子元素/按钮
/div
/模板
脚本
导出默认值{
data() {
return { }；
},
方法：{
add() {
let ul=document . getelementsbyclassname(' content ')[0]；
let Li=document . createelement(' Li ')；
Li.innerHTML='我是添加的元素'；
ul.appendChild(李)；
}
}
};
/脚本
风格
/风格
无需解释代码，只需点击按钮即可在ul中动态添加一个li元素。
然后我们在路由里注册，然后回到APP.vue修改配置。
模板
div id='应用程序'
点火电极
路由器-视图/
/保持活力
/模板
这样我们会发现，当我们切换路由时，我们之前添加的子元素会保存在那里。
在这种情况下，所有的页面都被缓存，一些需要重新加载但不需要缓存的页面可以通过v-for实现。当然，我们可以在route中设置一个键值来决定组件是否需要缓存，如下所示。
//index.js
{
路径：“/1”，
名称：“组件1”，
组件：组件1，
元：{
KeepAlive: true //确定是否缓存
}
},
{
路径：“/2”，
名称：“组件2”，
组件：组件2，
元：{
keepAlive: false
}
},
那么我们只需要在我们的App.vue中判断它的keepAlive值就可以了
div id='应用程序'
点火电极
router-view v-if=' $ route . meta . keepalive '/
/保持活力
路由器-查看v-if='！$route.meta.keepAlive' /
/模板
此时，当我们返回页面添加子元素并切换路由时，我们会发现只有components1中的组件有缓存。
激活的
先说这个生命周期挂钩。官网说服务器端渲染时不调用。
说白了就是挂载之后更新之前调用。但是，如果该组件中没有使用缓存，也就是说，它没有被keep-alive包装，activated将不起作用。我们就试试吧。
//in //components1
已创建(){
Console.log('1激活创建的钩子函数')；
},
已激活(){
Console.log('1激活已激活的钩子函数')；
},
已安装(){
Console.log('1激活挂载的钩子函数')；
}
//in //components2
已创建(){
Console.log('2激活创建的钩子函数')；
},
已激活(){
Console.log('2激活已激活的钩子函数')；
},
已安装(){
Console.log('2激活挂载的钩子函数')；
}
我们分别在两个组件中打印出它的钩子函数的执行。我们可以看到
当执行components1时，它执行激活的钩子函数，而components2不执行。因为components2没有被keep-alive包装，所以它不会激活钩子函数。
当我们再次转换路线时，我们再次找到了神奇的地方。
组件1只执行激活钩子的钩子函数，组件2执行创建和挂载的钩子函数。
这就是缓存的原因。组件缓存组件，这样它们就不会再次创建和挂载它们。
简单来说，activated()函数是页面激活后的一个钩子函数，一进入页面就被触发；
所以我们在使用组件缓存的时候，如果要在每次切换的时候发送一个请求，就需要把请求函数写在activated，而写在created或者mounted只有在组件第一次加载的时候才会起作用。
补充：
除了激活，保活组件还有停用功能的钩子。
激活的
类型：func
触发时间：当保活组件被激活时使用；
无效的
类型：func
触发时间：当保活组件去激活时调用；
以上是vue中activated的使用细节。更多关于vue激活的使用方法，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。