Vue3 如何强制使某个计算属性重新计算?

Vue3在依赖未变更的情况下,如何强制使某个计算属性重新计算?

什么场景需要在依赖未变更的情况下,需要重新计算

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 这篇文章:踩坑:vue3路由跳转,数组对象重新赋值 也许有你想要的答案,你可以看看
  • 你还可以看下vuejs参考手册中的 vue.js 计算属性
  • 除此之外, 这篇博客: Vue3.0 新特性以及使用变更总结(实际工作用到的)中的 简单对比vue2.x与vue3.x响应式 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    其实在Vue3.x 还没有发布beta的时候, 很火的一个话题就是Vue3.x 将使用Proxy 取代Vue2.x 版本的 Object.defineProperty

    没有无缘无故的爱,也没有无缘无故的恨。为何要将Object.defineProperty换掉呢,咋们可以简单聊一下。

    我刚上手Vue2.x的时候就经常遇到一个问题,数据更新了啊,为何页面不更新呢?什么时候用$set更新,什么时候用$forceUpdate强制更新,你是否也一度陷入困境。后来的学习过程中开始接触源码,才知道一切的根源都是 Object.defineProperty

    对这块想要深入了解的小伙伴可以看这篇文章 为什么Vue3.0不再使用defineProperty实现数据监听?要详细解释又是一篇文章,这里就简单对比一下Object.defineProperty 与Proxy

    1. Object.defineProperty只能劫持对象的属性, 而Proxy是直接代理对象

    由于Object.defineProperty只能劫持对象属性,需要遍历对象的每一个属性,如果属性值也是对象,就需要递归进行深度遍历。但是Proxy直接代理对象, 不需要遍历操作

    1. Object.defineProperty对新增属性需要手动进行Observe

    因为Object.defineProperty劫持的是对象的属性,所以新增属性时,需要重新遍历对象, 对其新增属性再次使用Object.defineProperty进行劫持。也就是Vue2.x中给数组和对象新增属性时,需要使用$set才能保证新增的属性也是响应式的, $set内部也是通过调用Object.defineProperty去处理的。


如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^