1. computed 計算屬性可用於快速計算檢視中顯示的屬性。 這些計算將被快取，並且只在需要時更新。 他的方法不需要在data裡面定義 它們完全是同步的。

  <div class="text">
    {{total}}
  </div>
export default {
  data() {
    return {
      a: '我是a',
      b: '我是b',
    };
  },
  computed: {
    total() {
      return `${this.a} ${this.b}`;
    },
  },
};

因此當 this.a或者this.b 發生改變時，所有依賴 total 的繫結也會更新。

export default {
  data() {
    return {
      a: '我是a',
      b: '我是b',
    };
  },
  computed: {
    // total() {
    //   return `${this.a} ${this.b}`;
    // },
    total: {
      get() {
        return `${this.a} ${this.b}`;
      },
      set(newValue) {
        console.log(newValue);  //我是set
        this.a = newValue;
      },
    },
  },
  mounted() {
    setInterval(() => { this.total = '我是set'; }, 1000);
  },
};
 

2. watched監聽（在data裡面定義了）

<template>
  <div class="text">
    {{total}}
  </div>
</template>

export default {
  data() {
    return {
      first: 'Lucy',
      last: 'Bob',
      total: '',
    };
  },
  watch: {
    first() {
      this.total = this.first + this.last;
    },
  },
  mounted() {
   //this.first = 'Pop';
  },
};
 

第一次不會執行watch裡面的方法，如果想要直接執行watch裡面的方法，這就需要用到handler方法和immediate屬性

export default {
  data() {
    return {
      first: 'Lucy',
      last: 'Bob',
      total: '',
      obj: {
        a: '',
      }
    };
  },
  watch: {
    first: {
      handler() {
        this.total = this.first + this.last;
      },
      immediate: true,
    },
  },
  mounted() {
    // this.first = 'Pop';
  },
};

如果我們需要監聽obj裡的屬性a的值呢？需要用到deep屬性 但是這樣會監聽所有的obj裡面的data，開銷比較大。

export default {
 data() {
    return {
      first: 'Lucy',
      last: 'Bob',
      total: '',
      obj: {
        a: '我是obj',
      },
    };
  },
  watch: {
    first: {
      handler() {
        this.total = this.first + this.last;
      },
      immediate: true,
    },
    obj: {
      handler() {
        alert(this.obj.a);
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    // this.first = 'Pop';
  },
};

優化方案：

export default{
 data() {
    return {
      first: 'Lucy',
      last: 'Bob',
      total: '',
      obj: {
        a: '我是obj',
      },
    };
  },
  watch: {
    first: {
      handler() {
        this.total = this.first + this.last;
      },
      immediate: true,
    },
    'obj.a': {
      handler() {
        alert(this.obj.a);
      },
      immediate: true,
    },
  },
  mounted() {
    // this.first = 'Pop';
  },
};

methods是方法，是要呼叫它就會執行