vue3.3 新特性详解

本文将详细介绍 vue.js 3.3 版本的更新内容,最新版本主要目标是优化开发者的使用体验,包括引入一些新的简化语法和宏,以及在 TypeScript 方面的进一步提升。

前言

当升级到3.3时,建议同时更新以下依赖项:

  • volar / vue-tsc@^1.6.4
  • vite@^4.3.5
  • @vitejs/plugin-vue@^4.2.0
  • vue-loader@^17.1.0 (if using webpack or vue-cli)

defineProps 宏支持引入类型

defineProps 支持使用 import 从外部导入的类型声明,也支持全局变量引入。

// hi.ts
export interface HI {
  name: string;
}

// global.d.ts
declare global {
  interface HI {
    name: string;
  }
}

<script setup lang="ts">
import type { HI } from './hi'
// 支持使用导入的类型 + 交集类型(导入类型基础上增加一个字段)
defineProps<HI & { age: number }>()
</script>

defineEmits 宏更简便的写法

之前 defineEmits 的类型参数只支持调用签名语法。

const emit = defineEmits<{
  (e: 'foo', id: number): void
  (e: 'bar', name: string, ...rest: any[]): void
}>()

// 或者不定义类型
const emit = defineEmits(['update:modelValue'])

vue3.3 中可以简化为以下写法,更加简洁(当然原来的写法照样可以继续使用)。

const emit = defineEmits<{
  foo: [id: number]
  bar: [name: string, ...rest: any[]]
}>()

generic 泛型组件支持

使用

你可能感兴趣的:(vue.js,typescript,前端,前端框架)