In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
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.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.