Vue3.0-如此简单的setup

Vue3.0-如此简单的setup
1. 安装Vue3.0
- npm init vue@latest，选择所需配置
- 根据安装成功后的指令提示
  - cd vue3setup 进入项目
  - npm install 安装依赖
  - npm run dev 启动项目
2. setup语法糖

script setup 是在单文件组件（SFC）中使用组合式API的编译时语法糖。当同时使用SFC与组合式API时该语法是默认推荐。相比于普通的
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
2.1.2 响应式

想要将某个值定义为响应式，可以使用composition Api中的ref，覆盖范围较广。
```
1
2
3
4
5
6
```
2.1.3 使用组件
- 动态组件：可以通过当前的某种状态判断要加载哪种具体的组件，也可引用多个组件，通过is属性引入对应的组件，引入进来的组件AComponent、BComponent可以看做变量来进行使用
```
1
2
3
4
5
6
7
8
9
10
11
12
```
2.1.4 使用自定义指令

除了 Vue 内置的一系列指令 (比如 v-model 或 v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。
- 全局自定义指令在script setup中正常工作
- 本地自定义指令在script setup中无需显示注册，但命名必须遵守vNameOfDirective
```
1
2
3
4
5
6
7
8
9
10
11
```
- 若从外部环境导入某个具体的指令，可以通过重命名来使其符合命名规范
```
autoFocus.js

const autoFocus = {
  mounted: (el) => {
    el.focus();
  },
};

export {
  autoFocus
}

页面中使用autoFocus，不符合指令规范，在引入中将其修改


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
```
2.1.5 defineProps()和defineEmits()

父子组件通信时大多数情况下会遇到props将参数从父组件传入子组件，使用emit将子组件某些值回传给父组件。与之前的原理相同，只是写法上略有些变化。
- defineProps 和 defineEmits 都是只能在
  - 1
  - 2
  - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
  - 10
  - 11
  - 12
  子组件：接收props值，定义传出方法
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
```
  2.1.6 defineExpose
  
  我们可以在父组件通过ref获取子组件实例
```
父组件：


1
2
3
4
5
6
7
8
9
10
11
12
```
  但子组件中定义的一些变量和方法我们是无法获取到的，此时在子组件中通过defineExpose将想要被父组件访问到的内容暴露出来，我们就可以在Acom.value中获取到啦
```
子组件：

1
2
3
4
5
6
7
8
9
10
11
12
```
  2.2 setup语法糖结合组件库的使用
  
  结合普通script形式及setup script，对比一下增加setup语法糖后我们的代码会发生哪些不同的地方
  - 引入ant-design-vue组件库 main.js
```
import { Form, Input, Checkbox, Button } from "ant-design-vue";
import 'ant-design-vue/dist/antd.css';

app.use(Form);
app.use(Input);
app.use(Checkbox);
app.use(Button);
1
2
3
4
5
6
7
```
  - 相同的html结构
```
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
```
  - 在页面中的使用 setup方式
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
```
  - script方式JS内容
```
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
```
  对比后即可发现，setup语法糖形式代码行数明显减少，更加清晰明了，易于阅读
  
   2.3 setup语法糖中使用TypeScript
  - 在使用ts时，在script setup标签中增加lang="ts"
  - 内容中ts与正常使用情况下一致
  - 将上述js改为ts形式如下
```
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
```
  3. setup与普通的script同时使用
  - 1
  - 2
  - 3
  - 4
  - 5
  - 6
  - 7
  - 8
  - 9
  - 10
  - 11
  - 12
  - 13
  - 14
  4. 限制
  
  由于模块执行语义的差异，

1. 安装Vue3.0

2. setup语法糖

2.1.2 响应式

2.1.3 使用组件

2.1.4 使用自定义指令

2.1.5 defineProps()和defineEmits()

2.1.6 defineExpose

2.2 setup语法糖结合组件库的使用

2.3 setup语法糖中使用TypeScript

3. setup与普通的script同时使用

4. 限制