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() 方法,因为更加灵活。

相关推荐
小墨宝5 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED20 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿24 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子25 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远6638 分钟前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架