在 Vue 中的监听器与计算属性

Question

Vue的 watch()函数 可以起到与 计算属性 。 例如，假设您要跟踪用户购物车中的商品数量。 你可以代表 numItems 作为计算属性：

const app = new Vue({
  data: () => ({ items: [{ id: 1, price: 10, quantity: 2 }] }),
  computed: {
    numItems: function numItems() {
      return this.items.reduce((sum, item) => sum + item.quantity, 0);
    }
  },
  template: `<div>numItems is {{numItems}}</div>`
});

您还可以定义一个观察者来更新 numItems 每次都有财产 items 变化：

const app = new Vue({
  data: () => ({
    items: [{ id: 1, price: 10, quantity: 2 }],
    numItems: 2
  }),
  watch: {
    items: function updateNumItems() {
      this.numItems = this.items.reduce((sum, item) => sum + item.quantity, 0);
    }
  },
  template: `<div>numItems is {{numItems}}</div>`
});

您应该使用哪种方法？ 通常，您应该使用计算属性来更新值。 您应该只将观察者用于“副作用”，例如 console.log()，或 HTTP 请求。 这就是为什么。

保持同步更新

问题与 numItems作为观察者，您可能会意外更新 numItems不更新 items. 这意味着 numItems可能不同步。

const app = new Vue({
  data: () => ({
    items: [{ id: 1, price: 10, quantity: 2 }],
    numItems: 2
  }),
  watch: {
    items: function updateNumItems() {
      this.numItems = this.items.reduce((sum, item) => sum + item.quantity, 0);
    }
  },
  methods: {
    myMethod: function() {
      // Perfectly valid, since `numItems` is a data property.
      this.numItems = 5;
    }
  },
  template: `<div>numItems is {{numItems}}</div>`
});

另一方面，如果您尝试更新计算属性，Vue 会将其视为无操作并打印以下警告：

[Vue warn]: Computed property "numItems" was assigned to but it has no setter.

所以 numItems保证与内容保持同步 items，即使您不小心尝试覆盖它。

何时使用观察者

当 您想要执行异步操作以响应不断变化的数据 。 例如，如果您想自动保存 cart 每次更改时，您可能会执行以下操作：

const app = new Vue({
  data: () => ({
    items: [{ id: 1, price: 10, quantity: 2 }],
  }),
  watch: {
    items: async function saveCart() {
      await axios.put('/cart', items);
    }
  },
  template: ...
});