关于Vue3 ，看这一篇文档你就会用了

随着Vue3的到来，公司的新项目全部进行了升级，相比于Vue2，语法上个人觉得更简洁，更容易通俗易懂。首先安装vue3项目，这里我使用vite进行安装（强烈推荐，启动速度贼快）

npm create vite@latest
1

然后执行

cd vite-project
npm install
npm run dev
1
2
3

1.定义基本类型、引用类型数据，使用ref跟reactive

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

1）修改ref跟reactive的值

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

备注：对于常量来说 ，我们也可以直接使用const/let 来定义，但是用const/let定义的无响应式功能

2.组件的引用

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

在

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

子组件: child.vue

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

2.使用v-model的形式

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

对于子组件不改变父组件传过来的值，使用v-bind的形式更简洁

4.事件

1
2
3
4
5
6
7
8
9
10

5.生命周期

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

5.computed语法

computed在vue3有2种写法
1）

1
2
3
4
5
6
7
8
9
10

这种情况下，跟vue2是一样的写法

2）

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

这种写法，是建立在需要修改computed的定义的值，通常搭配input标签一起使用。

6.watch语法

vue3的watch 有3个参数，watch(WatcherSource, Callback, [WatchOptions])
参数：
WatcherSource：想要监听的响应式数据。
Callback：执行的回调函数，入参（newValue,oldValue）。
[WatchOptions]：deep、immediate、flush可选。
也有2种写法，如下：

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

7.父组件调用子组件方法

child.vue

1
2
3
4
5
6
7
8
9
10
11

父组件

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

8.css使用js变量

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