vue activated,vue中activated和deactivated

vue activated,vue中activated和deactivated,vue中activated的用法

本文主要介绍在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的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: