Vue 将属性添加到数据根级别并使其具有反应性答案

【问题标题】：Vue add property to data root level and make it reactiveVue 将属性添加到数据根级别并使其具有反应性
【发布时间】：2020-08-05 13:54:04
【问题描述】：

考虑下面的代码：

let myData = {
    a: 1
}

const app = new Vue({
    data: myData
});

正如 Vue 文档所说，当我们尝试添加如下属性时，新属性不是响应式的：

myData.b = 12;
console.log(app.b); // undefined

Vue 文档建议使用 Vue.set:

Vue.set(myData, 'b', 12);
console.log(app.b); // still undefined

Vue 文档说 Vue.set 将属性添加到反应对象！

但我想将b 添加到数据的根级别。我不知道如何让b 反应。

【问题讨论】：

我想你是在寻找观察者，例如：stackoverflow.com/questions/42133894/…
@yuri，谢谢。问题很简单：如何创建根级属性并使其具有反应性？ Vue.set 仅在我们添加到嵌套属性时才有效。
您的具体用例是什么？
@BoussadjraBrahim 好奇心 :))
我需要知道该用例才能建议最佳模式

标签： javascript vue.js

【解决方案1】：

问题很简单：如何创建根级属性并使其具有响应性？

data 中的属性仅在创建实例时存在时才具有反应性。这意味着如果您添加一个新属性，例如：

myData.b = 12;

然后对b 的更改将不会触发任何视图更新。如果您知道以后需要一个属性，但它一开始是空的或不存在的，您需要设置一些初始值。例如：

let myData = { a: 1, b: 0 }
// or,
let myData = { a: 1, b: null }

现在您可以看到对 b 的更改也显示在 UI 中：

let myData = { a: 1, b: 0 }
const app = new Vue({
  el: "#myApp",
  data: myData
})

myData.b = 12;
console.log(app.$data);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="myApp">
  <pre>{{ b }} </pre>
</div>

【讨论】：

谢谢。我知道这行得通，这是一个很好的选择。但我想知道是否可以添加名称未知的动态根级属性。显然这是不可能的。

【解决方案2】：

如果您可以将属性添加到根级别并使其也具有反应性，我在文档中找不到，但还有其他解决方案。

let myData = {
    obj: {
     a: 1
    }
}

const app = new Vue({
    data: myData,
    watch: {
      obj: {
        handler(val) {
          console.log('watching !', val)
        },
        deep: true
      }
    }
});

Vue.set(app.obj, 'b', 12)

console.log(app.$data)

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;

【讨论】：

谢谢，但您正在向嵌套对象添加属性。因此，只需使用 Vue.set(app.obj, 'b', 12) 即可反应。不需要观察者。

【解决方案3】：

文档明确说您无法添加 top level keys。

Vue 不允许动态地将新的根级反应属性添加到已创建的实例中。

您必须向根级对象添加一个键，以便以后对其进行更新。

您可以：

使用您将更新的默认值创建一个键。这意味着您事先知道密钥
使用通用键（例如dynamicProps）创建一个空对象，并使用Vue.set 在运行时向其添加动态键。

【讨论】：