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。
还没有评论,来说两句吧...