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。