Vue.js中的计算属性：如何让数据自动更新
warning:
这篇文章距离上次修改已过446天，其中的内容可能已经有所变动。
在Vue.js中，计算属性会基于它们的依赖进行缓存，并且只有当相关依赖发生变化时，才会重新计算。要让数据自动更新，你需要确保计算属性的依赖项在数据变化时发出通知。
例如，假设我们有一个Vue实例，它有一个数据属性items和一个计算属性totalPrice，后者计算items数组中对象的总价：
new Vue({
el: '#app',
data: {
items: [
{ price: 10, quantity: 2 },
{ price: 20, quantity: 1 }
]
},
computed: {
totalPrice() {
return this.items.reduce((total, item) => {
return total + (item.price * item.quantity);
}, 0);
}
}
});当你更新items数组中的对象的price或quantity属性时，totalPrice计算属性会自动更新，因为它依赖于这些属性。
如果你需要在数据变化时手动触发更新，可以使用方法，并在数据变化时调用这个方法。但是，在计算属性的情况下，这不是必需的，因为计算属性的特性使得它们在依赖更新时自动更新。
评论已关闭