VueJs，计算属性和观察者之间的区别？

Question

在 Vue.js 文档中有一个如下示例：

 var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

上面的代码是命令式的和重复的。将其与计算属性版本进行比较：

 var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

什么情况下观察者比计算属性更合适？我应该如何决定选择哪个？文档一直说它更“通用”，但并没有真正说明它的目的。

原文由 serkan 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

计算属性

计算属性示例：

 computed: {
   val () {
     return this.someDataProperty * someOtherVariable
   }
}

这段特定的代码有什么作用？

1. 它为组件创建一个名为 val 的属性（在原型上，所以 <vueInstanece>.hasOwnProperty('val') 会显示 false ） 。

2. 它有一个依赖树，在这种情况下由 反应 属性（数据属性，其他计算属性）组成： this.someDataProperty ，这意味着依赖关系发生变化的那一刻，计算属性将被重新计算。

3. 尽管进行了辩论，但不能将论据传递给它。所以像

   computed: {
     val (flag) {
       return (flag === 1)
         ? this.someDataProperty * someOtherVariable
         : this.someDataProperty * 5
       }
   }

做不到

[编辑] 见： https ://v2.vuejs.org/v2/guide/computed.html#Computed-Setter

观察者

观察者样本：

 watch: {
   val (n, o) {
     console.log(n, o)
   }
}

1. 它不会创建任何新属性，但它会监视反应属性的更改。

2. 只监视一个特定的属性，不像计算的，任何依赖属性的变化都会导致重新计算。

3. 具有新旧价值的论据。

---

因此，如果出现以下情况， 计算属性 将是可行的方法：

您想要一个始终依赖于其他属性的属性。就像模板的文本格式一样，甚至是代码中的示例。

或者减少可变长度，因为这很常见：

 this.$store.state.someProperty.someNestedProperty.someDeeplyNestedProperty

可以简化为：

 computed: {
  someDeeplyNestedProperty () {
     return this.$store.state.someProperty.someNestedProperty.someDeeplyNestedProperty
  }
}

不仅仅是变量大小的减少，每次商店更新时，您都会在 someDeeplyNestedProperty 中获得最新值。

---

如果您想查看某个反应性属性是否已更改为有利值以了解您已准备好执行某项操作，那么 Watchers 很有用。

喜欢：

 watch: {
  somethingSelected() {
    this.router.push('someOtherRoute')
  }
}

编辑：我遇到了 Flavio Copes 的一些好文章，其中列出了每个用例（方法、计算道具、观察者）的常见用例：

何时使用方法

• 对 DOM 中发生的某些事件做出反应

• 当组件中发生某些事情时调用函数。您可以从计算属性或观察者调用方法。

何时使用计算属性

• 您需要从现有数据源组合新数据
• 您在模板中使用了一个从一个或多个数据属性构建的变量
• 您希望将复杂的嵌套属性名称简化为更易读且易于使用的名称，但在原始属性更改时对其进行更新
• 您需要从模板中引用一个值。在这种情况下，创建一个计算属性是最好的，因为它是缓存的。
• 您需要监听多个数据属性的变化

何时使用观察者

• 您想在数据属性更改时进行监听，并执行一些操作
• 你想听一个道具值的变化
• 您只需要收听一个特定的属性（您不能同时观看多个属性）
• 你想观察一个数据属性，直到它达到某个特定值，然后做一些事情

原文由 Amresh Venugopal 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

计算属性有一个非常特定的目的：组合从其他数据派生的新数据。只要您有一些数据并且需要在模板中使用它之前对其进行转换、过滤或以其他方式对其进行操作，就会使用它们。

计算属性总是必须返回一个值，不应该有任何副作用，而且它们必须是同步的。

因此，在相当多的情况下计算属性对您没有帮助，例如：您的组件接收到一个 prop，并且每当 prop 发生更改时，您的组件都必须发出 ajax 请求。为此，您需要一个观察者。

观察者不如计算属性有用，因此您应该始终考虑计算属性是否可以解决您的问题，如果不是这种情况，则只能求助于观察者（或有时是方法）。

原文由 Linus Borg 发布，翻译遵循 CC BY-SA 3.0 许可协议