keep-alive

最新推荐文章于 2021-06-01 15:10:43 发布
最新推荐文章于 2021-06-01 15:10:43 发布
阅读量100 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GYF_123/article/details/114240482
版权

keep-alive是一个Vue的内置组件，它可以用来缓存组件。
它可以使包含的组件保留状态，避免重新渲染，缓存组件

在router-view上使用可以缓存路由组件

有两个参数 include 只有匹配的组件会缓存 exclude 任何匹配的组件不会缓存

若组件被包含，则多出下面两个钩子函数。

Vue2
activated: 被包含中的组件，会多出来两个生命周期钩子函数。被激活时执行
deactivated： 比如从A组件，切换到B组件，A组件消失时执行。

Vue3
onActivated(): 被包含中的组件，会多出来两个生命周期钩子函数。被激活时执行
onDeactivated(): 比如从A组件，切换到B组件，A组件消失时执行。

@gaoyanfeng
关注
专栏目录
vue keep-alive 动态删除组件缓存的例子
10-16
根据提供的文件信息，以下是关于Vue中keep-alive组件缓存动态删除的知识点详细说明： 首先，什么是Vue中的keep-alive组件呢？keep-alive是Vue提供的一个抽象组件，它主要用于缓存动态组件，避免组件切换过程中导致...
keep-alive的介绍及使用
01-08
如果需要频繁切换路由，这个时候就可以考虑用keep-alive了，来达到避免数据的重复请求的目的 keep-alive用来缓存组件,避免多次加载相应的组件,减少性能消耗。 简单一点来说就是从页面A链接到其他页面后回退到页面A...
vue组件 keep-alive 和 transition 使用详解
10-16
在Vue.js中，`keep-alive`和`transition`组件是两种非常重要的功能，它们分别用于组件的状态管理和过渡效果。 1. **`keep-alive`组件**：`keep-alive`的主要作用是缓存组件，使得组件的状态在切换时得以保留，避免...
vue keep-alive请求数据的方法示例
08-27
Vue Keep-Alive 请求数据的方法示例 Vue Keep-Alive 是 Vue 框架中的一个功能强大且实用的机制，可以缓存组件的状态，减少不必要的组件重渲染，提高应用程序的性能。但是，在使用 Keep-Alive 时，可能会遇到一些...
vue的keep-alive用法技巧
10-16
Vue的Keep-alive是Vue框架中的一个内置组件，它主要的功能是在组件之间切换时，能够缓存不活动的组件实例，避免重复渲染，从而提高页面的性能。Keep-alive可以包裹动态组件，以便实现组件的缓存策略。在使用时，Keep...
Vue3动画路由转场
码字员的博客
03-02 1883
<template> <div id="app"> <router-view v-slot="{Component}"> <keep-alive> <transition :name="animation"> <component :is="Component"/> </transition>
前端浏览器兼容性问题及解决方案
码字员的博客
03-12 1105
不同浏览器的内核不尽相同，所以各个浏览器对页面的解析存在一定的差异。 浏览器内核主要分为两种：一是渲染引擎，另一个是js引擎 所以浏览器兼容性问题一般指：Css兼容和Js兼容 一、Css兼容 1.不同浏览器的标签默认的margin和padding不同 **问题症状：**随便写几个标签，不加样式控制的情况下，各自的margin和padding差异比较大 碰到频率： 100% 解决方案： 1.Css里面写*{margin:0,padding:0},但是性能不好 2.一般我们会引入reset.css样式重置 .
cnpm-v 或 cnpm i 没有反应
码字员的博客
06-01 713
方法一。 npm清理缓存：npm cache clean -f 方法二。 第一种不行，就第二种 npm config set registry http://registry.cnpmjs.org
Vue2生命周期和Vue3生命周期
码字员的博客
03-01 560
每个组件都是独立的，都有属于它自己的生命周期，创建、挂载、更新、销毁就是生命周期 生命周期有8个分别是： beforeCreate:创建前 ---- created:创建后 beforeCreate(创建前)： 在实例初始化之后，这个时候this还不能使用，data中的数据、methods的方法、以及watcher中的事件都不能获得 created(创建后)： 实例已经创建完成之后被调用，这个时候可以操作vue中的数据和方法，但是不能对dom节点进行操作 beforeMount:挂载前 — mounte
slot插槽
码字员的博客
02-28 470
slot简单的说就是父组件想在要往子组件里面插入一点内容 slot分为三种：基本使用、作用域插槽、具名插槽 基本使用： <!-- 父组件 --> <template> <div> <!-- 子组件 --> <SlotDemo :url="website.url"> {{website.title}} </SlotDemo> </div> </templte> <script>
Vue中data不能检测数组
码字员的博客
03-12 300
data(){ return( arr:['a','b','c'] ) } this.arr[1] = 'a1' // 不是响应式的，也就是不能改变 this.arr.length = 2 //不是响应式的 //解决方案： //Vue.set(this.arr,1,a1) //第二种方案： //this.arr.splice(newLength)
动态组件和异步组件
码字员的博客
02-28 256
动态组件的用法 ： :is= "属性名" // is 必须是动态属性 component标签: < component :is=“NextTickName” /> 动态组件怎么用呢？ 根据原始数据动态渲染的场景，组件类型不确定的情况下。 比如说新闻落地页。 <!--<component :is="NextTickName"/>--> <div v-for="(val,key) in newsData" :key="key"> <component
axios二次封装
码字员的博客
03-03 241
在src目录下创建一个utils文件，里面有三个JS文件，分别时config.js（url、请求方式），core.js（请求拦截，响应拦截，请求超时），index.js（接口文件） 首先在core.js里面引入axios和vant组件的Toast弹框 设置超出时间，以及baseURL 请求拦截、响应拦截 //请求拦截 //请求发送之前 // var loading = null; axiosInstance.interceptors.request.use((config)=>{ //拦
mixin混入
码字员的博客
03-01 204
当多个组件有相同的逻辑的时候，使用mixin抽离出来。 使用的方法：首先创建一个mixin.js文件，里面可以写多个组件有相同的逻辑内容，在vue组件里引入mixin.js mixin的问题： 变量来源不确定，不易于阅读 多个mixin可能有命名冲突 mixin和组件可能出现多对多的关系，复杂度较高。 多对多：一个mixin可以被多个组件使用，一个组件也可以引入多个mixin，这就是一个多对多的关系 ...
手写深拷贝
码字员的博客
03-11 164
手写深拷贝(递归)： const obj1 = { age:20, name:'张三', address:{ city:'beijing' }, arr:['a','b','c'] } const obj2 = deepClone(obj1); obj2.address.city = "shanghai" obj2.arr[0] = 'a1' console.log(obj1.address.city) console.log(obj.arr[0]) //深拷贝 function deep
$nextTick
码字员的博客
02-28 162
首先我们要知道Vue是异步渲染的框架。 什么叫异步渲染？ 当data改变之后，DOM不会立刻去渲染，而是data改变后，它会异步去渲染，需要在$nextTick里面去把DOM渲染之后的结果拿出来。以获取最新的DOM节点。 <div id="app"> <ul ref="ul1"> <li v-for="(item , index) in list" :key="index"> {{item}} </li> </ul> &lt
小程序生命周期
码字员的博客
03-09 110
Page({ data:{}, onLoad:function(options){ //页面创建时执行 }, onShow:fucntion(){ //页面出现在前台时执行 }, onReady:function(){ //页面首次渲染完毕时执行 }, onHide:function(){ //页面隐藏后执行 }, onUnload:function(){ //页面销毁时执行 }, onPullDownRefresh:function(){ //触发下拉刷新时
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值