Vue的watch

這篇來介紹vue的watch的進階使用immediate，

使用情境：以前在子元件要接父層的值，並要隨時監聽變化覆寫data時，都會在mounted時覆寫第一次，之後就依watcher即時覆寫，我們來比較一下兩個寫法

export default {

  props: ["value"],

  data: () => ({

    data: ""

  }),

  watch: {

    value() {

      this.data = this.value;

    }

  },

  mounted() {

    this.data = this.value;

  }

};

雖然功能正常，但上面這寫法會造成邏輯分散，閱讀不易，我們來試一下immediate

export default {

  props: ["value"],

  data: () => ({

    data: ""

  }),

  watch: {

    value: {

      immediate: true,

      deep: true, // 深層監聽

      handler() {

        this.data = this.value;

      }

    }

  }

};

這樣就可以在渲染之初就把父層丟進來的值寫入啦，是不是又更簡潔了呢