javascript - VueJs 使计算属性具有反应性

Question

我有一个这样的 VueJS 组件

const MyComponent = Vue.extend({
  props: ["myHandle"],
  computed: {
    name: {
      get: function() { return myHandle.getName() },
      set: function(newName) { myHandle.setName(newName) },
    }
  }
})

问题是设置计算属性 name不会触发 VueJs 更新属性。这意味着旧名称是在重新渲染时显示的内容。

现在，我对 VueJS 还很陌生，我知道这可能是代码味道，但问题是 myHandle属性实际上是一个句柄，用于访问用 Rust 编写的 WebAssembly 模块中的数据。 Rust 代码是我的大部分状态/模型/真实来源所在的地方。

到目前为止我发现的两个不令人满意的解决方案是:

1. 使用方法而不是计算属性来检索名称。基本上加一个getName方法到我的组件并将我的模板代码从 <p> Your name is {{ name }}</p> 更改为至 <p> Your name is {{ getName() }}</p> .这将导致 VueJs 不缓存。将来我打算进行昂贵的计算，这意味着不必要的性能成本

2. 将 Rust 端的状态复制到我的组件。我不想这样做，因为我会得到多个事实来源。

那么有什么方法可以:

A:让 VueJS 理解 myHandle.setName是一个应该导致 name 的变异方法要更新的计算属性。

B:手动触发更新。

C 用其他方式解决？

Answer 1

计算属性根据它们的依赖关系(数据、 Prop 和其他计算属性)进行缓存。如果我理解正确，你的计算属性将不会是 react 性的，因为唯一的依赖是 myHandle，我认为它永远不会改变。这样看，Vue 只能通过实际调用该方法来检查 getName 是否返回了不同的值，因此没有任何内容可缓存。

如果名称只能从您的 Vue 组件更改，您可以将其设置为数据字段并添加一个观察者来更新 WebAssembly 值。否则，如果可以从非 Vue 源更改名称并且您每次都必须从处理程序调用 getName 方法，则您将不得不想出自己的机制(可能使用去抖功能来限制调用次数)。