OSC开源社区(ID:oschina2013)Vue 3

出品 | OSC开源社区（ID：oschina2013)

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

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

升级到 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)

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

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

< setuplang= "ts">

importtype { Props } from'./foo'

// imported + intersection type

defineProps<Props & { extraProp?: string }>

</ >

引入泛型组件

< setuplang= "ts"generic= "T">

defineProps < {

items:T[]

selected:T

}>

</ > < setuplang= "ts"generic= "T extends string | number, U extends Item">

importtype { Item } from'./types'

defineProps<{

id: T

list: U[]

}>

</ >

改进 defineEmits

// BEFORE

constemit = defineEmits<{

(e: 'foo', id: number): void

(e: 'bar', name: string, ...rest: any[]): void

}> // AFTER

constemit = defineEmits<{

foo: [id: number]

bar: [name: string, ...rest: any[]]

}>

使用 defineSlots 设置 slots 类型

< setup lang= "ts">

defineSlots<{

default?: ( props: { msg: string} ) => any

item?: ( props: { id: number} ) => any

}>

< />

实验性功能

解构 Reactive Props

< 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}` )

</ >

< template> {{ msg }} </ template>

defineModel

<!-- BEFORE -->

< setup>

constprops = defineProps([ 'modelValue'])

constemit = defineEmits([ 'update:modelValue'])

console.log(props.modelValue)

functiononInput( e) {

emit( 'update:modelValue', e.target.value)

</ >

< template>

< input:value= "modelValue"@ input= "onInput"/>

</ template> <!-- AFTER -->

< setup>

constmodelValue = defineModel

console.log(modelValue.value)

</ >

< template>

< inputv-model= "modelValue"/>

</ template>

详情查看完整 Changelog：

Dart 3正式发布：100%健全的空值安全、迄今为止最大版本

前端框架Svelte放弃Type，JS赢！

首个中文医学知识LLM：真正的赛华佗—华驼(HuaTuo)

🌟 活动推荐

2023 年 5 月 27-28 日，GOTC 2023 全球开源技术峰会将在上海张 江科学会堂隆重举行。

为期 2 天的开源行业盛会，将以行业展览、主题发言、特别论坛、分论坛、快闪演讲的形式来诠释此次大会主题 ——“Open Source, Into the Future”。 与会者将一起探讨元宇宙、3D 与游戏、eBPF、Web3.0、区块链等热门技术主题，以及 OSPO、汽车软件、AIGC、开源教育培训、云原生等热门话题，探讨开源未来，助力开源发展。

长按识别下方二维码立即查看 GOTC 2023 详情/报名。