vue3.3
1.支持宏中的导入类型和复杂类型
在 3.2 及以下版本中，defineProps() 的泛型类型参数只能使用类型字面量或者本地接口的引用。
此限制现已被 Vue 3.3 解决。编译器现在可以解析导入类型，并支持一组有限的复杂类型：
<script setup lang="ts">
import { Props } from "type";
defineProps<Props>()
</script>
官方文档链接：cn.vuejs.org/api/sfc-scr…
泛型组件
使用了
<script setup lang="ts" generic="T extends string | number">
defineProps<{
id:T
}>()
</script>
官方文档链接：cn.vuejs.org/api/sfc-scr…
更简洁的语法defineEmits
以前，defineEmits 的类型参数能且仅能支持调用签名语法：
const emit = defineEmits<{
(e: 'change', id: number): void
(e: 'update', value: string): void
}>()
该类型匹配 emit 的返回类型，但有点冗长且难以编写，现在3.3+引入另一种更简洁的语法
const emit = defineEmits<{
change: [id: number] // 具名元组语法
update: [value: string]
}>()
官方文档链接：cn.vuejs.org/api/sfc-scr…
defineOptions
新的 defineOptions 宏允许直接在
defineOptions({
inheritAttrs:false
})
官方文档链接：cn.vuejs.org/api/sfc-scr…
toRef更好地支持 getter
以前我们取props的一个属性为一个单独的响应的数据时，我们会如下做法：
defineProps<
{
num: number
}
>()
const toRfeNum = toRef(props,'num')
3.3+之后创建一个只读的 ref，当访问 .value 时会调用此 getter 函数
const getterNum = toRef(()=> props.num)
官方文档链接：cn.vuejs.org/api/sfc-scr…
响应式 props 解构
该功能允许解构的 props 保留响应性
<script setup lang="ts">
interface Props {
msg: string
count?: number
foo?: string
}
const {
msg,
// 默认值正常可用
count = 1,
// 解构时命别名也可用
// 这里我们就将 `props.foo` 命别名为 `bar`
foo: bar
} = defineProps<Props>()
watchEffect(() => {
// 会在 props 变化时打印
console.log(msg, count, bar)
})
</script>
官方文档链接：cn.vuejs.org/guide/extra…
vue3.4
vue3.4版本已更新，主要是内部性能的增强，如模板解析器速度提高了 2 倍，以及重构的反应系统使效果触发更加准确和高效， ( 但中文官方文档还未更新)
defineModel功能稳定
defineModel是一个新的
defineModel可以实现一个双向绑定的值(3.4+)
<!-- Child.vue -->
<script setup>
const model = defineModel()
function update() {
model.value++
}
</script>
<template>
<div>parent bound v-model is: {{ model }}</div>
</template>
<!-- Parent.vue -->
<Child v-model="count" />
官方文档链接：vuejs.org/guide/compo…
v-bind同名简写
<img :id="id" :src="src" :alt="alt">
您现在可以缩短它：
<img :id :src :alt>
