Vue3.2 setup语法糖总结

前言

提示：Vue3.2 版本开始才能使用语法糖！

在 Vue3.0 中变量必须 return 出来，template中才能使用；而在 Vue3.2 中只需要在 script 标签上加上 setup 属性，无需 return，template 便可直接使用，非常的香啊！

---

一、如何使用setup语法糖

只需在 script 标签上写上setup

代码如下（示例）：

1
2
3
4
5
6

---

二、data数据的使用

由于 setup 不需写 return，所以直接声明数据即可

代码如下（示例）：

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

---

三、method方法的使用

代码如下（示例）：

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

---

四、watchEffect的使用

代码如下（示例）：

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

---

五、watch的使用

代码如下（示例）：

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

---

六、computed计算属性的使用

computed计算属性有两种写法(简写和考虑读写的完整写法)

代码如下（示例）：

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

---

七、props父子传值的使用

子组件代码如下（示例）：

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

父组件代码如下（示例）：

1
2
3
4
5
6
7
8
9
10

---

八、emit子父传值的使用

子组件代码如下（示例）：

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

父组件代码如下（示例）：

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

---

九、获取子组件ref变量和defineExpose暴露

即vue2中的获取子组件的ref，直接在父组件中控制子组件方法和变量的方法。

子组件代码如下（示例）：

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

父组件代码如下（示例）：

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

---

十、路由useRoute和useRouter的使用

代码如下（示例）：

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

---

十一、store仓库的使用

代码如下（示例）：

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

---

十二、await 的支持

setup 语法糖中可直接使用 await，不需要写 async ， setup 会自动变成 async setup

代码如下（示例）：

1
2
3
4
5

---

十三、provide 和 inject 祖孙传值

父组件代码如下（示例）：

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

子组件代码如下（示例）：

1
2
3
4
5
6

---