Vue中的computed和watch

computed

computed也就是计算属性，它可以帮助我们将在模板中的一些稍微复杂的逻辑计算放回到js代码中，方便理解与修改维护：

<div id="example">
  {{ message.split('').reverse().join('') + number }}
</div>

以上代码可以改为：

<template>
  <div>
    <p>{{ reversedMessage }}</p>
  </div>
</template>
 
<script>
export default {
  name: 'test1',
  data () {
    return {
      message: 'hello world',
      number: 1
    }
  },
  computed: {
    // 字符串反转
    reversedMessage () {
      return this.message.split('').reverse().join('') + this.number
    }
  }
}
</script>

上面的代码片段中，在reversedMessage中，它依赖了message和number这两个属性，一旦其中一个变化了，reversedMessage会立刻重新计算输出新值。

在computed中定义的每一个计算属性，都会被缓存起来，只有当计算属性里面依赖的一个或多个属性变化了，才会重新计算当前计算属性的值：

computed: {
   // 计算属性的getter
   reversedMessage: function () {
       console.log('调用了');
       return this.message.split('').reverse().join('');
   }
}

当我们连续调用计算属性：

console.log(vm.reversedMessage)
console.log(vm.reversedMessage)
console.log(vm.reversedMessage)

会发现计算属性是基于它们的依赖进行缓存的。只在相关依赖（此时为this.message）发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不会再次执行计算属性的函数。

watch

 watch是属性监听器，一般用来监听属性的变化（也可以用来监听计算属性函数），并做一些逻辑。

<template>
  <div>
    <p>{{ this.number }}</p>
  </div>
</template>
 
<script>
export default {
  name: 'test1',
  data () {
    return {
      number: 1
    }
  },
  created () {
    setTimeout(() => {
      this.number = 100
    }, 2000)
  },
  watch: {
    number (newVal, oldVal) {
      console.log('number has changed: ', newVal)
    }
  }
}
</script>

 上面的代码中，我们在watch中监听了number属性，并且在实例创建后2s执行对number属性的值的更改。我们可以在控制台中看到2s后打印了如下图：

 computed可以通过几个数据的变化来影响一个数据，而watch，则是可以通过一个数据的变化去影响多个数据。

官方对于两者的对比

以下代码是针对fullname这个属性的监听：

 <div id="demo">{{ fullName }}</div>

使用watch：

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

使用computed：

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

1、computed 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；

      如果一个数据依赖于其他数据的简易计算处理的，那么使用computed比较合适；

2、一个对象，键是需要观察的表达式，值是对应回调函数。主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作；

3、methods 方法表示一个具体的操作，主要书写业务逻辑；

原文：

https://blog.csdn.net/u011423258/article/details/88641870