计算属性VS侦听器

区别

计算属性（computed）:
改变一个或多个响应式元素的值，去修改一个响应式元素的值

侦听器（watch）:
改变一个响应式元素的值，去修改多个响应式元素的值

实例

<div>
    <input v-model="firstName" />
    <br />
    <input v-model="lastName" />
    <h3>计算属性</h3>
    <div>{{ name1 }}</div>
    <h3>侦听器</h3>
    <div>{{ fullName }}</div>
</div>

export default {
  name: "bCom",
  data() {
    return {
      firstName: "dai",
      lastName: "jun",
      fullName: ""
    };
  },
  computed: {
    name1() {
      return this.firstName + "" + this.lastName;
    }
  },
  watch: {
    firstName(val) {
      this.fullName = val + "" + this.lastName;
    },
    lastName(val) {
      this.fullName = this.firstName + "" + val;
    }
  }
};