javascript - Was ist der Unterschied zwischen Computed und Watch in Vue?

Question

Wie bereits erwähnt, habe ich in der offiziellen Dokumentation von vue.js ein Beispiel für die Verwendung von „computed“ und „watch“ gesehen, um den vollständigen Namen zu erhalten:

var 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 var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

Der Neuling sagte, dass er den Unterschied zwischen ihnen nicht versteht. Kann man die Uhr nicht wie berechnet erhalten?

Answer 1

用computed代码写的少，没什么主要区别

Answer 2

我觉得还是有区别的，而且两种应用的情形应该区分开。

计算属性是计算属性，观察是观察。

计算属性顾名思义就是通过其他变量计算得来的另一个属性，fullName在它所依赖firstName，lastName这两个变量变化时重新计算自己的值。

另外，计算属性具有缓存。计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 lastName和firstName都没有发生改变，多次访问 fullName计算属性会立即返回之前的计算结果，而不必再次执行函数。

而观察watch是观察一个特定的值，当该值变化时执行特定的函数。例如分页组件中，我们可以检测页码执行获取数据的函数。

可以再详细的查看一下文档：https://cn.vuejs.org/v2/guide...

Answer 3

更具可读性，以及通常来说更少的代码。

Answer 4

简单来看computed是基于缓存进行的，watch等于一个函数。个人觉得会用就行了，具体区别移驾具体区别

觉得还是计算属性用的能广泛一些吧