详解：为什么在keep-alive组件中使用computed计算属性数据没有变更？

最新推荐文章于 2023-07-25 14:04:44 发布
最新推荐文章于 2023-07-25 14:04:44 发布
阅读量2k 收藏 1
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/E_li_na/article/details/89204742
版权
本文详细探讨了在Vue组件中使用`keep-alive`时，为何`computed`计算属性的数据未发生变化。关键在于`computed`属性的执行时机，它在`beforeCreate`和`created`之间初始化，而`keep-alive`组件不执行`created`钩子，而是激活时调用`activated`。因此，当需要在每次加载时更新数据，应当利用`activated`钩子。
摘要由CSDN通过智能技术生成

第一步：computed在生命周期的哪个阶段执行？

（1）在new Vue（）的时候，vue\src\core\instance\index.js里面的_init()初始化各个功能

function Vue (options) {
   
if (process.env.NODE_ENV !== 'production' &&
  !(this instanceof
最低0.47元/天 解锁文章
E_li_na
关注
专栏目录
vue构造函数（根实例化时和组件实例对象选项）参数：选项详解
weixin_30755393的博客
03-17 2934
实例选项（即传给构造函数的options）：数据，DOM，生命周期钩子函数，资源，组合，其他 数据 data 属性能够响应数据变化，当这些数据改变时，视图会进行重渲染。 访问方式： 1、通过 vm.$data 访问。 var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm....
设置keep-alive后，跳转到同一组件，路由变化，但数据未更新
qq_38327841的博客
07-27 966
问题原因 主要是因为设置keep-alive后，页面将不会发送新的请求，而是继续用上一次的数据，这样就导致路由已经发生变化，但是页面仍然是上一次的数据。 解决方式 方式一 在这个页面中添加activated属性，并在里面调用一次数据请求。这样做有一个坏处就是在请求到新的数据之前，页面仍然是上一次的数据。 方式二 在keep-alive中添加属性exclude，并将想刷新的组件（即不想keep-alive）的name填进去。注意，一定要设置name 比如我有一个组件，name:'card'，那么我就可以这么写
vue中为什么要使用计算属性 computed
ruige6的博客
10-14 490
vue中为什么要使用计算属性 computed 因为在插值表达式中方太多的逻辑对（逻辑：split，join,reverse等方法）, 如： 效果： 但是你们想过如果我多出要用到 怎么办呢？粘贴在复制，方法太low了,而且对以后的代码的维护加大了难度 所以我们可以使用计算属性computed，将一些逻辑粗春到其中如下图： 效果： 你可以理解为：（java实体类将一些公共的字段抽取出来，然后更改起来就更加方便），并且计算属性是基于它们的响应式依赖进行缓存的 ...
使用keep-alive时，数据无法刷新的问题
明知迷途，从未折返
01-28 7850
keep-alive 相关内容 概念： <keep-alive> 是Vue的一个内部组件，适合用来缓存不需要实时更新的组件，这样可以保留组件状态避免重新渲染。 Props： include ：接受字符串或正则表达式，这里是需要被缓存的组件名 exclude ：接受字符串或正则表达式，这里是不需要缓存的组件名 max ：接受数字，最多可以缓存多少组件实例 问题： 在需要重新请求数据的...
vue取div当前宽度_浅析Vue进阶属性“computed、watch”
weixin_39605894的博客
11-21 523
计算属性 - computed计算属性就是被计算出来的属性就叫计算属性，列如用来展示用户名，或者用户列表展示等等。举个栗子吧栗子正常注册表用户名、邮箱、电话，用于优先展示用户名。new 但是可能会出现用户没有填写昵称，遇到没有填写昵称的情况下就优先展示邮箱。如果需要在多个网页展示用户名的话就得多写{{user.nickname || user.email || user.phone}} 。代码升级...
vue中使用keep-alive缓存页面后无法更新数据
Hgh_1997的博客
07-06 1101
比如一个商品列表，点击某个商品进行编辑，去到编辑页中进行操作，编辑完成后再次返回商品列表编辑的商品还未更新。 之前我们一般用mounted()或者created()进行初始化数据，keep-alive缓存后的组件只会执行一次mounted或者created的方法。 解决方案：使用activated去代替created或者mounted。 个人理解activated()：在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等 ...
vue 组件开发原理与实现方法详解
10-15
- **计算属性与侦听器**：利用计算属性（`computed`）缓存依赖，监听器（`watch`）响应数据变化，避免不必要的计算。 - **组件缓存**：Vue的`keep-alive`组件可以缓存不活动的组件实例，避免重复渲染。 六、组件的...
vue由浅到深面试题详解
03-01
在面试中，Vue 的深入理解往往体现在对一些关键特性的掌握，例如 v-if 与 v-show 的选择、单向数据流、计算属性与侦听器的区别、组件生命周期以及 keep-alive 组件的使用等。下面我们将详细讨论这些知识点。 首先，...
vue中各选项及钩子函数执行顺序详解
12-11
5. **computed**：计算属性在实例创建后立即计算，并在相关依赖更改时自动重算。它们提供了一种简便的方式来处理复杂的逻辑，而不是在模板中进行。 6. **directives-bind**：指令在初次绑定到元素时调用，例如`v-...
vue 设置了keepAlive 的页面之后出现的问题
chenlengsu_it的博客
12-20 825
通过传入的字段 判断是否 keepAlive <keep-alive> <router-view v-if="$route.meta.keepAlive && isRefresh" class="avue-view" /> </keep-alive> <router-view v-if="!$route.meta.keepAlive && isRefresh" class="
最好理解的Vue-keepAlive按需缓存
风口浪尖的猪吖
03-31 589
Vue项目开发中我们经常会有某些场景例如列表进入详情缓存列表页面，列表返回首页清除缓存等需求。那我们如何实现该需求呢。 vue有内置的缓存组件keepAlive，使用keepAlive + include就可以帮我们非常完美的实现该需求。 1.在Vuex中配置需要缓存的数组以及处理方法 export default new Vuex.Store({ state: { keepAlive: [], }, //getters和组件的computed 类似，方便直接生成一些可以直接用的数据。当
vue数组中数据变化但是视图没有更新解决方案
weixin_30817749的博客
05-25 1920
场景 在我使用vuex的过程中，使用computed获取数据。获取到的数据格式是这个样子的 carts: [{}, {}, {}] 但是我在这个页面中需要给这个数据额外添加一个数据字段 carts[index].editState = false; 遇到的问题 当我这样开始做的时候，是直接在conputed计算属性中获取这个值，视图没有更新。 参考这篇文章：https://cn.vuejs.org...
Vue--keep-alive--使用/实例
IT利刃出鞘的博客
08-23 536
本文用示例介绍Vue的keep-alive的用法。 keep-alive标签主要用于保留组件状态或避免重新渲染。
Vue性能优化
Eighteen Z
03-20 809
背景 总结一下使用Vue涉及到的性能优化方法，从我实践和查阅资源总结出来的集合。 简介： v-if 和 v-show v-if v-show computed 和 watch 一、 v-if 和 v-show 一般使用过vue或者angular及其相同框架的人都会知道他们的区别。 v-if 它是真正的条件判断语句，会根据条件对条件内的组件进行重建和销毁。 它是惰性的，在第一次判...
vue3 中使用 keep-alive 不生效的原因，及keep-alive使用详细介绍
最新发布
前端打工人的博客
07-25 1万+
keep-alive是vue提供的一个组件，它可以将组件缓存起来，避免在组件切换时，每次都重新渲染，从而提高页面性能和用户体验。因此，keepalive被广泛应用于一些需要频繁切换路由或组件的应用中。keep-alive是 Vue 的内置组件，当它包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 transition 相似，keep-alive是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件链中。
vue三级以上菜单keep-alive无效解决办法
ll7425的博客
11-15 2521
所以解决办法将每个子组件都会存在加载缓存它的父组件，将Layout的name设置为唯一值、common也是如此。每个子组件与父组件都会公用Layout、Common,
【vue3】vue3的keep-alive（keepAlive）失效
此人太懒，没有任何简介
12-18 2903
vue3的keep-alive（keepAlive）失效
vue3响应式系统的设计与实现（二）【computed/watch 实现原理】
l63492818的博客
04-03 298
vue3 响应式系统 computed 与 watch 实现原理
petite-vue中如何使用computed计算属性
06-13
在上面的示例中，我们在 `computed` 对象中定义了一个名为 `computedValue` 的计算属性，它的值是 `this.value * 2`，其中 `this` 指向当前 `app` 对象，因此可以访问 `data` 对象中的 `value` 属性。 在模板中，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值