【Vue实践】计算属性computed和侦听器watch的对比

1、Demo演示

Demo展示了一个姓名案例，First Name和Last Name的改变都会引起Full Name的改变。

下面我们用Watch和Computed分别实现一下。

2、实现

2.1 watch实现

<template>
  <div>
    <div><span>First Name:</span><input type="text" v-model="firstName"></div>
    <div><span>Last Name:</span><input type="text" v-model="lastName"></div>
    <div><span>Full Name:{{fullName}}</span></div>
  </div>
</template>

<script>
export default {
  name: 'Watch',
  data() {
    return {
      firstName: 'lynn',
      lastName: 'hung',
      fullName: 'lynn hung'
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + ' ' + this.lastName;
    },
    lastName(val) {
      this.fullName = this.firstName + ' ' + val;
    }
  }
}
</script>

2.2 computed实现

<template>
  <div>
    <div><span>First Name:</span><input type="text" v-model="firstName"></div>
    <div><span>Last Name:</span><input type="text" v-model="lastName"></div>
    <div><span>Full Name:{{fullName}}</span></div>
  </div>
</template>

<script>
export default {
  name: 'Computed',
  data() {
    return {
      firstName: 'lynn',
      lastName: 'hung'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
}
</script>

单从目前的Demo案例来看，computed的实现方式比watch简洁许多。

watch实现中需要事先准备好我们需要的fullName属性。fullName属性的变化依赖firstName和lastName的变化，那么我们就需要对firstName和lastName分别进行侦听，观察到值发生改变后做出相应的操作。

试想，假设fullName依赖的不止一两个值，而是许多值，那么我们都要对每一个值进行侦听吗？显然，这样的工作是重复性的。

单从这一角度讲，computed更有优势。但考虑下面这种情况时，就不一定了。

3、Demo需求升级

将Demo的需求修改为：firstName和lastName的值改变后，经过2秒再改变fullName的值。

3.1 Watch实现的核心代码修改

 watch: {
    firstName(val) {
      setTimeout(() => {
        this.fullName = val + ' ' + this.lastName;
      }, 2000)
      
    },
    lastName(val) {
      setTimeout(() => {
        this.fullName = this.firstName + ' ' + val;
      }, 2000);
    }
  }

将fullName的修改代码片段放入了setTimeout异步函数中，就可以实现想要的效果。

但是，这里用computed缺不能实现同样的效果。可能你会想到这样去实现：
将代码片段computed中的计算属性fullName的返回值等2秒再return，如下。

 computed: {
    fullName() {
      setTimeout(() => {
        return this.firstName + ' ' + this.lastName;
      }, 2000);
    }
  }

遗憾的是，这里的return是箭头函数的返回值，并没有办法将该返回值给到fullName。

总结

computed 和 watch的区别：

• 能用computed实现的，一定能用 watch来实现；
• 能用 watch实现的，不一定能用computed实现，比如 watch里面可以进行异步操作；

使用建议：

• 能用computed实现的地方优先用computed来实现；
• 当需要在数据变化时执行异步或开销较大的操作时，用watch来实现。