本文主要介绍在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激活的使用方法，请关注我们的其他相关文章！