🎉一个demo体验Vue3.3+TypeScript所有新功能🎉
<setup>+TypeScript改进
宏中的导入和复杂类型支持
之前and的类型参数位置使用的类型defineProps仅限defineEmits于本地类型，只支持类型字面量和接口。这是因为 Vue 需要能够分析 props 接口上的属性，以便生成相应的运行时选项。
此限制现已在 3.3 中解决。编译器现在可以解析导入的类型，并支持一组有限的复杂类型：
<script setup lang="ts"> import type { Props } from './foo' // imported + intersection type defineProps<Props & { extraProp?: string }>() </script>
请注意，复杂类型支持是基于 AST 的，因此不是 100% 全面的。不支持某些需要实际类型分析的复杂类型，例如条件类型。您可以对单个 props 的类型使用条件类型，但不能对整个 props 对象使用。细节请看：PR#8083
generic组件
使用的组件<script setup>支持范型和继承
<script setup lang="ts" generic="T"> defineProps<{ items: T[] selected: T }>() </script>
<script setup lang="ts" generic="T extends string | number, U extends Item"> import type { Item } from './types' defineProps<{ id: T list: U[] }>() </script>
此功能在最新版本的volar/vue-tsc中默认启用。
- 讨论：RFC#436
- 相关：通用
defineComponent()- PR#7963
defineEmits改进
以前，for 的类型参数defineEmits仅支持调用签名语法：
// BEFORE const emit = defineEmits<{ (e: 'foo', id: number): void (e: 'bar', name: string, ...rest: any[]): void }>()
3.3 引入了一种更符合人体工程学的方式来声明：
// AFTER const emit = defineEmits<{ foo: [id: number] bar: [name: string, ...rest: any[]] }>()
在类型文字中，键是事件名称，值是指定附加参数的数组类型。虽然不是必需的，但您可以使用带标签的元组元素来明确显示，如上例所示。
带类型的插槽defineSlots
<script setup lang="ts"> defineSlots<{ default?: (props: { msg: string }) => any item?: (props: { id: number }) => any }>() </script>
当前的一些限制：
volar/vue-tsc中尚未实现必需的插槽检查。- 插槽函数返回类型目前被忽略，可以是
any，但我们将来可能会利用它来检查插槽内容。
还有相应的使用slots选项defineComponent。这两个 API 都没有运行时影响，并且纯粹用作 IDE 和vue-tsc.
- 详情：PR#7982
实验性的一些功能
解构可以保留响应式了
该功能允许解构的数据保留反应性，并提供更符合人体工程学的方式来声明道具默认值：
<script setup> import { watchEffect } from 'vue' const { msg = 'hello' } = defineProps(['msg']) watchEffect(() => { // accessing `msg` in watchers and computed getters // tracks it as a dependency, just like accessing `props.msg` console.log(`msg is: ${msg}`) }) </script> <template>{{ msg }}</template>
- 详细信息：RFC#502
defineModel
以前，对于支持双向绑定的组件v-model，它需要声明一个prop和update:propName在它打算更新 prop 时发出相应的事件：
<!-- BEFORE --> <script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) console.log(props.modelValue) function onInput(e) { emit('update:modelValue', e.target.value) } </script> <template> <input :value="modelValue" @input="onInput" /> </template>
3.3 简化了defineModel。宏会自动注册一个 prop，并返回一个可以直接改变的 ref：
<!-- AFTER --> <script setup> const modelValue = defineModel() console.log(modelValue.value) </script> <template> <input v-model="modelValue" /> </template>
- 详细信息：RFC#503
其他显着特点
defineOptions
新defineOptions宏允许直接在 中声明组件选项<script setup>，而不需要单独的<script>块：
<script setup> defineOptions({ inheritAttrs: false }) </script>
toRef和toValue
toRef已得到增强以支持将值/获取器/现有引用规范化为引用：
// equivalent to ref(1) toRef(1) // creates a readonly ref that calls the getter on .value access toRef(() => props.foo) // returns existing refs as-is toRef(existingRef)
使用 getter调用toRef类似于computed，但当 getter 仅执行属性访问而不进行昂贵的计算时，调用效率更高。
新的toValue实用方法提供了相反的方法，将 values / getters / refs 规范化为值：
toValue(1) // --> 1 toValue(ref(1)) // --> 1 toValue(() => 1) // --> 1
toValue可以在可组合项中使用代替，unref以便您的可组合项可以接受 getter 作为反应式数据源：
// before: allocating unnecessary intermediate refs useFeature(computed(() => props.foo)) useFeature(toRef(props, 'foo')) // after: more efficient and succinct useFeature(() => props.foo)
- 详情：PR#7997
JSX 导入源支持
从 3.3 开始，Vue 支持通过 TypeScript 的jsxImportSource选项指定 JSX 命名空间。这允许用户根据他们的用例选择全局或每个文件选择加入。
为了向后兼容，3.3 仍然全局注册 JSX 命名空间。我们计划在 3.4 中移除默认的全局注册。
jsxImportSource如果您将 TSX 与 Vue 一起使用，则应在升级到 3.3 后向您添加tsconfig.json
