Vue3 responsive function comparison: toRef() vs toRefs()

ref is a responsive API function that handles basic data types. The variables defined in setup can be declared Using

directly in the template variable data that has not been wrapped and processed by the responsive API does not have responsive capabilities

That is, the data is often modified in the logic , but the page will not be updated, so how to turn a non-responsive data into responsive data

You need to use toRef() and toRefs() These two componsition API

simply look at the concepts, which are often abstract and difficult to understand. You still need to start from specific examples

toRef() function

Function: Create a ref object whose value value points to a certain attribute value in another object, which is the same as the original object Related. [Related recommendations: vuejs video tutorial, web front-end development]

is to create a corresponding ref# based on an attribute on the responsive object. ##, the ref created in this way is synchronized with its source attribute, and has a reference relationship with the source object.

Changing the value of the source attribute will update the

ref Value

Syntax: const Variable name = toRef(source object, a property under the source object)

For example:

const name = toRef(person,'name')

Application: When you want to provide a certain attribute in the responsive object for external use separately, If you don't want to lose responsiveness, it can also be useful to pass a ref of a prop to a composed function

Disadvantages: toRef () can only process one attribute, but toRefs(source object) can be processed in batches at one time

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});
</script>

If you want to render data in the template, you can write like this

{{person.name}} -{{person.age}}-{{person.job.web}}-{{person.job.trade}}

If you don’t want to write so long in the template, you can deconstruct it first, as shown below

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;
</script>

Then in the template, you can use variables directly, as shown below

{{name}}-{{age}}-{{web}}-{{trade}}

Now, if we want to modify the variable data, we will find that the data in the logic will be modified, but the data in the page will not be updated, that is, the responsiveness will be lost. For example: the following template, modify the name and age attributes respectively

<button @click="handleChangeAttrs">修改属性</button>

In the logic code

<script setup>
import { reactive } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

const { name, age} = person;
const { web,trade} = person.job;

// 这样直接操作数据是无法修改的,因为它不是一个响应式数据,只是一个纯字符串,不具备响应式
function handleChangeAttrs() {
    name = "itclanCoder";
    age = 20;
}
</script>

If you want to modify the data, support responsiveness, and turn a non-responsive data into responsive data, you need to borrow

toRef(source Object, the specified attribute under the source object) function , as shown below

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 想要修改指定哪个对象具备响应式,那么就使用toRef函数处理,toRef(源对象,源对象下的某个属性)
const name = toRef(person，&#39;name&#39;);  
const age = toRef(person,&#39;age&#39;);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

In the template, it is still as shown above

{{person}}
{{name}}-{{age}}-{{web}}-{{trade}}
<button @click="handleChangeAttrs">修改属性</button>

You will find that using

toRef() After function processing, non-responsive data will have the ability to respond to data, and the source data will also be synchronized

If it is only used for the display of pure data pages, there is no need to convert the data For responsive data, if you need to modify the data, you need to convert non-responsive data into responsive data

is implemented through the

toRef() function

The difference from ref

If you use

ref to process data, as shown below, use ref to process data, and the page can also achieve responsiveness and update of data. But it is different from toRef. There is a difference.

<script setup>
import { reactive,toRef } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 使用ref
const name = ref(person.name);  
const age = toRef(person.age);

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

Modify the data, the page data will be updated, but the source data will not be synchronized, modified, and there is no reference relationship,

refEquivalent to re-copying a copy of the data from the source objectref()What is received is a pure value

toRefs() function

toRef() can only process a certain attribute specified by the source object. If the source object has many attributes, it will be troublesome to use toRef() one by one.

Then this

toRefs () is very useful. It has the same function as toRef(). It can create multiple ref objects in batches, and can maintain synchronization with the source object and have a reference relationship.

Syntax:toRefs(source object),toRefs(person)

Such as the above sample code, modify it to

toRefs()shown

<script setup>
import { reactive,toRefs } from "vue";
const person = reactive({
   name:"川川",
   age: 18,
   job: {
     web: &#39;前端开发&#39;,
     trade: &#39;互联网&#39;
   } 
});

// 通过toRefs()批量处理,此时通过解构
const {name,age} = toRefs(person);  

// 经过了toRef的处理,修改变量的值,那么就需要xx.value
function handleChangeAttrs() {
    name.value = "itclanCoder";
    age.value = 20;
}
</script>

toRefs is useful when returning reactive objects from composed functions. Using this, the consumer component can destructure/unfold the returned object without losing responsiveness

import { toRefs } from "vue";
function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })

  // 在返回时都转为ref
  return toRefs(state)
}

// 可以解构而不会失去响应性
const { foo, bar } = useFeatureX()

Notes

toRefs will only be on the source object when called Enumerable properties create ref. If you want to create a ref for a property that may not exist yet, use toRef

Why you need the toRef() and toRefs() functions

Purpose: Deconstruct the object without losing the responsiveness to facilitate the decomposition and diffusion of object data

Premise: Targeted at responsive objects (reactiveencapsulated) non-ordinary object

Note: Do not create a reactive type (that is a reactive thing), it itself is just a continuation Responsive, the ability to convert non-responsive data into responsive data through toRef or toRefs

Summary

This toRef() and toRefs() are very practical, both of which turn a non-responsive data into a responsive data Ability to maintain data synchronization with the source object and have a reference relationship. The former only supports the processing of single attribute data, while the latter supports batch processing of data

When the data is modified, the page data will be updated, these two# The ##composition API function is very practical. In actual business development, if it involves modifying the data on the page, then

will be used (learning video sharing:

vuejs introductory tutorial, Basic Programming Video)

The above is the detailed content of Vue3 responsive function comparison: toRef() vs toRefs(). For more information, please follow other related articles on the PHP Chinese website!