Vue3 script setup 语法糖（升级版）

序：

​ 使用了vue3后发现变量每次都必须return，不免很麻烦，所以在vue3.2添加了script setup 语法糖，本次修改主要从以下5个方面做了修改:

1.SSR：服务端渲染优化。@vue/server-renderer包加了一个ES模块创建， 与Node.js解耦，使在非Node环境用@vue/serve-render做服务端渲染成为可能， 比如(Workers、Service Workers)

2.New SFC Features：新的单文件组件特性

3.Web Components：自定义 web 组件。这个我们平时很少用到，但是应该知道

4.Effect Scope API： effect 作用域， 用来直接控制响应式副作用的释放时间(computed 和 watchers)。 这是底层库的更新，开发不用关心，但是应该知道

5.Performance Improvements：性能提升。这是内部的提升，跟开发无关

一、变量、方法不需要 return 出来

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

官方中文文档

二、组件不需要在注册

在 script setup 中，引入的组件可以直接使用，无需再通过components进行注册，并且无法指定当前组件的名字，它会自动以文件名为主，也就是不用再写name属性了

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

三、新增 defineProps、defineEmits、defineExpose

1、父传子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2、子传父

defineEmits

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

defineExpose

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

3、小结

// 第一种不带默认值props
const props = defineProps<{
  foo: string
  bar?: number
}>()
// 第二种带默认值props

export interface ChildProps {
  foo: string
  bar?: number
}

const props = withDefaults(defineProps<ChildProps>(), {
   foo: "1qsd"
  bar?: 3
})

// 第一种获取事件
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()

// 第二种获取事件
 
const emit = defineEmits(["dosth"])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

四、新增指令 v-memo

v-memod会记住一个模板的子树，元素和组件上都可以使用。 该指令接收一个固定长度的数组作为依赖值进行[记忆比对]。 如果数组中的每个值都和上次渲染的时候相同，则整个子树的更新会被跳过。 即使是虚拟 DOM 的 VNode 创建也将被跳过，因为子树的记忆副本可以被重用。 因此渲染的速度会非常的快。

注意：正确地声明记忆数组是很重要。

    {{ item.name   }}

1
2
3

作用：缓存模板中的一部分数据。只创建一次，以后就不会再更新了。也就是说用内存换取时间。一般用于前端搜索筛选。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

五、useAttrs和useSlots

useAttrs 可以获取父组件传过来的id和class等值。 useSlots 可以获得插槽的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

六、自定义指令

1
2
3
4
5
6
7
8
9
10
11

番外：style v-bind

style v-bind将span变成红色

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