Vue3.3發(fā)布了,有啥新特性?簡(jiǎn)單的了解下

前言

雖然3.3當(dāng)前還處于beta階段但是其帶來(lái)的一些特性十分激動(dòng)人心，就在這里簡(jiǎn)單的給大家?guī)?lái)新特性的前瞻，為以后的升級(jí)做做準(zhǔn)備??

泛型組件支持

Vue一直以來(lái)[1]都是沒(méi)辦法很好的實(shí)現(xiàn)泛型組件，終于在3.3版本增加了這一功能

首先是面向TSX用戶為defineComponent?工具函數(shù)增加了泛型支持，當(dāng)參數(shù)傳入一個(gè)泛型函數(shù)時(shí)類型會(huì)提示正常，比如我們可以基于這個(gè)特性使用tsx簡(jiǎn)單構(gòu)造一個(gè)表格組件

      
        import { defineComponent } from 'vue';
      
      
        
          

      
      
        type Props<T> = { data: T[]; columns: { label: string; field: keyof T }[] };
      
      
        
          

      
      
        const Table = defineComponent(<T,>(props: Props<T>) => {
      
      
          return () => (
      
      
            <table>
      
      
              <thead>
      
      
                <tr>
      
      
                  {props.columns?.map((item) => (
      
      
                    <th>{item.label}th>
      
      
                  ))}
      
      
                tr>
      
      
              thead>
      
      
              <tbody>
      
      
                {props.data?.map((row) =>
      
      
                  props.columns?.map((column) => <td>{row[column.field]}td>)
      
      
                )}
      
      
              tbody>
      
      
            table>
      
      
          );
      
      
        });
      
      
        
          

      
      
        export default Object.assign(Table, {
      
      
          name: 'GenericsTableTsx',
      
      
          props: ['columns', 'data']
      
      
        });
      
      
        
          

      
    

但是值得注意的是我們?nèi)孕枰獮檫@個(gè)組件傳入props屬性，否則在使用的時(shí)候會(huì)將應(yīng)該是props的的屬性掛載到$attrs上，這點(diǎn)其實(shí)基本上杜絕了這樣的用法，所以說(shuō)僅僅只是類型正確，不太推薦生產(chǎn)用這樣的方法構(gòu)建泛型組件。

SFC泛型組件支持

其實(shí)上面的功能還是為了鋪墊這個(gè)，我們了解怎么用SFC來(lái)復(fù)現(xiàn)上面的組件

      
        
          <template>
        
      
      
          <table>
      
      
            <thead>
      
      
              <tr>
      
      
                <th v-for="item in columns">
      
      
                  <slot name="header-cell" v-bind="{ label: item.label }">
      
      
                    {{ item.label }}
      
      
                  slot>
      
      
                th>
      
      
              tr>
      
      
            thead>
      
      
            <tbody>
      
      
              <tr v-for="row in data">
      
      
                <td v-for="column in columns">
      
      
                  <slot name="cell" v-bind="{ data: row[column.field] }">
      
      
                    {{ row[column.field] }}
      
      
                  slot>
      
      
                td>
      
      
              tr>
      
      
            tbody>
      
      
          table>
      
      
        
          template>
        
      
      
        
          <script setup lang="ts" generic="T">
        
      
      
          const { columns, data } = defineProps<{
      
      
            data: T[];
      
      
            columns: {
      
      
              label: string;
      
      
              field: keyof T;
      
      
            }[];
      
      
          }>();
      
      
        
          script>
        
      
    

[email protected]為script增加了一個(gè)屬性generic用于創(chuàng)建泛型參數(shù)，多個(gè)參數(shù)當(dāng)然也像是ts中使用,隔開(kāi)。

評(píng)價(jià): 很強(qiáng)的新特性，vue終于有泛型組件了真的是可喜可賀，就是對(duì)于TSX的支持還是需要額外增加props屬性比較麻煩，這個(gè)問(wèn)題也是比較久遠(yuǎn)的了，希望vue團(tuán)隊(duì)以后在為T(mén)SX的開(kāi)發(fā)體驗(yàn)提升上努努力

defineProps 宏支持引入的類型

這個(gè)需求[2]已經(jīng)2年過(guò)去了，不過(guò)大部分開(kāi)發(fā)者都有使用一些社區(qū)插件來(lái)達(dá)到這個(gè)用法，現(xiàn)在官方終于提供了，在3.3我們可以輕松的使用外部導(dǎo)入的類型創(chuàng)建Props

      
        
          <script setup lang="ts">
        
      
      
        import type { SomeType } from 'some-where'
      
      
        
          

      
      
        const props = defineProps<{ data: SomeType }>()
      
      
        
          script>
        
      
      
        
          

      
    

評(píng)價(jià): 眾望所歸，更方便的管理在Vue項(xiàng)目中的類型，不需要再在SFC中寫(xiě)又臭又長(zhǎng)的類型體操了

defineEmits 宏更簡(jiǎn)便的寫(xiě)法

對(duì)于3.2,defineEmits基于泛型需要這樣使用

      
        defineEmits<{
      
      
          (e: 'foo', id: string): void
      
      
          (e: 'bar',...args: any[]): void
      
      
        }>()
      
      
        
          

      
    

3.3的寫(xiě)法，對(duì)于單個(gè)參數(shù)使用具名元組的方式定義，如果使用rest params的參數(shù)可以直接使用T[]來(lái)解決

      
        defineEmits<{
      
      
          foo: [id: string]
      
      
          bar: any[]
      
      
        }>()
      
      
        
          

      
    

評(píng)價(jià): 提升DX的小功能，函數(shù)重載的形式寫(xiě)起太多的emits確實(shí)有點(diǎn)煩人

為v-model帶來(lái)新的工具

這是來(lái)自智子君[3]的新特性[4]，可以在