# Vue3 toRef 和 toRefs 函数

优质资源分享

学习路线指引(点击解锁) 知识定位 人群定位
Python实战微信订餐小程序 进阶级 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
Python量化交易实战 入门级 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

Vue3 toRef 和 toRefs 函数

上一篇博文介绍了 vue3 里面的 ref 函数和 reactive 函数,实现响应式数据,今天主要来说一下 toRef 函数和 toRefs 函数的基本使用。

toRef 函数

通过上一篇博客,我们知道,ref 函数可以创建一个响应式的数据,那 toRef 函数同样也是创建一个响应式的数据,那么他们之间的区别是什么呢?

首先一点,ref 函数他的本质其实是去拷贝一份数据,脱离了与源数据的交互。什么意思呢?就是 ref 函数可以将对象里面的属性值变成响应式的数据,修改响应式数据,是不会影响到源数据,但是视图层上的数据会被更新。但是 toRefs 函数的本质是引用,也就是说,toRef 函数会与源数据交互,修改响应式数据会造成源数据的修改,但是他的修改不会造成视图层数据的更新。

上面这段话理解吗?不理解的话没关系,下面通过几个案例就可以明白了。

toRef 函数使用

首先呢, toRef 函数有两个参数。

toRef(操作对象, 对象属性)

好,接下来我们使用 toRef 函数写一个案例,还是和以前一样,页面展示一个用户的名称和年纪。


 

toRef toRefs 函数h1>

姓名:{{boy\_toRef}}p>

年龄:{{boy.age}}p> div>

你可能感兴趣的:(计算机,flask,python,后端,计算机)