6

如题,在vue.js官方文档中看到computed和watch获取全名的一个例子:

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
    }
  }
})

菜鸟表示不太懂他们之间的区别,难道watch就不可以像computed那样来获取吗?

dema 514
2017-05-02 提问

查看全部 18 个回答

37

①从属性名上,computed是计算属性,也就是依赖其它的属性计算所得出最后的值。watch是去监听一个值的变化,然后执行相对应的函数。
②从实现上,computed的值在getter执行后是会缓存的,只有在它依赖的属性值改变之后,下一次获取computed的值时才会重新调用对应的getter来计算。watch在每次监听的值变化时,都会执行回调。其实从这一点来看,都是在依赖的值变化之后,去执行回调。很多功能本来就很多属性都可以用,只不过有更适合的。如果一个值依赖多个属性(多对一),用computed肯定是更加方便的。如果一个值变化后会引起一系列操作,或者一个值变化会引起一系列值的变化(一对多),用watch更加方便一些。
watch的回调里面会传入监听属性的新旧值,通过这两个值可以做一些特定的操作。computed通常就是简单的计算。
watchcomputed并没有哪个更底层,watch内部调用的是vm.$watch,它们的共同之处就是每个定义的属性都单独建立了一个Watcher对象。

推荐答案

-27

已采纳

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

3

这种误人子弟的人,真是狗啊

Dylan · 2017年07月20日

30

既然希望初学者时期的他不要太多关注与这个细节,那就该直接告诉他,请之后再去注意这个点,而不是欺骗别人忽略这个细节,这本身就是一种极其不负责任的行为,我们对待问题要认真。又或者,是你当时也并不清楚它们之间的细微区别,而随意的以自己不负责任的态度去回答别人的问题呢。不管是哪种我觉得你的行为都很糟糕。

Dylan · 2017年07月20日

展开评论

推广链接