Vue3-常用的Composition API（组合API）（上篇）

---

1.setup

setup是什么

• Vue3.0中一个新的配置向，值为一个函数
• setup是所有Composition API（组合API） ”表演的舞台“
• 组件中所有用到的:数据、方法等等，均要配置在setup中

setup执行的时机

• 在beforeCreate之前执行(一次)，此时组件对象还没创建；
• this是undefined，不能通过this来访问data/computed/methods/props；
• 其实所有的composition API相关回调函数中也都不可以；

setup的返回值

一般都返回一个对象：为模板提供数据，也就是模板中可以直接使用此对象中的所有属性/方法
返回对象中的属性会与data函数返回对象合并成为组件对象的属性
返回对象中的方法会与methods中的方法合并成功组件对象的方法

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

若返回一个渲染函数，则可以自定义渲染内容

1
2
3
4
5
6
7
8
9
10

注意：
尽量不要和Vue2.x配置混用
Vue2.x配置（data，methods，computed…）中可以访问setup中的属性，方法
但在setup中不能访问到Vue2.x配置(data，methods，computed…)
如有重名，setup优先
setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性

setup语法糖

给script标签直接添加setup属性就能使用setup了

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

这意味着与普通的

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

ref函数

• 作用：定义一个响应式的数据
• 语法：const xxx = ref(“value”)
  • 创建一个包含响应式的数据的引用对象(reference对象)
  • js中操作数据：xxx.value
  • 模板中读取数据不需要.value,直接
    {{xxx}}
• 注意
  • 接收的数据类型可以是基本数据类型也可以是引用数据类型
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的
  • 对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数

ref设计原理:监听value的改变，劫持value属性的get和set
因此ref一般用在基本数据,或者引用数据的嵌套层级不深的数据上
嵌套层级深情况用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

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

Vue3响应式数据的实现原理

vue2.0的响应式

• 实现原理

  • 对象类型：通过Object.definedProperty()对属性的读取、修改进行拦截（数据劫持）

  • 数组类型：通过重写更新数据的一系列方法来实现拦截。（对数组的方法进行了包裹）

• 存在问题:

  • 新增属性，删除属性都不会刷新界面

  • 直接通过下标修改数组，界面不会自动更新

vue3.0的响应式

• 实现原理
  • 通过Proxy(代理)：拦截对象中任意属性的变化，包括：属性的读写，属性的添加，属性的删除等
  • 通过Reflect(反射)：对被代理对象的属性进行操作

计算属性

Vue3中的计算属性跟Vue2作用一样，只是写法不同，它变成了一个组合式API

引入

import {reactive,computed} from "vue"
1

使用

  let count= computed(function,变量) //第一个参数为执行的业务函数，第二个参数为可以指定哪个发生变化就会执行，默认为业务函数中计算用到的所有变量
1

案例：

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

监听属性

• 与vue2.x中的watch配置功能一致
• 注意
  • 监视reactive定义的响应式数据时，oldvalue无法正确获取，强制开始了深度监视（deep的配置失效）
  • 监视reactive定义的响应式数据的某一个值时：deep配置有效

案例一：实现输入框的下拉菜单

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

案例二：实现秒表倒计时，当为零时结束

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

Vue3中的生命周期

在Vue3.x中，新增了一个setup生命周期函数，setup执行的时机是在beforeCreate生命函数之前执行，因为在这个函数中不能通过this来获取实例的；同时为了命名的统一，将beforeDestory改名为beforeUnmount，destoryed改名为unmounted

在选项式中生命周期函数有

beforeCreate（建议使用setup代替）created（建议使用setup代替）
setup
beforeMount     mounted
beforeUpdate    updated
beforeUnmount   unmounted
1
2
3
4
5

再组合式中，也就是setup语法糖中有：
通过在生命周期函数前加on来访问组件的生命周期
注意点就是必须用import引入

onBeforeMount  onMounted   
onBeforeUpdate  onUpdated
onBeforeUnmount  onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggered
1
2
3
4
5
6

Teleport

Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。

然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置

模态弹框

to属性：放到指定位置

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

属性

vue3组件内部组合式API setup中取属性值

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

setup语法糖中获取属性值

1
2
3
4
5
6
7
8
9
10

//父组件中


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

自定义事件

再setup函数中引入ctx,这个就是相当于this对象，ctx上有emit方法用来触发事件

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

再setup语法糖中引入defineEmits方法,传入数组，数组里面则是父组件传递的自定义事件名

1
2
3
4
5
6
7
8
9
10
11

Vue3中v-model双向绑定的变化：
v-model可以多个绑定
prop 和事件默认名称已更改：

prop属性：value 变为-> modelValue； 
event事件：input 变为-> update:modelValue；
1
2

案例：

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

//父组件中


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

状态驱动的动态 CSS

单文件组件的

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

注册组件

1.选项式组件内部注册跟vue2一样

2.vue3组件内部组合式API setup语法糖中注册组件