計算屬性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;
    }
  }
};