Vue中watch和computed使用和区别

Vue中watch和computed 都可以用作数据的监听功能，但是它们也有区别，下面分别介绍这两个函数的使用方法和区别。它也是vue面试可能问到问题之一。

watch

vue中watch用于监听数据的响应变化，它有一个回调函数，同参数名，当数据变化时，会触发这个回调函数，我们可以在回调函数中处理我们的业务逻辑。例子：

<template>
  <div>
    <h2>欢迎首页</h2>
    <div>请输入用户名<input type="text" v-model="username"/></div>
    <div>旧值和新值：{{ usernameVal }}</div>

  </div>
</template>

<script>
export default {
  name: "HomeIndex.vue",
  data() {
    return {
      username: '',
      usernameVal: ''
    }
  },
  watch: {
    //监听数据的变化，可以获取数据变化前后的值
    username: function (oldUsername, newUsername) {
      this.usernameVal = oldUsername + "__" + newUsername
    },
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

computed 

computed是指页面中某些属性依赖其它的属性变动的时候使用computed ，比如购物车功能，有商品1和商品2，那么合计总的数量就依赖于商品1和商品2的数量。

例子：

<template>
  <div>
    <h2>购物车</h2>
    <div>商品1<input type="text" v-model="num1"/></div>
    <div>商品2<input type="text" v-model="num2"/></div>
    <div>总量：{{ totalNum }}</div>

  </div>
</template>

<script>
export default {
  name: "HomeIndex.vue",
  data() {
    return {
      num1: 0,
      num2: 0
    }
  },
  computed: {
    //总量依赖于商品1和商品2的数量
    totalNum: function() {
       return parseInt(this.num1) + parseInt(this.num2)
    },
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

上面的例子中totalNum 依赖于num1和num2数量，所以使用computed 。

区别

• 返回值： watch没有返回值，computed有返回值。
• 功能：    watch用于监听数据的变化，computed用户计算。
• 缓存：    watch每次监听的值发生变化时候都会调用回调，computed会调用缓存。
• 异步：    watch可以有异步，computed函数不能有异步。