【Vue3 入门到实战】3. ref 和 reactive区别和适用场景

编辑

1. ref 部分

1.1 ref定义基本数据类型

1.2 ref 定义引用数据类型

2. reactive 函数

3. ref 和 reactive 对比

3.1 原理

3.2 区别

3.3 使用原则

在 Vue 3 中 ref 和 reactive 是用于创建响应式数据的两个核心函数。它们都属于 Composition API 的一部分，但适用于不同的场景和类型的数据。理解两者之间的区别和适用场景对于高效开发 Vue 应用至关重要。

1. ref 部分

1.1 ref定义基本数据类型

作用：定义响应式变量。

语法：let xxx = ref(初始值)。

返回值：一个RefImpl 的实例对象，简称 ref 对象，ref 的对象的 value属性是响应式的。

注意点：如果使用ref定义响应式数据，JS中操作数据需要 xxx.value，但模板中不需要。

代码如下所示

<template><div class="person"><h3>我是Person组件</h3><h2>姓名：{{ name }}</h2><h2>年龄：{{ age }}</h2><button v-on:click="changeName">修改名字</button><button v-on:click="changeAge">修改年龄</button><button v-on:click="showTel">查看联系方式</button></div>
</template><script setup lang="ts">
import { ref, reactive } from 'vue'
let name = ref('张三')
let age = ref(18)
let tel = ref('123456')function changeName() {name.value = '李四'console.log(name)}function changeAge() {age.value += 1;console.log(age)}function showTel() {alert(tel)console.log(tel)}
</script><style>.person {background: blue;padding: 20px;}button{margin: 0 5px;}
</style>

控制台打印可以看到 ref 定义的响应式数据返回的是一个ref对象。

1.2 ref 定义引用数据类型

其实 ref 接收的数据可以是：基本类型、引用类型。

若 ref 接收的是引用类型，内部其实也是调用了 reactive 函数。

代码如下

<template><div class="person"><h3>我是Person组件</h3><h2>姓名：{{ info.name }}</h2><h2>年龄：{{ info.age }}</h2><button v-on:click="changeName">修改名字</button><button v-on:click="changeAge">修改年龄</button><button v-on:click="showTel">查看联系方式</button></div>
</template><script setup lang="ts">import { ref, reactive } from 'vue'let info = ref({name: '张三', age: 18, tel: '12345678901'})console.log(info)function changeName() {info.value.name = '李四'console.log(info.value.name)}function changeAge() {info.value.age += 1;console.log(info.value.age)}function showTel() {alert(info.value.tel)console.log(info.value.tel)}
</script><style>
.person {background: blue;padding: 20px;
}button {margin: 0 5px;
}
</style>

如图所示，ref 定义引用数据类型，在外层是一个RedImpl 实例对象，而在内部是一个被proxy代理的对象。这也印证了“ 若 ref 接收的是引用类型，内部其实也是调用了 reactive 函数 ”。

2. reactive 函数

作用：定义一个响应式对象，基本类型不要用它，要用 ref，否则报错。

语法：let 响应式对象= reactive(源对象)。

返回值：一个 Proxy 的实例对象，简称：响应式对象。

注意点：reactive 定义的响应式数据是“深层次”的。

代码如下

<template><div class="person"><h3>我是Person组件</h3><h2>姓名：{{ info.name }}</h2><h2>年龄：{{ info.age }}</h2><button v-on:click="changeName">修改名字</button><button v-on:click="changeAge">修改年龄</button><button v-on:click="showTel">查看联系方式</button></div>
</template><script setup lang="ts">import { ref, reactive } from 'vue'let info = reactive({name: '张三', age: 18, tel: '12345678901'})console.log(info)function changeName() {info.name = '李四'console.log(info.name)}function changeAge() {info.age += 1;console.log(info.age)}function showTel() {alert(info.tel)console.log(info.tel)}
</script><style>
.person {background: blue;padding: 20px;
}button {margin: 0 5px;
}
</style>

控制台打印 reactive 定义的引用对象info