vue3+ts实际开发中该如何优雅书写vue3语法

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
 
type User = { 
  name: string
  age: number
}
 
// ref
const msg1 = ref('')  //  会默认约束成 string 类型，因为ts类型推导
const msg2 = ref<string>('')  //  可以通过范型约束类型
const user1 = ref<User>({ name: 'tang', age: 18 })  //  范型约束
const user2 = ref({} as User)  // 类型断言
 
// reactive
const obj = reactive({})
const user3 = reactive<User>({ name: 'tang', age: 18 })
const user4 = reactive({} as User)
 
// computed
const msg3 = computed(() => msg1.value)
const user5 = computed<User>(() => {
  return { name: 'tang', age: 18 }
})
</script>

npm install pug

// componentA.vue 组件
<template lang="pug">
div
    div {{`我的名字是${name},今年${age}`}}
    div(v-for="item in list",:key="item.name") {{`我的名字是${item.name},今年${item.age}`}}
</template>
<script setup lang="ts">
interface item {
    name: string,
    age: string
}
const props = defineProps<{
    name: string,
    age: string,
    list?: item[] // ?非必传参数
}>()
</script>

// home.vue 页面
<template lang="pug">
.mainBg
    componentA(:name="name",:age="age", :list="list")
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import componentA from '@/components/componentA.vue';
let name = ref('')
const age = ref('')
const list = ref(
    [
        {
            name: '张三',
            age: '20'
        },
        {
            name: '李四',
            age: 18
        },
        {
            name: '王五',
            age: 25
        },
    ]
)
<style lang="scss">
.mainBg {
    padding: 10px;
}
</style>

// componentA.vue 组件
<template lang="pug">
div
    div {{`我的名字是${name},今年${age}`}}
    div(v-for="item in list",:key="item.name") {{`我的名字是${item.name},今年${item.age}`}}
</template>
<script setup lang="ts">
interface item {
    name: string,
    age: string
}
interface Props {
    name: string,
    age: string,
    list?: item[]
}
const props = withDefaults(defineProps<Props>(),{
    name: "小cc",
    age: "18",
    list: ()=> []
})
</script>

// componentA.vue 组件
<template lang="pug">
div
    div {{`我的名字是${name},今年${age}`}}
    //- div(v-for="item in list",:key="item.name") {{`我的名字是${item.name},今年${item.age}`}}
    el-button(type="primary",@click="setName") 向父组件发送 name
    el-button(type="primary",@click="setAge") 向父组件发送 age
</template>
<script setup lang="ts">
interface item {
    name: string,
    age: string
}
interface Props {
    name: string,
    age: string,
    list?: item[]
}
const props = withDefaults(defineProps<Props>(),{
    name: "小cc",
    age: "18",
    list: ()=> []
})
const emits = defineEmits<{
    (e: 'changeName', value: string) : void,
    (e: 'changeAge', value: string) : void,
}>()
const setName = () => {
    emits('changeName', '小橙子')
}
const setAge = () => {
    emits("changeAge", "28")
}
</script>

// home.vue
<template lang="pug">
.mainBg
    componentA(:name="name",:age="age", :list="list", @changeName="changeName",@changeAge="changeAge")
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import componentA from '@/components/componentA.vue';
let name = ref('')
const age = ref('')
const list = ref(
    [
        {
            name: '张三',
            age: '20'
        },
        {
            name: '李四',
            age: 18
        },
        {
            name: '王五',
            age: 25
        },
    ]
)
const changeName = (val: string) => {
    name.value = val
}
const changeAge = (val: string) => {
    age.value = val
}
<style lang="scss">
.mainBg {
    padding: 10px;
}
</style>

// componentB.vue
<template lang="pug">
div
    h1 组件B
    h1 {{msg}}
</template>
<script setup lang="ts">
import {ref} from 'vue'

const msg = ref('今天天气不怎么好')

const changeMsg = (v: string) => {
    msg.value = v
}

// 对外暴露的属性 需要用ref 调用子组件方法是需要把方法暴露出去
defineExpose({
  msg,
  changeMsg,
})
</script>

<template lang="pug">
.mainBg
    el-button(type="primary",@click="handleChangeMsg") 组件B
    componentB(ref="root")
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import componentB from '@/components/componentB.vue';
const root = ref<any>(null)
const handleChangeMsg = () => {
    root.value.changeMsg("果然 下雨了")
}
</script>


<style lang="scss">
.mainBg {
    padding: 10px;
}
</style>