0

如题,在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那样来获取吗?

11个回答

-17

已采纳

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

8

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

Dylan · 7月20日

展开评论
8

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

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

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

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

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

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

4

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

2

并不是,作用不一样。

computed是用于定义基于数据之上的数据

而watch是你想在某个数据变化时做一些事情,如果做的事情是更新其他数据,那其实与把这个要更新的数据项定义成computed是一样的,这个时候用computed更有可读性,虽然技术上讲watch也可以实现。

但你也可以在被watch的数据变化时做其他事情啊,比如调用一个方法,这个是computed做不到也不应该做的。

总结:

  • 1.如果一个数据依赖于其他数据,那么把这个数据设计为computed的

  • 2.如果你需要在某个数据变化时做一些事情,使用watch来观察这个数据变化

1

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

0

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

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

0

watch应该是更底层的实现,computed在其上创建,每更新任何一个属性都会触发这个属性的watch,以及一次computed

0

在写法上有一个区别。computed返回state处理后结果,watch是赋值行为,修改state。

正如文档建议说 执行异步操作或开销较大的操作时使用watch。

我理解是

  1. 执行异步操作不能串行返回结果,使用watch。

  2. 开销较大的操作,避免堵塞主线程,使用watch。

  3. 简单且串行返回的,使用computed

0

那么,用watch的时候更多的就去监听props的变化,而computed就用来计算data的值,感觉这样更好些~~~

0

watch可以监听某个data变化而做出不同的反应 比如可以在data到一定程度的时候关闭页面 computed就做不到这一点

0

不上最简单的代码示例,都是扯淡

该答案已被忽略,原因:无意义的内容:赞、顶、同问等毫无意义的内容,不符合答题规范:内容不是答案,可用评论、投票替代

撰写答案