上一部分中我们说到的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>
完整的代码已经给出，具体的使用，你可能还需要自己试一下。
