setup語法糖體驗

一、准備

1.1 簡介

vue提案鏈接（注意詳細鏈接每天都在變化，這是 vue 官方的在github維護的提案倉庫，寫在今天的提案索引是 40，自己進入鏈接尋找）
setup語法糖 一個減少重復代碼的語法糖，之前setup語法糖的提案在修改階段，現階段已經定稿，詳情看下面的語法

1.2 插件准備

如果你使用vscode編輯器，最好安裝 Volar 插件，它和 Vetur 一樣也會對.Vue格式的文件高亮顯示，支持vue2、vue3，並且還多了在 template 中對 TypeScript 的支持，自定義組件標簽高亮，以及本文要說的 setup語法糖 支持
注意來自Volar插件的提示：

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