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 个回答

43

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

计算属性是计算属性,侦听器watch是侦听器watch。

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

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

而侦听器watch是侦听一个特定的值,当该值变化时执行特定的函数。例如分页组件中,我们可以监听当前页码,当页码变化时执行对应的获取数据的函数。

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

推荐答案

-27

已采纳

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

3

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

Dylan · 2017年07月20日

30

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

Dylan · 2017年07月20日

展开评论

推广链接