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 语法声明 propsdeclare 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>复制代码 |