vue中computed缓存问题

避免Vue.jscomputed属性缓存JSON数据的方法,

最新推荐文章于 2025-07-28 11:26:39 发布

原创最新推荐文章于 2025-07-28 11:26:39 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #缓存 #前端

在Vue.js中，computed属性的计算结果会被缓存，导致更新JSON数据时可能不生效。为解决此问题，可以使用getter函数返回每次调用时的新JSON对象，通过`JSON.parse(JSON.stringify(this.jsonData))`确保每次都返回一个全新的对象，从而强制重新计算。

在 Vue.js 的 computed 属性中赋值 JSON 数据时，可能会遇到缓存的问题。这是因为 computed 属性默认会对其依赖的数据进行缓存，只有当依赖的数据发生变化时才会重新计算。如果你希望避免缓存效果，可以使用一个计算属性的 getter 函数来返回一个新的 JSON 对象，而不是直接赋值。

以下是一个示例代码，展示了如何在 computed 属性中避免缓存 JSON 数据：
computed: {
  // 使用 getter 函数返回新的 JSON 对象
  jsonWithoutCache() {
    return JSON.parse(JSON.stringify(this.jsonData));
  }
}