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.

ref Value

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

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>

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

<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>

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

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

<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>

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>

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

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

toRef() function

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>

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

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.

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)

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()

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

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

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!