原來一直學習Vue2的語法，叫Options API的寫法
瞭解後還是很陌生啊~

Options API的寫法，如下:

const App = {
  name: '漂亮的元件',
  data() {
    return {
      num: 0,
    }
  },
  // 不能再option api直接使用箭頭函式，會造成this指向不正確
  //只能在方法裡的函式裡撰寫箭頭函式
  methods: {
    trigger: function() {
      this.num++
    }
  },
    // 不能再option api直接使用箭頭函式，會造成this指向不正確
  //只能在方法裡的函式裡撰寫箭頭函式
  created() {
    this.num = 1;
    console.log(this);
  }
};
Vue.createApp(App).mount('#app');

在元件內會有一處放資料區塊，另外放觸發功能區塊，稱Options API寫法

vue2語法需修改某一個功能時，會須修改多處，
這時在vue3時出現另一種寫法，稱Compositon API的寫法，如下:

  const CompositionApp = {
    setup() {
      // 定義資料
      const num = ref(0);
      // 生命週期
      onMounted(() => {
        num.value = 1;
      });
      // Methods
      function trigger() {
        console.log('trigger')
        num.value++;
      }
      // 匯出方法、資料
      return {
        trigger,
        num
      }
    }
  }
  createApp(CompositionApp).mount('#compositionApp')

可以用功能來區分寫的區塊，放到setup裡面組起來，後續再用return傳出來使用。

目前迷迷糊糊理解度，若有理解錯誤或需補充說明，再請留言提出!!

.
知識點來源:六角課程、網路文章

以上是今天所提供知識點如有誤，再請務必在下面留言~