What is the difference between toRef and toRefs in Vue3

This article mainly explains "what is the difference between toRef and toRefs in Vue3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the difference between toRef and toRefs in Vue3".

What it does: create a ref object whose value points to an attribute in another object. In this way, you can use the attribute name directly in the template without having to prefix the object name.

Syntax:

Const name = toRef (person,'name')

Application: when a property in a responsive object is to be provided separately for external use.

Extension: toRefs has the same function as toRef, but can create multiple ref objects in batches. It should be noted that it only parses the first layer properties of the object, and the syntax is passed directly into the object toRefs (person).

Example:

ToRef

{{person}} name: {{name}} Age: {{age}} salary: {{salary}} K modify name increment age salary increase import {reactive,toRef,toRefs} from 'vue' export default {name:'App', setup () {let person = reactive ({name:' Zhang San', age:18) Job: {J1: {salary:20}) return {person / / if you only need to use attributes in the template after defining reactive as before, add the object name (person.name) name:toRef (person,'name'), age:toRef (person,'age'), salary:toRef (person.job.j1). 'salary') / * but with toRef, you can define the data name in return Using the responsive basic data converted from toRef to ref, there is no need to add the object name in the template, and it is two-way binding, and the modifications in the template will also affect the original object * /}}.

Online browsing effect:

ToRefs

Import {reactive,toRef,toRefs} from 'vue' export default {name:'App', setup () {let person = reactive ({name:' Zhang San', age:18) Job: {J1: {salary:20}) return {person ... toRefs (person) / * toRefs will convert the properties of the first layer of the object to ref basic types, so use the syntax of ES6 to expand these basic types to notice! ToRefs will only convert the first layer to the ref base type * /}

Browser effect picture:

Thank you for your reading, the above is the content of "what is the difference between toRef and toRefs in Vue3". After the study of this article, I believe you have a deeper understanding of what is the difference between toRef and toRefs in Vue3. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!