VUE3 reactive与toRefs函数

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>

完整的代码已经给出，具体的使用，你可能还需要自己试一下。
————————————————
版权声明：本文为CSDN博主「camellias_」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_39708228/article/details/114278167

VUE3 reactive与toRefs函数相关推荐

Vue3 生命周期钩子函数
一.Vue3生命周期钩子 setup() : 开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method onBeforeMount() : 组 ...
VUE3(setup响应式函数系统API)
Vue3.0提供的一组具有响应式特性的杉树式API,以函数的形式提供 1.reactive reactive()函数接收一个普通对象,返回该普通对象的响应式代理对象 2.ref ref()函数接收一个 ...
Vue3 reactive 源码分析
概要本文通过抽取Vue3 reactive源码中的主要部分,来理解其响应式object的实现方式.本文源码基于这个入口文件:github reactive.ts reactive() 源码位置:gi ...
vue3生命周期钩子函数
vue2生命周期钩子函数视图 vue3生命周期钩子函数视图代码 // 通过配置项 beforeCreate () { console.log('beforeCreate'); }, created ...
vue中ref、reactive和 toRefs toRef
ref和reactive都是响应式的引用,其原理是通过 proxy 对数据进行封装,当数据变化时,触发模版等内容的更新, ref 处理基础类型的数据(string,number..),reactive ...
vue3 reactive函数用法
reactive的用法与ref的用法相似,也是将数据变成响应式数据,当数据发生变化时UI也会自动更新.不同的是ref用于基本数据类型,而reactive是用于复杂数据类型,比如对象和数组例如:定义一 ...
vue3—reactive如何更改属性
vue3新增了响应性API,其中数据有两种,ref和reactive. reactive支持非原始对象,基础类型不能使用(Number,Boolean等) 例1 const obj = reactiv ...
vue2.x的h函数(createElement)与vue3中的h函数
1. vue2.x的 h 函数(createElement) 使用方法及介绍:(参考官网提取) h函数第一个是标签名字或者是组件名字,第二个参数是配置项,第三个参数是 innerText ,不会帮你 ...
Vue3 生命周期Hooks函数与调度器Scheduler的原理
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群写在最前:本文章的目标 Vue3的生命周期的实现原理是比较简单的,但要理解整个Vue3的生命 ...

VUE3 reactive与toRefs函数

VUE3 reactive与toRefs函数相关推荐

最新文章

热门文章