🚀Vue 3.3来了，快来看看吧！🚀
🎉一个demo体验Vue3.3+TypeScript所有新功能🎉
<script setup>+ TypeScript DX 改进
宏中的导入和复杂类型支持
之前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中默认启用。
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