Vue3.3、3.4非实验性功能变动简记

紧跟时事(滑稽)

Vue3.3

1.Props支持导入类型和交叉类型使用

<script setup lang="ts">
import type {Props} from './types'

defineProps<Props & {extra?:string}>()
</script>

2.泛型组件

<script setup lang="ts" generic="T extends string | number,U extends Props">
import type {Props} from './types'
defineProps<{extra:T,list:U[]}>()
</script>

3.更直观的defineEmits

// 基于类型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 3.3+: 可选的、更简洁的语法
const emit = defineEmits<{
  change: [id: number]
  update: [value: string]
}>()

4.defineOptions转正

<script setup lang="ts">
defineOptions({
  inheritAttrs:false,
  name:'Harexs'
})
</script>

5.新增toValue工具函数

作用就是转传入的任意值转为原始类型

toValue(ref(1)) //1

优化

分离类型检查和构建优化，使用rollup-plugin-esbuild
从 Jest 迁移到 Vitest，测试速度更快
从 @microsoft/api-extractor 迁移到 rollup-plugin-dts，更快地生成类型

Vue3.4

defineModel转正

最好吃的一个语法糖转正了，直接贴代码

// 外部使用 <HelloVue v-model="count"></HelloVue>
// 组件内部 <input v-model="count" /> 
const count = defineModel(); //不再需要props emits 就这么简单

同名简写优化

<img :id="id" :src="src" :alt="alt" />

<!-- 优雅简写为： -->
<img :id :src :alt />

优化

优化模板解析器，SFC组件的编译性能提升
优化响应式API，如在watchEffect监听computed，只有computed结果确实改变了才会触发watchEffect
SSR优化