Vue 3.3“浪客劍心”發(fā)布

點擊“ 開發(fā)者技術前線 ”，選擇“星標”

讓一部分開發(fā)者看到未來

?| 來自：OSC開源社區(qū)（ID： oschina2013)

Vue 3.3 已正式發(fā)布，代號 "Rurouni Kenshin"（浪客劍心）。 公告寫道，此版本專注于改進開發(fā)者使用體驗 —— 特別是 SFC <script setup> ?與 TypeScript 的結合使用。一同發(fā)布的還有 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)

---

改進開發(fā)者使用?<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 —? 完 ?—

點這里??關注我，記得收藏訂閱哦～

歷史推薦

前端框架Svelte放棄TypeScript，JS贏！

MiniGPT4，開源了

官宣，Google DeepMind 成立

好文點個在看吧