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

ref和reactive的区别

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

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

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

目录

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

作用

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

定义响应式数据

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

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

• ref 要定义 前 要引入

  import { ref } from 'vue';
  

获取模板中的DOM元素

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

获取模板中的子组件

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

子组件

父组件

---

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

作用

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

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

• reactive 要定义 前 要引入

  import { reactive } from 'vue';
  

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

---

ref 和 reactive

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

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

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

本质上

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

---

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

reactive

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

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

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

本质上

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

---

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