Vue 3.3 “浪客剑心”发布

Vue 3.3 已正式发布，代号 "Rurouni Kenshin"（浪客剑心）。

公告写道，此版本专注于改进开发者使用体验 —— 特别是 SFC<script setup>与 TypeScript 的结合使用。一同发布的还有 Vue Language Tools 1.6（旧 Volar），解决了 Vue 与 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)

---

改进开发者使用<script setup> + TypeScript 的体验

• 面向宏支持类型导入和复杂类型

 <script setup lang="ts"> import type { Props } from './foo'  // imported + intersection type defineProps<Props & { extraProp?: string }>() </script>

• 引入泛型组件

 <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>

• 改进defineEmits

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

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

• 使用defineSlots设置 slots 类型

 <script setup lang="ts"> defineSlots<{   default?: (props: { msg: string }) => any   item?: (props: { id: number }) => any }>() </script>

实验性功能

• 解构 Reactive Props

 <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>

• defineModel

 <!-- 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>

 <!-- AFTER --> <script setup> const modelValue = defineModel() console.log(modelValue.value) </script>  <template>   <input v-model="modelValue" /> </template>

详情查看完整 Changelog。