Network Security Internet Technology Development Database Servers Mobile Phone Android Software Apple Software Computer Software News IT Information

In addition to Weibo, there is also WeChat

Please pay attention

WeChat public account

Shulou

What is the difference between toRef and toRefs in Vue3

2025-01-21 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Share

Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.

Views: 215

*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.

Share To

Development

Wechat

© 2024 shulou.com SLNews company. All rights reserved.

12
Report