javascript - Vue实例中的数据错误是否可以丢弃？

Question

我的 Vue 实例中将有很多变量通过 API 调用进行修改。它们的初始值并不重要。

我希望有一种方法不在虚拟机实例化时定义它们，但这不起作用:

vm = new Vue({
  el: "#app",
  data: {}
});
vm.number = 3

<div id="app">
  {{ number }}
</div>

如果我用 data: { number: null } 替换 data: {} ，代码运行正常。

我想避免的是一连串这样的声明 - 有没有办法在实例化时不声明data变量？

Answer 1

不完全是。

docs解释 Vue 中的 react 性如何工作，如下所示:

When you pass a plain JavaScript object to a Vue instance as its dataoption, Vue will walk through all of its properties and convert themto getter/setters using Object.defineProperty.

...

The getter/setters are invisible to the user, but under the hood theyenable Vue to perform dependency-tracking and change-notification whenproperties are accessed or modified.

...

Due to the limitations of modern JavaScript (and the abandonment ofObject.observe), Vue cannot detect property addition or deletion.

所以基本上简单来说，为了使数据值具有反应性并在 API 调用返回时更新，该属性必须从实例化时就存在，因为 Vue 无法检测添加或删除 .

话虽这么说，您可以按照 @gskema 的建议通过使用占位符对象并将属性附加到该对象来伪造它。这些更改确实会被 Vue 接收到。

所以你可以这样做:

data: {
  api: null
}

然后将您的 api 值附加到 api返回时属性，最后通过 api.number 引用所有数据等等