乐趣区

关于vue.js:Vue3中的ref与toRef

咱们在应用 vue3 当中的 composition api 时,咱们将一个数据变成可响应式的数据时,咱们可能常常用的 ref 这个 api,其实还存在一个 toRef,这个 api 也能够将一个数据变成可响应式的。然而两者也存在着一些不同之处。

ref 的用法:

const nameRef = ref('lisa')

toRef 的用法:

const obj = {name: 'lisa'}
const nameRef = toRef(obj, 'name')

你会发现 toRef 是须要传入两个参数,一个是指标对象,一个对象当中的属性名,它的返回后果就是属性名的可响应式数据。

你是否会感觉 toRef 的应用比 ref 麻烦许多,并且两者应用的目标是统一的,这个 toRef 存在就不是很有必要了。

然而,ref 的原理是将穿进去的数据进行了拷贝,那就是说如果 nameRef.value 产生了变动,穿进去的数据是不会发生变化的。

而 toRef 就不是进行了拷贝操作,而是对其进行援用了,那么当你对 nameRef.value 的值产生扭转的时候,穿进去的数据也会相应的随之发生变化。

而两者还有一个不同之处,那就是 toRef 的值发生变化,然而 UI 界面是不会进行从新渲染,反之,应用 ref 的值产生了变动,UI 界面是会进行从新渲染的。

综上所述:
1、ref 返回的值产生了变动,原始值不会变动;toRef 返回的值产生了变动,原始值会变动。
2、ref 返回的值产生了变动,UI 界面会进行从新渲染;toRef 返回的值产生了变动,UI 界面不会进行从新渲染。

退出移动版