一，component動態元件

由於元件被引用為變數而不是作為字串鍵來註冊的，在 <script setup> 中要使用動態元件的時候，就應該使用動態的 :is 來繫結：

<script setup lang='ts'>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
 
<template>
  <component :is="Foo" />
  <component :is="someCondition ? Foo : Bar" />
</
 
template>

二，ts限制普通函式/箭頭函式引數型別

<script setup lang="ts">
function test(params:(string|boolean)):void {
console.log(params);
}
test('5555')
</script>

<script setup lang="ts">
const test = (params:(string|boolean))=>{
console.log(params)
}
test('5555')
</script>

三，引入vuex配置和使用

npm install vuex@next --save

main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 匯入store模組, 傳入 injection key
import store from './store';
 
const app = createApp(App)
app.use(store)
app.mount('#app')

store資料夾下index.ts

// 引入
import { createStore } from "vuex";
 
export default createStore({
  // 宣告變數
  state: {
    "name": 'xxxxx'
  },
  // 修改變數（state不能直接賦值修改，只能通過mutations）
  mutations: {
    setName(state, newValue){
      state.name = newValue
    }
  },
  actions: {},
  modules: {},
});
 

vuex.vue測試檔案

<template>
  <button @click="changeName" size="small">點選修改名稱</button>
</template>
 
<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed } from "vue";
import { useStore } from 'vuex'
// data
const store = useStore()
let name = computed(()=>{ return store.state.name });
// props
// emit
// methods
function changeName():void{
    store.commit('setName', '哈哈哈')
    console.log('修改後的名稱：'+name.value);
}
//watch
// defineExpose
// 生命週期
onMounted(() => {
  console.log(name.value)
});
 
</script>