上一部分中我们说到的ref只是作为单个变量的响应。
Vue3.0中还为我们提供了一个对象式响应的reactive函数 。
Reactive函数创建一个响应式对象。
一：Reactive函数
其实，在我看来，reactive函数 就是VUE3.0为我们提供的替代VUE2.0中data的一个函数，因此，在这里，我不建议将方法也写到reactive函数中。
reactive函数 中只写数据即可。
1：引入
import {
ref,
reactive,
} from "vue";
2：实例
我这里使用上一部分中我们测试使用的代码来做示例，刚好对比一下ref与reactive在写法上边的区别。
Helloworld.vue
<template>
<h1>{
{
msg }}</h1>
<!-- <button @click="count++">count is: {
{
count }}</button> -->
<!-- 模板语法需要使用data.属性来调用 -->
<button @click="count++">count is: {
{
data.count }}</button>
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
<button @click="clickMe()">点我弹窗</button>
</template>
<script lang='ts'>
import {
ref,
reactive
} from "vue";
export default {
name: 'HelloWorld',
props: {
msg: String
},
// 使用setup 代替 data
// 因为我这里使用的是typescript，因此需要给参数指定类型
setup(props:any,context:any){
// ref 定义响应式数据
// let count = ref(0);
// reactive 创建响应式对象
let data = reactive({
// 定义响应式数据
count:0,
});
const clickMe = () => {
// 使用ref关键字绑定的变量，赋值 的时候必须使用.value
// count.value++;
// 调用reactive 定义对象的参数的时候需要使用对象.来调用
data.count++;
alert('hi');
}
return {
data,
clickMe
}
},
}
</script>
3：主要有这几个区别：
1：在js中调用需要使用data.属性来赋值使用。
2：在VUE模板语法中，也需要使用data.属性来赋值使用。
二：toRefs函数
模板语法中需要使用data.属性来调用属性显示，相对来说就比较麻烦。
其实我们可以使用ES6中的扩展运算符来对其进行解构处理，但是，这样吧解构之后，便不再具有响应式的属性，这个不行。
VUE3.0为我们提供了toRefs函数可以解决这个问题。
1：引入
import {
ref,
reactive,
toRefs
} from "vue";
2：示例
Helloworld.vue
<template>
<h1>{
{
msg }}</h1>
<button @click="count++">count is: {
{
count }}</button>
<!-- 模板语法需要使用data.属性来调用（单独使用reactive函数） -->
<!-- <button @click="count++">count is: {
{
data.count }}</button> -->
<p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
<button @click="clickMe()">点我弹窗</button>
</template>
<script lang='ts'>
import {
ref,
reactive,
toRefs
} from "vue";
export default {
name: 'HelloWorld',
props: {
msg: String
},
// 使用setup 代替 data
// 因为我这里使用的是typescript，因此需要给参数指定类型
setup(props:any,context:any){
// ref 定义响应式数据
// let count = ref(0);
// reactive 创建响应式对象
let data = reactive({
// 定义响应式数据
count:0,
});
const clickMe = () => {
// 使用ref关键字绑定的变量，赋值 的时候必须使用.value
// count.value++;
// 调用reactive 定义对象的参数的时候需要使用对象.来调用
data.count++;
alert('hi');
}
// 使用toRefs函数对data对象进行包装，确保使用扩展运算符进行解构之后，仍具有响应式
let param = toRefs(data);
return {
// data,
...param,
clickMe
}
},
}
</script>
完整的代码已经给出，具体的使用，你可能还需要自己试一下。
有好的建议，请在下方输入你的评论。
欢迎访问个人博客
https://guanchao.site
欢迎访问小程序：
