【Vue3-响应式工具API】ref 和 reactive 使用

ref和reactive的区别

响应式 API：核心—ref | Vue.js (vuejs.org)

响应式 API：核心—reactive | Vue.js (vuejs.org)

Vue3第一篇之ref和reactive详解扩展

目录

文章目录

• ref和reactive的区别
• **目录**
• • @[toc]
• `ref`定义任意数据类型的响应式
• • 🐉定义响应式数据
  • 🐉获取模板中的DOM元素
  • 🐉获取模板中的子组件
• `reactive` 定义引用数据类型的响应式
• • 🐉定义引用数据类型响应式数据
• ref 和 reactive
• • UN---ref 和 reactive 的赋值使用注意
  • UN---ref 和 reactive 的赋值使用注意

ref定义任意数据类型的响应式

作用

• 定义响应式数据
• 获取模板中的DOM元素
• 获取模板中的子组件

🐉定义响应式数据

Vue 提供了一个 [ref()](https://cn.vuejs.org/api/reactivity-core.html#ref) 方法来允许我们创建可以使用任何值类型数据的响应式

• 🐸注意使用时 ，在 JS 环境 内要 .value 来使用

• ref 要定义 前 要引入

  import { ref } from 'vue';
  1

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

🐉获取模板中的DOM元素

• 使用 注意 ： ref获取元素 只能在 ❗挂载后（真实DOM） 获取才能使用

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

🐉获取模板中的子组件

• ❗注意 子组件 必须使用 defineExpose({}) 来暴露 自身的需要暴露的对象

子组件

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
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

---

reactive 定义引用数据类型的响应式

作用

• 定义引用数据类型响应式数据

🐉定义引用数据类型响应式数据

• reactive 要定义 前 要引入

  import { reactive } from 'vue';
  1

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

在JS环境使用时 ，可以直接使用，无需像ref一样，.value那值

---

ref 和 reactive

ref是把值类型添加一层包装，使其变成响应式的引用类型的值。

reactive 则是引用类型的值变成响应式的值。

所以两者的区别只是在于是否需要添加一层引用包装

本质上

ref(0)  --> reactive( { value:0 })
1

---

UN—ref 和 reactive 的赋值使用注意

reactive

ref是把值类型添加一层包装，使其变成响应式的引用类型的值。

reactive 则是引用类型的值变成响应式的值。

所以两者的区别只是在于是否需要添加一层引用包装

本质上

ref(0)  --> reactive( { value:0 })
1

---

UN—ref 和 reactive 的赋值使用注意