当前位置：首页 > article >正文

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

article 2024/9/20 5:37:30

Vue3.0组合式API系列文章：

《Vue3.0组合式API：setup()函数》

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

《Vue3.0组合式API：computed计算属性、watch监听器、watchEffect高级监听器》

《Vue3.0组合式API：使用defineProps()实现父组件向子组件传递数据》

《Vue3.0组合式API：使用defineEmits()实现子组件向父组件传递数据》

《Vue3.0组合式API：生命周期钩子函数》

《Vue3.0组合式API：依赖注入provide和inject实现跨层组件的通信》

《Vue3.0组合式API：使用ref获取DOM元素》

1、reactive() 方法

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

使用方法：

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

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

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

<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 属性值指向内部值。

使用方法：

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

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

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

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

<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>

执行结果：