實用！最新的幾個 Vue 3 重要特性提案

在幾天前開啓的 SFC Improvements #182 中，yyx990803 提交了 3 個改進開發者體驗的徵求意見稿。

雖然看上去都不是體量很大的改動，但都至關實用，開發者誰用誰知道！一塊兒來先睹爲快：

1. <component> 組件導入語法糖

在目前的寫法中，要引入其它組件，就得先在 <script> 中 import，再將其模塊名放入組件的 components: {} 屬性對象中。好比：

<template>
  <Foo/>
</template>

<script> import Foo from './Foo.vue' export default { components: { Foo } } </script>
複製代碼

又或者異步組件：

<template>
  <Foo/>
</template>

<script> import { defineAsyncComponent } from 'vue' export default { components: { Foo: defineAsyncComponent(() => import('./Foo.vue')) } } </script>
複製代碼

這樣寫起來既費力，又在使用新的 Composition API 顯得不那麼「新」，仍是要 props、components 寫一大堆。

有鑑於此，新的提案設計成這樣：

<component src="./Foo.vue"/>
<component async src="./Bar.vue"/>
<component src="./Baz.vue" as="Qux" />

<template>
  <Foo/>
  <Bar/>
  <Qux/>
</template>
複製代碼

2. 簡化 Composition API 的 <script setup>

正如上面提到過的，在使用新的 Composition API 時，對於不用引入其它組件的、相對簡單的那些組件來講，只包含一個 setup() 的組件聲明對象也很常見。好比：

import { ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const inc = () => count.value++

    return {
      count,
      inc
    }
  }
}
複製代碼

新提案將其簡化爲：

<template>
  <button @click="inc">{{ count }}</button>
</template>

<script setup> import { ref } from 'vue' export const count = ref(0) export const inc = () => count.value++ </script>
複製代碼

另外，<script setup> 中將隱式注入幾個對象：

• $props
• $attrs
• $slots
• $emit

好比以前的寫法爲：

import { watchEffect } from 'vue'

export default {
  setup($props, { emit: $emit }) {
    watchEffect(() => console.log($props.msg))
    $emit('foo')
    return {}
  }
}
複製代碼

簡化後 <script setup> 中寫爲：

import { watchEffect } from 'vue'

watchEffect(() => console.log($props.msg))
$emit('foo')
複製代碼

聲明其它組件選項

使用 <script setup> 後，若是還想手動指定 props 等組件選項，能夠用一個 export default 解決，即：

<script setup> import { computed } from 'vue' export default { props: { msg: String }, inheritAttrs: false } export const computedMsg = computed(() => $props.msg + '!!!') </script>
複製代碼

結合 TypeScript

要聲明 $props 或 $emit 等隱式對象的 TS 類型，採用下面的語法：

<script setup lang="ts"> import { computed } from 'vue' // 使用 TypeScript 語法聲明 props declare const $props: { msg: string } export const computedMsg = computed(() => $props.msg + '!!!') </script>
複製代碼

重要的是，這些 TS 聲明會被自動編譯成等價的運行時聲明。如以上代碼將轉化爲：

<script lang="ts"> import { computed, defineComponent } from 'vue' type __$props__ = { msg: string } export default defineComponent({ props: (['msg'] as unknown) as undefined, setup($props: __$props__) { const computedMsg = computed(() => $props.msg + '!!!') return { computedMsg } } }) </script>
複製代碼

這樣也避免了爲靜態檢查和運行時寫兩遍重複的聲明。

3. 狀態驅動的 <style> 中 CSS 變量注入

以往要根據狀態或屬性來影響樣式的話，仍是比較麻煩的。首先要提早在 <style> 中寫好幾種 className 對應的樣式，再利用腳本動態在模版中賦相應的 className 才行。

新提案結合原生的 CSS variables 特性，提供了更方便的聯動方案：

<template>
  <div class="text">hello</div>
</template>

<script> export default { data() { return { color: 'red' } } } </script>

<style :vars="{ color }"> .text { color: var(--color); } </style>
複製代碼

總結

再次重複，這幾個特性僅僅是最新的提案，並不必定是最終的樣子；但鑑於其實用性，開發者仍是有必要早作了解，多提建議。

提案地址以下：github.com/vuejs/rfcs/…

--End--

查看更多前端好文
請搜索 fewelife 關注公衆號

轉載請註明出處