几个 Vue 3 重要特性

1. <component> 组件导入语法糖

在目前的写法中，要引入其它组件，就得先在 <script> 中 import，再将其模块名放入组件的 components: {} 属性对象中。比如：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<template>   <Foo/> </template>   <script> import Foo from './Foo.vue'   export default {   components: {     Foo   } } </script> 复制代码

又或者异步组件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<template>   <Foo/> </template>   <script> import { defineAsyncComponent } from 'vue'   export default {   components: {     Foo: defineAsyncComponent(() => import('./Foo.vue'))   } } </script> 复制代码

这样写起来既费力，又在使用新的 Composition API 显得不那么“新”，还是要 props、components 写一大堆。

有鉴于此，新的提案设计成这样：

1 2 3 4 5 6 7 8 9 10

<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() 的组件声明对象也很常见。比如：

1 2 3 4 5 6 7 8 9 10 11 12 13 14

import { ref } from 'vue'   export default {   setup() {     const count = ref(0)     const inc = () => count.value++       return {       count,       inc     }   } } 复制代码

新提案将其简化为：

1 2 3 4 5 6 7 8 9 10 11

<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

比如之前的写法为：

1 2 3 4 5 6 7 8 9 10

import { watchEffect } from 'vue'   export default {   setup($props, { emit: $emit }) {     watchEffect(() => console.log($props.msg))     $emit('foo')     return {}   } } 复制代码

简化后 <script setup> 中写为：

1 2 3 4 5

import { watchEffect } from 'vue'   watchEffect(() => console.log($props.msg)) $emit('foo') 复制代码

声明其它组件选项

使用 <script setup> 后，如果还想手动指定 props 等组件选项，可以用一个 export default 解决，即：

1 2 3 4 5 6 7 8 9 10 11 12 13

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

结合 TypeScript

要声明 $props 或 $emit 等隐式对象的 TS 类型，采用下面的语法：

1 2 3 4 5 6 7 8 9 10 11

<script setup lang="ts"> import { computed } from 'vue'   // 使用 TypeScript 语法声明 props declare const $props: {   msg: string }   export const computedMsg = computed(() => $props.msg + '!!!') </script> 复制代码

重要的是，这些 TS 声明会被自动编译成等价的运行时声明。如以上代码将转化为：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<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 特性，提供了更方便的联动方案：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<template>   <div class="text">hello</div> </template>   <script> export default {   data() {     return {       color: 'red'     }   } } </script>   <style :vars="{ color }"> .text {   color: var(--color); } </style> 复制代码