vue的keep-alive的正确用法,vue中keep-alive

　　本文主要介绍了keepAlive在Vue项目中的使用说明，具有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。

目录

　　 keepAlive的使用有三个步骤：keepAlive问题说明原因包括和排除最大

keepAlive的使用

　　在开发过程中，如果遇到需要经常缓存的页面，并且页面较长，需要记录滚动位置，那么就需要使用keepAlive。

一共有三个步骤

　　1.首先，在路由的mate属性中记录keepAlive，如果需要缓存，将其设置为true。

　　路径：“/index”，

　　名称：“”索引，

　　组件：()=导入(././index/index )，

　　meta:{keepAlive:true}

　　2.创建路由器实例时添加scrollBehavior方法(keepAlive只生效)。

　　让路由器=新路由器({

　　Mode:hash ，//1，hash hash:有#号。2.历史历史：没有#。

　　Base:process.env.BASE_URL，//自动获取根路径

　　scrollBehavior:(to，from，position)={

　　如果(位置){

　　返回位置

　　}否则{

　　返回{x:0，y:0}

　　}

　　},

　　3.在需要缓存的路由器视图包上保持活动(路由器视图应该有两个，一个缓存时显示，一个不缓存时显示，有时不需要缓存)。

　　点火电极

　　路由器视图v-if= $ router . meta . keepalive /路由器视图

　　/保持活力

　　路由器-查看v-if=！$ router . meta . keepalive /router-view

　　注意

　　keep-alive中的组件有两个生命周期的挂钩函数，即激活和停用，其中activated在第一次呈现组件时调用，然后在每次激活缓存组件时调用。所以一般来说，它里面的代码需要和创建的函数里面的代码一样。

keepAlive的注意事项

问题描述

　　今天测试中提到了一个bug。当您重复进入同一个构建时，mounted和created中的方法不会触发，从而导致不同的页面显示。

原因

　　当keep-alive包装动态组件时，它缓存不活动的组件实例，而不是销毁它们。与transition类似，keep-alive是一个抽象组件：它本身不呈现DOM元素，也不出现在父组件链中。(因此不会触发已安装和已创建的事件挂钩)

　　当一个组件被切换到保持活动状态时，其激活和去激活的钩子函数将被相应地执行。

include and exclude

　　Include(缓存文件)和exclude(非转储文件)属性允许组件有条件地缓存。

　　！-逗号分隔的字符串-

　　保持活动包括=a，b

　　组件：is= view /组件

　　/保持活力

　　！-正则表达式(使用“v-bind ”)-

　　keep-alive :include=/ab/

　　组件：is= view /组件

　　/保持活力

　　！-数组(使用“v-bind ”)

　　keep-alive :include=[a ， b]

　　组件：is= view /组件

　　/保持活力

max

　　可以缓存的组件实例的最大数量。

　　保持活动状态：max=10

　　组件：is= view /组件

　　/保持活力

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。