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>
执行结果:
说明:
如果将 ref() 方法创建的响应式代理对象作为属性返回,那么在模板中访问时不需要添加 .value 属性。
3、reactive 与 ref 的区别
reactive() 方法与 ref() 方法都可以用于创建响应式代理对象。但它们之间存在着以下几点区别:
- reactive() 方法的参数,必须是对象类型。
- ref() 方法参数可以是基本数据类型,也可以是对象类型。
- ref() 方法创建的响应式对象,必须通过 .value 属性访问。
- ref() 方法的内部实现依赖于 reactive() 方法。
在实际的项目开发中,推荐使用 ref() 方法,因为更加灵活。