+-
考虑下面的代码。
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 反应式。
3
投票
投票
文档中明确说你 不能加 顶端 级键.
Vue不允许向已经创建的实例动态添加新的根级反应式属性。
您 必须 在根级对象中添加一个键，以便以后可以更新它。
你可以
创建一个具有默认值的键，你将更新它。这意味着你事先就知道这个键 用一个通用键创建一个空对象（例如dynamicProps)并使用
Vue.set 以在运行时向其添加动态键。
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>
0
投票
投票
我在文档中找不到你是否可以在根级添加属性 并让它也成为反应式的，但有一个替代的解决方案。
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>