Summary of the difference and usage of toRefs and toRefs in Vue3

The difference and usage of toRef and toRefs in Vue3

Just made itThe difference between Ref and Reactive and how to use itNotes (see the supplementary introduction at the end of the article), let’s summarize it again.toRefandtoRefsFunction, usage, and differences

1. Function and difference

toRef and toRefs can be used to copy the properties in reactive and then convert them into ref. It retains both responsiveness and references. That is, after the properties you copied from reactive are modified, in addition to the view being updated, the corresponding values ​​in the original ractive will also be updated.

toRef: Copy a single property in reactive and convert it to ref
toRefs: Copy all attributes in reactive and convert them to ref

2. How to use

2.1 toRef usage example

<template>
  <h2>
    reactive-name: {{  }} 
  </h2>
  <h2>
    toRef-name: {{ uName }}
  </h2>
  <button @click="onChangeName">Click</button>
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
	setup() {
    let user = reactive({
      name: 'zs',
      age: 18
    })
	// Copy the name attribute in user    let uName = toRef(user, 'name')
    // Change    const onChangeName = () => {
       = 'ls'
    }
    return {
      user,
      uName,
      onChangeName
    }
  }
}
</script> 

2.2 toRefs usage example

<template>
  <h2>
        {{ name }} 
  </h2>
  <h2>
         {{ age }}
  </h2> 
</template>
<script>
import { reactive, toRef } from 'vue'
export default {
	setup() {
    let user = reactive({
      name: 'zs',
      age: 18
    }) 
    return {
         ...toRefs(user),
    }
  }
}
</script> 

Supplement: vue3 responsiveness: the difference between Ref and Reactive and how to use it

vue3 responsiveness: the difference between Ref and Reactive and how to use it

In Vue3,RefandReactiveare two key APIs for implementing responsive programming.

1. Difference

Ref: Used to create a responsive basic data type, such as numbers, strings, etc. It turns ordinary data into responsive data, which can monitor changes in data. When using Ref, we can use.valueto access and modify the value of the data.

Reactive:Reactive is used to create a responsive object that can contain multiple properties. Through Reactive, we can turn the entire object into a responsive form, so that any property of the object can be detected when it changes.

2. Ref usage scenarios

Ref: Suitable for managing simple single data, such as counters, input box values, etc.

Example of Implementing Counter with Ref

<template>
  <div>
    <p>Count: {{ i }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>
<script>
import { ref } from 'vue';
	setup(){
		const i = ref(0); 
		const increment = () => {
		  ++;
		};
		return{
			i,increment
		} 
	} 
</script>

Notice
1. Access/modify in js requires use.value
2. Interpolation in templates does not need to be used.value

3. Reactive usage scenarios

Example of Managing User Information and Orders Using Reactive 1

<template>
  <div>
    <p>User Name: {{  }}</p>
    <p>Age: {{  }}</p> 
  </div>
</template>
<script>
import { reactive } from 'vue';
setup(){
	const user = reactive({
	  name: 'Alice',
	  age: 30
	});
	return{
		user
	}
} 
</script> 

Example of Managing User Information and Orders with Reactive 2

<template>
  <div>
    <p>User Name: {{ name }}</p>
    <p>Age: {{ age }}</p> 
  </div>
</template>
<script setup>
import { reactive } from 'vue';
setup(){
	const user = reactive({
	  name: 'Alice',
	  age: 30
	});
	return{
       ...toRefs(user)
	}
} 
</script> 

Note the difference between whether the expansion operator is used in return

This is the end of this article about the difference and usage of toRef and toRefs in Vue3. For more related contents of Vue3 toRef and toRefs, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!