Vue - ref( ) 和 reactive( ) 响应式数据的使用

一、ref( )

在 Vue 3 中,ref() 是一个用于创建响应式引用的函数。它是Vue 3 Composition API(组合式API) 的一部分,允许在组件中创建响应式数据

使用对象:基本数据类型(String 、Number 、Boolean 、Null 等)、对象类型

****需要使用 . value

1.引入ref () 函数

javascript 复制代码
// 引入
import { ref } from 'vue';

2. 创建响应式引用

javascript 复制代码
// 定义 响应式数据  在 <script> 标签中
// 在 <script> 标签中写的 JS 代码 , 都需要写 .value 来获取值
const name = ref('张三');
const age = ref(20);
const tel = '123xxxxxxxxxx';

const count = ref(0); // 创建一个响应式的数字
const message = ref('Hello, Vue 3!'); // 创建一个响应式的字符串

3. 访问和修改引用的值

javascript 复制代码
// 访问和修改引用的值

// 使用 ref() 创建的响应式引用会返回一个对象

// 该对象有一个 .value 属性来访问和修改其值

console.log(count.value); // 0
count.value++; // 修改值
console.log(count.value); // 1

4. 在模板中的使用

javascript 复制代码
<template>

// 在模板中,不需要使用 .value 。当在模板中使用时,ref 会自动解包

    <div class="person">
        <h2>姓名:{
  
  { name }}</h2>
        <h2>年龄:{
  
  { age }}</h2>
        <h2>地址:{
  
  { tel }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="showTel">查看电话</button>

        <p>{
  
  { count }}</p> <!-- 直接使用 count -->
        <button @click="count++">Increment</button>

    </div>
    
</template>

5. 与对象的结合使用

javascript 复制代码
const user = ref({
  name: 'Alice',
  age: 25,
});

// 访问和修改对象属性
console.log(user.value.name); // Alice
user.value.age++; // 修改属性
console.log(user.value.age); // 26

当我们在模板中使用了 ref 时,在改变了 这个 ref 的值时,Vue 会自动检测到这个变化,并且相应地更新 DOM。

ref ( ) 是基于 reactive( ) 编写的。

二、reactive( )

Vue 3 中,reactive() 是一个用于创建响应式对象的函数。它是 Vue 3 组合式 API 的一部分,允许开发者将普通对象转换为响应式对象,从而在数据变化时自动更新视图。

使用对象:对象类型

****需要使用 . value

1.导入 reactive ( ) 函数

javascript 复制代码
// 从 Vue 中导入
import { reactive } from 'vue';

2.创建响应式对象

javascript 复制代码
// 创建响应式对象
const state = reactive({
    count: 0,
    message: 'Hello, Vue 3!',
});

3. 访问和修改响应式属性

javascript 复制代码
// 访问和修改响应式属性
// 可以像访问普通对象一样访问和修改响应式对象的属性。
// Vue 会自动追踪这些属性的变化,并在它们变化时更新视图。

console.log(state.count); // 0
state.count++; // 修改属性
console.log(state.count); // 1

4. 支持嵌套对象的响应性:

javascript 复制代码
const state = reactive({
    user: {
        name: 'Alice',
        age: 25,
    },
});

// 访问嵌套属性
console.log(state.user.name); // Alice

// 修改嵌套属性
state.user.age++;
console.log(state.user.age); // 26

三、ref( ) 与 reactive( ) 的区别:

  • ref() 返回一个包含 .value 属性的对象,而 reactive() 返回的是一个直接可用的响应式对象。
  • reactive 重新分配一个新对象,会失去响应式。(可以使用Object.assign 来整体替换)。
  • 使用原则:
    • 若需要一个基本类型的响应式数据,必须使用 ref ;
    • 若需要一个响应式对象,层级不深,ref ,reactive 都可以使用;
    • 若需要一个响应式对象,且层级较深,推荐使用 reactive。
相关推荐
秋名山大前端6 小时前
Chrome GPU 加速优化配置(前端 3D 可视化 / 数字孪生专用)
前端·chrome·3d
今天不要写bug6 小时前
antv x6实现封装拖拽流程图配置(适用于工单流程、审批流程应用场景)
前端·typescript·vue·流程图
luquinn6 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
用户21411832636026 小时前
dify案例分享-5分钟搭建智能思维导图系统!Dify + MCP工具实战教程
前端
augenstern4166 小时前
HTML(面试)
前端
excel6 小时前
前端常见布局误区:1fr 为什么撑爆了我的容器?
前端
烛阴6 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
vayy6 小时前
uniapp中 ios端 scroll-view 组件内部子元素z-index失效问题
前端·ios·微信小程序·uni-app
专注API从业者7 小时前
基于 Node.js 的淘宝 API 接口开发:快速构建异步数据采集服务
大数据·前端·数据库·数据挖掘·node.js
前端无冕之王7 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html