Vue3.0组合式API:使用reactive()、ref()创建响应式代理对象

1、reactive() 方法

reactive() 方法用于将定义的 JavaScript 对象转换为响应式对象。

使用方法:

javascript 复制代码
<script setup>
//第一步:导入函数
import { reactive } from 'vue';

//第二步:创建响应式对象
const data = reactive(对象类型的数据);
</script>

**【实例】**使用 reactive() 方法,创建一个响应式对象,并实现修改响应式对象的值。

html 复制代码
<template>
    <fieldset>
        <legend>组件</legend>
        <p>用户名称:{{ userInfo.userName }}</p>
        <p>用户年龄:{{ userInfo.age }}</p>
        <p>博客信息:{{ userInfo.blogName }}</p>
        <p>博客地址:{{ userInfo.blogUrl }}</p>
        <button @click="updateAge">修改年龄</button>
    </fieldset>
</template>

<script setup>
//第一步:导入函数
import { reactive } from 'vue';

//第二步:创建响应式对象,参数为对象
const userInfo = reactive({
    userName: 'pan_junbiao的博客',
    age: 0,
    blogName: '您好,欢迎访问 pan_junbiao的博客',
    blogUrl: 'https://blog.csdn.net/pan_junbiao'
});

//修改年龄方法
function updateAge() {
    userInfo.age = 36;
}

</script>

执行结果:

2、ref() 方法

reactive() 方法可以为一个 JavaScript 对象创建响应式代理,如果需要对象某个基本数据类型(如:数字、字符串)的数据创建响应式代理对象,可以通过 ref() 方法实现。该方法接收一个原始值作为参数(也支持对象类型),返回一个响应式的对象,该对象只有一个 value 属性值指向内部值。

使用方法:

html 复制代码
<script setup>
//第一步:导入函数
import { ref } from 'vue';

//第二步:创建响应式对象
const data = ref(基本数据类型 或 对象类型);
</script>

<template>
    <!-- 第三步:使用响应式对象 -->
    <p>{{ data }}</p>
</template>

**【实例】**使用 ref() 方法,创建一个响应式对象,并实现一个计数器功能。

html 复制代码
<template>
    <fieldset>
        <legend>组件</legend>
        <!-- 第三步:使用响应式对象 -->
        <p>计数结果:{{ count }}</p>
        <button @click="counter">计数器</button>
    </fieldset>
</template>

<script setup>
//第一步:导入函数
import { ref } from 'vue';

//第二步:创建响应式对象
const count = ref(0);

// 增加计数的方法
function counter() {
    //注意:使用响应式对象的.value属性,获取内部值
    count.value++;
}
</script>

执行结果:

说明:

如果将 ref() 方法创建的响应式代理对象作为属性返回,那么在模板中访问时不需要添加 .value 属性。

3、reactive 与 ref 的区别

reactive() 方法与 ref() 方法都可以用于创建响应式代理对象。但它们之间存在着以下几点区别:

  1. reactive() 方法的参数,必须是对象类型。
  2. ref() 方法参数可以是基本数据类型,也可以是对象类型。
  3. ref() 方法创建的响应式对象,必须通过 .value 属性访问。
  4. ref() 方法的内部实现依赖于 reactive() 方法。

在实际的项目开发中,推荐使用 ref() 方法,因为更加灵活。

相关推荐
汪子熙1 分钟前
Angular 应用中手动调用 subscribe 方法的时机与实践探讨
前端
csdn_aspnet10 分钟前
在 React 中使用 WebSockets 构建实时聊天应用程序
javascript·react.js·node.js
【ql君】qlexcel33 分钟前
Notepad++ 复制宏、编辑宏的方法
开发语言·javascript·notepad++··宏编辑·宏复制
MiyueFE33 分钟前
14 个逻辑驱动的 UI 设计技巧,助您改善任何界面
前端·设计
啃火龙果的兔子37 分钟前
前端单元测试覆盖率工具有哪些,分别有什么优缺点
前端·单元测试
「、皓子~1 小时前
后台管理系统的诞生 - 利用AI 1天完成整个后台管理系统的微服务后端+前端
前端·人工智能·微服务·小程序·go·ai编程·ai写作
就改了1 小时前
Ajax——在OA系统提升性能的局部刷新
前端·javascript·ajax
凌冰_1 小时前
Ajax 入门
前端·javascript·ajax
京东零售技术1 小时前
京东小程序JS API仓颉改造实践
前端
奋飛2 小时前
TypeScript系列:第六篇 - 编写高质量的TS类型
javascript·typescript·ts·declare·.d.ts