本文共 980 字，大约阅读时间需要 3 分钟。

上一部分中我们说到的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

3：主要有这几个区别：

1：在js中调用需要使用data.属性来赋值使用。

2：在VUE模板语法中，也需要使用data.属性来赋值使用。

二：toRefs函数

模板语法中需要使用data.属性来调用属性显示，相对来说就比较麻烦。

其实我们可以使用ES6中的扩展运算符来对其进行解构处理，但是，这样吧解构之后，便不再具有响应式的属性，这个不行。

VUE3.0为我们提供了toRefs函数可以解决这个问题。

1：引入

import {       ref,    reactive,    toRefs} from "vue";

2：示例

Helloworld.vue

完整的代码已经给出，具体的使用，你可能还需要自己试一下。

有好的建议，请在下方输入你的评论。

欢迎访问个人博客

欢迎访问小程序：