Vue 3.3“浪客剑心”发布

(资料图)

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

公告写道，此版本专注于改进开发者使用体验 —— 特别是 SFC<script setup>与 TypeScript 的结合使用。一同发布的还有Vue Language Tools1.6（旧 Volar），解决了 Vue 与 TypeScript 一起使用时许多长期存在的痛点。

升级到 3.3 时，建议同时更新以下依赖项：

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

<script setup lang="ts">import type { Props } from "./foo"// imported + intersection typedefineProps()</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>

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

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

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

实验性功能

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

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

<script setup>const modelValue = defineModel()console.log(modelValue.value)</script>

详情查看完整 Changelog。