Vue中的computed和watch的区别

Vue项目开发中，有这么两个属性比较容易混淆，若是不特别注意，用法比较类似，这两个属性就是computed和watch，其实这两个仍是有很大差异，下面就讲讲这两个属性的用法及不一样
先说说为何比较像，咱们看下面代码。

<template>
  <div>
    <input type="text" v-model="a" />
    <div>a={{ a }}</div>
    <div>b={{ b }}</div>
    <div>c={{ c }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: 1,
      c: 0
    }
  },
  watch: {
    a(val) {
      console.log(val)
      this.c = val + '数据'
    }
  },
  computed: {
    b: function() {
      return this.a + '数据'
    }
  }
}
</script>

经过代码和gif能够看到当我输入框在变的状况下，b和c数据始终保持一致，这种效果项目中可能会用到。因此说不少人容易混淆，分不清用法。接下来就说说他们的用法和不一样。

1 computed：计算属性

computed官方定义计算属性，模板内使用表达式是很是便利，可是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板太重且难以维护。因此，对于任何复杂逻辑，你都应当使用计算属性。

<template>
  <div>
    <input type="text" v-model="a" />
    <br />
    <button @click="setb()">设置b</button>
    <div>a={{ a }}</div>
    <div>b={{ b }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: ''
    }
  },
  computed: {
    b: {
      get: function() {
        console.log('获取b')
        return this.a
      },
      set: function(val) {
        console.log('设置b值')
        console.log('传入值：' + val)
        console.log('b值：' + this.b)
      }
    }
  },
  methods: {
    setb() {
      this.b = 1
    }
  }
}
</script>

当咱们点击按钮“设置b”时，咱们会给b设置一个值“1”，经过set方法能够获取到设置的值，可是咱们打印b值，实际上是没有变化的。computed里的数据有get和set方法，可是咱们经常使用的是get方法，通常不多用set方法。

从上面能够看出，computed支持缓存，属性值会默认走缓存，只有基于data中声明过或者父组件传递的props中的数据经过计算获得的值发生改变，才会从新进行计算。

强调一点，使用computed的数据不能在data中声明，不然会提示错误，而且函数也不在执行。

2 watch：监听属性
虽然计算属性在大多数状况下更合适，但有时也须要一个自定义的侦听器。这就是为何 Vue 经过 watch 选项提供了一个更通用的方法，来响应数据的变化。当须要在数据变化时执行异步或开销较大的操做时，这个方式是最有用的。

<template>
  <div>
    <input type="text" v-model="a" />
    <div>a={{ a }}</div>
    <div>c={{ c }}</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      a: '',
      c: ''
    }
  },
  watch: {
    a(val) {
      console.log(val)
      this.c = val + '数据'
    }
  }
}
</script>

上面的代码是，监听a，若是a发生变化，就在a的后面加上“数据”，把值保存给c。watch监听不支持缓存，数据发生变化，会直接触发相应的操做，监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入以前的值；具体内容请参考另一篇文章
Vue中watch的详细用法。
注：监听的数据必须是data中声明的或者父组件传递过来的数据。

3 总结
Computed特色：
须要主动调用，具备缓存能力只有数据再次改变才会从新渲染，不然就会直接拿取缓存中的数据。
Watch特色：
不管在哪只要被绑定数据发生变化Watch就会响应，这个特色很适合在异步操做时用上。