VUE3（九）reactive与toRefs函数

2023-08-15 00:29| 来源: 网络整理| 查看: 265

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

{{ msg }} count }} --> count is: {{ data.count }} Edit components/HelloWorld.vue to test hot module replacement. 点我弹窗 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 } }, } 3：主要有这几个区别：

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

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

二：toRefs函数

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

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

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

1：引入 import { ref, reactive, toRefs } from "vue"; 2：示例

Helloworld.vue

{{ msg }} count is: {{ count }} data.count }} --> Edit components/HelloWorld.vue to test hot module replacement. 点我弹窗 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 } }, }

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

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

欢迎访问个人博客 https://guanchao.site

欢迎访问小程序：

在这里插入图片描述

【本文地址】

公司简介

联系我们