回顧

Options-based API 和 Comosition API

• Options-based API 一個元件包含 properties/methods/options
• Composition API 一個元件封裝邏輯到 function 中
  在 Composition API 中，每一個 function 都是元件的一部分，在 function 中封裝所有這個功能相關的邏輯，funtion 可以重複使用、也更方便組織元件。

接續 refs

使用 ref 可以得到元素或是元件實體的參考，透過 ref() 這個function 建立! 結果會回傳一個響應式的物件。

一樣在 setup()中使用 ref()

ex:

import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const input = ref("");

    return {
      input,
    };
  },
});

computed

原本在 Vue2 的寫法

export default {
  props: {
    title: String
  },
  computed: {
    vTitle() {
      return '-' + this.title + '-';
    },
    itemsQuantity() {
      return this.items.length;
    }
  },
  data() {
    return {
      items: ['This', 'is'],
    };
  },
}

改用 Vue3 Composition API

import { ref, computed } from '@vue/composition-api';

export default {
  props: {
    title: String
  },
  setup(props) {
    const vTitle = computed(() => '-' + props.title + '-');

    const items = ref(['This', 'is']);
    const itemsQuantity = computed(() => items.value.length);

    return {
      vTitle,
      items,
      itemsQuantity,
    };
  }
};

還可以利用 computed API，建立一個可讀寫的 ref 物件 (get & set function)

const count = ref(1)
const double = computed({
  get: () => count.value * 2,
  set: val => { count.value = val - 1 }
})

double.value = 3          // set: count.value = 3 - 1 = 2
console.log(count.value)  // 2
console.log(double.value) // get: count.value * 2 = 4

Watchers

原本 Vue2 寫法

export default {
  data() {
    return {
      items: ['This', 'is'],
      append: ''
    };
  },
  watch: {
    items: {
      handler: function(value, oldValue) {
        this.append = '';
        value.forEach(item => {
          this.append += item + ' ';
        });
      },
      immediate: true
    }
  },
}

Vue3中，使用新的 watch API　去異動
watch(source, callback, options)

import { ref, watch } from '@vue/composition-api';

export default {
  setup(props) { 
    const items = ref(['This', 'is']);
    const append = ref('');

    watch(
      // getter
      () => items.value,
      // callback
      (items, oldItems) => {
        append.value = '';
        items.forEach(item => {
          append.value += item + ' ';
        });
      },
      // watch Options
      {
        lazy: false // immediate: true
      }
    )

    return {
      items,
      append
    };
  }
};

下篇預告

• 心得

每日一句:
每年都希望隔年花更多時間備稿