Vue 3.3“浪客剑心”发布
点击“
开发者技术前线
”,选择“星标”
改进开发者使用
好文点个在看吧
让一部分开发者看到未来
| 来自:OSC开源社区(ID: oschina2013)
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:https://github.com/vuejs/core/blob/main/CHANGELOG.md#330-2023-05-08
—
完
—
点这里👇关注我,记得收藏订阅哦~
历史推荐
好文点个在看吧
评论