vue3.x 响应式数据-ref()、reactive() 作者：马育民 • 2025-06-08 09:26 • 阅读：10009 # 介绍 监听数据变化并在视图（页面）中更新 也就是在代码中 **修改变量**，**页面中的数据** 也跟着改变 ### 实现 - `ref()` - `reactive()` # 区别 ### ref() 需要导入 `import {ref} from 'vue'` `ref`用来定义：**基本类型数据**、**对象类型数据**； `ref` 创建的变量必须使用`.value`（可以使用`volar`插件自动添加`.value`） ### reactive() 需要导入 `import { reactive } from 'vue'` `reactive`用来定义：**对象类型数据**。 `reactive` 重新分配一个新对象，会**失去**响应式（可以使用`Object.assign`去整体替换）。 # 使用原则 1. 若需要一个基本类型的响应式数据，必须使用`ref`。 2. 若需要一个响应式对象，层级不深，`ref`、`reactive`都可以。 3. 若需要一个响应式对象，且层级较深，推荐使用`reactive`。 原文出处：http://malaoshi.top/show_1GW1GuBkTQTf.html