Refs and Ref Details in Vue3

Refs and Ref Details in Vue3

The editor also shares with you the corresponding problems of data in Vue3. Let's take an example like this

Vue.createApp({
    template: `<div>{{ nameObj.name }}</div>`,
    setup() {
        const { reactive } = Vue
        const nameObj = reactive({name:'lilei',age:18})
        
        setTimeout(() => {
            nameObj.name = 'hanmeimei'
        },2000)
        return {
            nameObj
        }
    }
}).mount('#root')

At this point, we may think of the content about destructuring assignment in es6 . Can we get the internal name of nameObj in the above example by destructuring the result, and then return name directly? That is to write the code like this

Vue.createApp({
    template: `<div>{{ name }}</div>`,
    setup() {
        const { reactive, toRefs } = Vue
        const nameObj = reactive({name:'lilei',age:18})
                let { name } = nameObj
        setTimeout(() => {
            name.value = 'hanmeimei'
        },2000)
        return {
            name
        }
    }
}).mount('#root')

In actual operation, we found that the content on the page did not become hanmeimei . At this time, we need to introduce another content in Vue3 . We should modify the code to achieve the responsiveness of data and pages.

Vue.createApp({
    template: `<div>{{ name }}</div>`,
    setup() {
        const { reactive, toRefs } = Vue
        const nameObj = reactive({name:'lilei',age:18})
        let { name } = toRefs(nameObj)
        setTimeout(() => {
            name.value = 'hanmeimei'
        },2000)
        return {
            name
        }
    }
}).mount('#root')

Similarly, toRefs is very similar to toRef . The code example is as follows

Vue.createApp({
    template: `<div>{{ age }}</div>`,
    setup() {
        const { reactive, toRef } = Vue
        const nameObj = reactive({name:'lilei'})
        let age = toRef(nameObj,'age')
        setTimeout(() => {
            age.value = 'hanmeimei'
        },2000)
        return {
            age
        }
    }
}).mount('#root')

This is the end of this article about the details of Refs and Ref in Vue3. For more relevant content about Refs and Ref in Vue3, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Vue basically uses --refs to get instances of components or elements
  • How to understand the difference between ref toRef and toRefs in Vue3
  • How to get elements with ref in vue3

<<:  Code for aligning form checkbox and radio text

>>:  Problems installing TensorRT in docker container

Recommend

MySql5.7.21 installation points record notes

The downloaded version is the Zip decompression v...

Example explanation of MySQL foreign key constraints

MySQL's foreign key constraint is used to est...

Vue.js implements simple timer function

This article example shares the specific code of ...

MySql grouping and randomly getting one piece of data from each group

Idea: Just sort randomly first and then group. 1....

DD DT DL tag usage examples

We usually use the <ul><li> tags, but ...

Detailed explanation of slots in Vue

The reuse of code in vue provides us with mixnis....

How to implement web page compression in Nginx optimization service

Configure web page compression to save resources ...

Detailed explanation of nginx proxy_cache cache configuration

Preface: Due to my work, I am involved in the fie...

Use HTML to write a simple email template

Today, I want to write about a "low-tech&quo...

MySQL series: Basic concepts of MySQL relational database

Table of contents 1. Basic Concepts 2. Developmen...

js+css to realize three-level navigation menu

This article example shares the specific code of ...

Solution to Linux server graphics card crash

When the resolution of the login interface is par...

Specific use of GNU Parallel

what is it? GNU Parallel is a shell tool for exec...

NodeJs high memory usage troubleshooting actual combat record

Preface This is an investigation caused by the ex...