一、準備

1.1 簡介

vue提案連結（注意詳細連結每天都在變化，這是 vue 官方的在github維護的提案倉庫，寫在今天的提案索引是 40，自己進入連結尋找）
setup語法糖 一個減少重複程式碼的語法糖，之前setup語法糖的提案在修改階段，現階段已經定稿，詳情看下面的語法
當然這個提案出來很久了，年初就出來了。我也是最近在使用 vue3，組合api沒什麼難度，和 React 的鉤子函式類似。其他 api 大差不差

1.2 外掛準備

如果你使用vscode編輯器，最好安裝 Volar 外掛，它和 Vetur 一樣也會對.Vue格式的檔案高亮顯示，支援vue2、vue3，並且還多了在 template 中對 TypeScript 的支援，以及本文要說的 setup語法糖

Note: You need to disable Vetur to avoid conflicts.

Vetur 也是之前寫 vue2 很常用的外掛，但是它已經十分落後，不支援 vue3 的 setup 語法糖，會發生衝突，如果你想寫 vue3 的 setup 語法糖請解除安裝或者禁用它，安裝 Volar 足矣。

<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";  //此處使用 Vetur 外掛會報紅
</script>

二、語法

2.1 元件引入

之前的寫法

<script lang="ts">
import { defineComponent } from 'vue';
import HelloWord from '@/components/HelloWord.vue';
export default defineComponent({
  name: 'Home',
  components:{
    HelloWord
  }
});
</script>

現在的寫法

<script setup lang="ts">
import HelloWord from '@/components/HelloWord.vue'; //不用註冊，引入即註冊
</script>
 

2.2 定義元件的 props

<script setup lang="ts">
import { ref,defineProps } from 'vue'
type Props={
  msg:string
}
defineProps<Props>();
</script>

2.3 定義響應變數、函式、監聽、計算屬性....

<script setup lang="ts">
import { ref,computed,watchEffect } from 'vue'
const count = ref(0); //不用 return ，直接在 templete 中使用
const addCount=()=>{  //定義函式，使用同上
  count.value++;
}
const howCount=computed(()=>"現在count值為："+count.value);//定義計算屬性，使用同上
watchEffect(()=>console.log(count.value)); //定義監聽，使用同上
//...some code else
</script>

2.3 使用 await 非同步

注意在vue3的原始碼中，setup執行完畢，函式 getCurrentInstance 內部的有個值會釋放對 currentInstance 的引用，await 語句會導致後續程式碼進入非同步執行的情況。所以上述例子中最後一個 getCurrentInstance() 會返回 null，建議使用變數儲存第一個 getCurrentInstance() 返回的引用.

三、其他

3.1 語法糖實現

vue檔案程式碼

<template>
  <div>{{ msg }}</div>
</template>
<script setup>
  const msg = 'Hello!'
</script>

編譯後的js程式碼：

export default {
  setup() {
    const msg = 'Hello!'

    return function render() {
      // has access to everything inside setup() scope
      // 在函式 setup 作用域，函式 render 能訪問 setup 的一切，
      return h('div', msg)
    }
  }
}

注意到，即使普通變數也能作為模版被置入 template 中被編譯，某些人認為這不合適，不夠分離。我覺得還好，還ok