Vue3笔记

setup

1. Vue3.0中一个新的配置项，值为一个函数。
2. 组件中所用到的：数据、方法等等，均要配置在setup中。
3. setup函数的两种返回值：
   1. 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。（重点关注！）
   2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
4. 注意点：
   1. 尽量不要与Vue2.x配置混用
      • Vue2.x配置（data、methos、computed…）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed…）。
      • 如果有重名，setup优先。
   2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）

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

ref

作用：定义一个响应式的数据

语法： const xxx = ref(initValue)

• 创建一个包含响应式数据的引用对象。
• JS中操作数据： xxx.value
• 模板中读取数据: 不需要xxx.value，直接
  {{xxx}}

备注：

• 接收的数据可以是：基本类型、也可以是对象类型。
• 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
• 对象类型的数据：内部使用的是Vue3.0中的一个新函数—— reactive函数。

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

reactive

• 作用：定义一个对象类型的响应式数据（基本类型不要用它，基本类型用ref函数）
• 语法：const 代理对象 = reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

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

响应式原理