日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

1寫在前面

Vue官方團(tuán)隊(duì)在5月10日宣布發(fā)布 Vue 3.3 "浪客劍心"！

此版本專注于改進(jìn)開發(fā)人員體驗(yàn) ，特別是 SFC 

注意：defineProps和defineEmits并不是100%全面支持復(fù)雜類型，例如不能對(duì)整個(gè)props對(duì)象像普通類型一樣進(jìn)行條件類型，但是可以對(duì)單個(gè)prop類型使用條件類型。

import type { TestProps } from "./props";
defineProps();

如上面使用條件類型，將會(huì)拋出異常：

詳細(xì)說明見：PR#8083

3通過generic屬性定義泛型組件

使用vue的setup語法糖的組件，可以通過在generic屬性傳遞泛型類型參數(shù)，從而構(gòu)成泛型組件：

通過generic接受的泛型類型，和Typescript中的泛型的參數(shù)列表使用方法是一樣的，這就意味著你可以定義多個(gè)泛型參數(shù)、使用extends約束、默認(rèn)類型和引用import導(dǎo)入的類型。

注意：此功能在之前需要顯式開啟，在最新版本的volar/vue-tsc中已支持默認(rèn)開啟。

詳細(xì)說明見：RFCS#436

4更符合人體工程學(xué)的 defineEmits

在Vue3.3之前的defineEmits的類型僅支持使用簽名語法：

interface EmitsType{
  (event: 'change', value: T): void
  (event: 'click', value: T, ...rest:U[]): void
}

defineEmits>()

interface EmitsType{
  change: (value: T) => void
  click: (value: T, ...rest:U[]) => void
}

defineEmits>()

此種方式定義的類型和emit返回的類型匹配，但是在實(shí)際開發(fā)中編寫代碼比較冗長和笨拙，Vue3.3對(duì)此進(jìn)行優(yōu)化使得更加符合人類習(xí)慣。

interface EmitsType{
  change: [ value: T ],
  click: [ value:T, ...rest: U[] ]
}

defineEmits>()

在使用類型字面量形式中，鍵key是事件名稱，值value是指定附加參數(shù)的數(shù)組類型，對(duì)此可以使用標(biāo)識(shí)元組元素的形式。見元組元素標(biāo)記

Vue3.3對(duì)于defineEmits的泛型定義形式并不是破壞性改變，對(duì)原有的簽名語法依舊支持。

5使用 defineSlots 設(shè)置 slots 類型

Vue3.3后的defineSlots宏支持聲明預(yù)期的插槽和對(duì)應(yīng)插槽的props類型。

當(dāng)前，defineSlots僅接受一個(gè)類型參數(shù)，不支持運(yùn)行時(shí)參數(shù)，且類型參數(shù)限制為一個(gè)類型字面量：

• key：slot名稱
• value：slot函數(shù)，插槽函數(shù)的第一個(gè)參數(shù)是插槽期望接受的props，其定義的類型是用于模板中的插槽props。

defineSlots 的返回值與 useSlots 返回的插槽對(duì)象相同。

注意：

• volar / vue-tsc 尚未實(shí)現(xiàn) slots 類型檢查。
• slot 函數(shù)的返回類型目前是忽略的，是any類型，但我們可能會(huì)在將來利用它進(jìn)行 slot 內(nèi)容檢查。

此外，defineComponent 用法也有對(duì)應(yīng)的 slots 選項(xiàng)。 這兩個(gè) API 都沒有運(yùn)行時(shí)影響，并且純粹用作 IDE 和 vue-tsc 的類型提示。

import { SlotsType } from 'vue'

defineComponent({
  slots: Object as SlotsType<{
    default: { foo: string; bar: number }
    item: { data: number }
  }>,
  setup(props, { slots }) {
    expectType any)>(
      slots.default
    )
    expectType any)>(slots.item)
  }
})

更多詳情見：PR#7982

6實(shí)驗(yàn)性功能

響應(yīng)式props解構(gòu)

響應(yīng)式props解構(gòu)此前是現(xiàn)已刪除的 Reactivity Transform 的一部分，Vue3.3現(xiàn)已將其拆分成獨(dú)立功能。

響應(yīng)式props解構(gòu)的功能毫無疑問是為解構(gòu)后的props屬性提供響應(yīng)式，此外還提供了更加符合用戶習(xí)慣的聲明props默認(rèn)值方式。

官方給出的demo是這樣寫，但是實(shí)際使用中發(fā)現(xiàn)不能對(duì)props進(jìn)行泛型類型聲明，解構(gòu)后的屬性失去了類型推斷 不建議使用這種方式。

const {  name ="dudu" } = defineProps(["name"])

個(gè)人推薦搭配withDefaults進(jìn)行賦默認(rèn)值和響應(yīng)式解構(gòu)，有解構(gòu)需要時(shí)可以進(jìn)行解構(gòu)賦值，沒有時(shí)可以在withDefaults中賦默認(rèn)值。

const {  name = "dudu" } = withDefaults(defineProps<{
}>(),{})

如果搭配withDefaults同時(shí)進(jìn)行響應(yīng)式解構(gòu)時(shí)賦默認(rèn)值，那么解構(gòu)時(shí)不能改變withDefaults賦的默認(rèn)值，也就是withDefaults的默認(rèn)值是不可改變的。

const {  name ="dudu" } = withDefaults(defineProps<{
  name: string
}>(),{
  name:"dudududududu"
})

我們看到只會(huì)顯示withDefaults的默認(rèn)值：

注意：此功能是實(shí)驗(yàn)性功能，需要在打包配置中進(jìn)行手動(dòng)開啟。

更多詳情見：RFC#502

defineModel

在Vue3.3前的組件想要支持v-model使用，需要：

• 聲明props
• 在打算更新props時(shí)，使用emit進(jìn)行相應(yīng)的update:proName事件

子組件支持v-model的方式：

與此同時(shí)，父組件需要進(jìn)行對(duì)應(yīng)聲明使用：

執(zhí)行效果：

Vue3.3引入了一個(gè)名為 defineModel 的新 SFC 宏，該宏增強(qiáng)了聲明 v-model 使用的雙向綁定道具時(shí)的開發(fā)人員體驗(yàn)。使用 defineModel ，v-model綁定的props 可以像 ref 一樣被聲明和解構(gòu)。

• defineModel 宏是 

  根據(jù)接受 defineModel 返回值的變量名，這里是 modelValue，會(huì)自動(dòng)定義 props 名為 modelValue，emit 事件為 update:modelValue。

  此外，defineModel也支持聲明變量名稱、類型和賦初值，其實(shí)就是props和emit的結(jié)合體。

  const count = defineModel('count', { default: 0 })

  注意：Vue3.3引入了一個(gè)新的編譯器腳本選項(xiàng) defineModel ，默認(rèn)情況下處于禁用狀態(tài)，需要手動(dòng)進(jìn)行配置開啟。

  在vite的配置如下：

  // https://vitejs.dev/config/
  export default defineConfig({
    plugins: [vue({
      // propsDestructure: true,
      script: {
        defineModel: true,
      }
    })],
  })

  更多詳情見：RFC#503

  7其他特性

  新增宏defineOptions

  新增defineOptions 允許直接在 

  增強(qiáng) toRef 和 toValue 實(shí)現(xiàn)更好的 getter 支持

  toRef 已得到增強(qiáng)以支持將值/getters/現(xiàn)有 refs 規(guī)范化為 refs：

  // 相當(dāng)于 ref(1)
  toRef(1)
  // 創(chuàng)建只讀 ref，使用 .value 時(shí)執(zhí)行 getter
  toRef(() => props.foo)
  // 返回 ref
  toRef(existingRef)

  使用 getter 調(diào)用 toRef 類似于 computed，但是當(dāng) getter 只執(zhí)行屬性訪問而沒有昂貴的計(jì)算時(shí)，可以更高效。

  新的 toValue 工具方法提供相反的功能，即將值/ getter / ref 規(guī)范化為值：

  toValue(1) //       --> 1
  toValue(ref(1)) //  --> 1
  toValue(() => 1) // --> 1

  toValue 可以在組合式函數(shù)中代替 unref，以便組合式函數(shù)可以接受 getter 作為響應(yīng)式數(shù)據(jù)源：

  // 以前：分配不必要的中間引用
  useFeature(computed(() => props.foo))
  useFeature(toRef(props, 'foo'))
  
  // 現(xiàn)在：更高效和簡潔
  useFeature(() => props.foo)

  toRef 和 toValue 之間的關(guān)系類似于 ref 和 unref 之間的關(guān)系，主要區(qū)別在于 getter 函數(shù)的特殊處理。

  JSX 導(dǎo)入源支持

  目前，Vue 的類型自動(dòng)注冊(cè)全局 JSX 類型。這可能會(huì)與需要 JSX 類型推斷的其他庫一起使用時(shí)發(fā)生沖突，特別是 React。

  從3.3開始，Vue 支持通過 TypeScript 的 jsxImportSource 選項(xiàng)指定 JSX 命名空間。這允許用戶根據(jù)其需要，選擇全局或每個(gè)文件的選擇加入。

  為了向后兼容，3.3 仍然全局注冊(cè) JSX 命名空間。我們計(jì)劃在 3.4 中刪除默認(rèn)的全局注冊(cè)。如果您正在使用 TSX 與  Vue，請(qǐng)?jiān)谏?jí)到 3.3后在 tsconfig.json 中添加顯式的 jsxImportSource，以避免在 3.4 中出現(xiàn)問題。

  按計(jì)劃，Vue官方的目標(biāo)是在2023年開始制作較小，更頻繁的功能發(fā)行版。

  更多內(nèi)容閱讀：vue官方博客https://blog.vuejs.org/posts/vue-3-3

  8寫在最后

  Vue3.3沒有進(jìn)行大的功能破壞性改變，在使用體驗(yàn)上更加符合人體工程學(xué)和用戶習(xí)慣，沒有心智負(fù)擔(dān)。

  Vue3.3主要有以下變化：

  • 增強(qiáng)defineProps和defineEmits支持外部import類型和復(fù)雜類型
  • 新增通過generic屬性定義泛型組件
  • 增強(qiáng)更符合人體工程學(xué)的 defineEmits
  • 增強(qiáng)使用 defineSlots 設(shè)置 slots 類型

  實(shí)驗(yàn)性功能：

  • 響應(yīng)式props解構(gòu)
  • 新增defineModel實(shí)現(xiàn)v-model屬性更新值

  其他特性：

  • 新增宏defineOptions聲明組件選項(xiàng)
  • 增強(qiáng) toRef 和 toValue 實(shí)現(xiàn)更好的 getter 支持
  • JSX 導(dǎo)入源支持

  學(xué)而知不足，水平有限，還望諸君多多指教。覺得文章不錯(cuò)的讀者，不妨點(diǎn)個(gè)關(guān)注，收藏起來上班摸魚的時(shí)候品嘗。

  
  標(biāo)題名稱：代號(hào)：Rurouni Kenshin，vue3.3正式發(fā)布，快來嘗鮮?。?！
  文章出自：http://www.5511xx.com/article/cohdhjo.html