Vue为数据根级添加属性，并使之成为反应式的。

Posted 2021-03-19

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue为数据根级添加属性，并使之成为反应式的。相关的知识，希望对你有一定的参考价值。

考虑下面的代码。

let myData = {
    a: 1
}

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

正如Vue docs所说，当我们尝试添加一个像下面这样的属性时，新的属性不是反应式的。

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

Vue文档建议使用 Vue.set:

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

Vue docs说 Vue.set 为一个反应式对象添加一个属性!

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

答案

文档中明确说你 不能加 顶端级键.

Vue不允许向已经创建的实例动态添加新的根级反应式属性。

您必须在根级对象中添加一个键，以便以后可以更新它。

你可以

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

另一答案

问题很简单，如何创建一个根级属性并使之成为反应式的？如何创建一个根级属性并使之成为反应式的？

在 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>

另一答案

我在文档中找不到你是否可以在根级添加属性并让它也成为反应式的，但有一个替代的解决方案。

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)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

以上是关于Vue为数据根级添加属性，并使之成为反应式的。的主要内容，如果未能解决你的问题，请参考以下文章