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

How to manually scroll logs in Linux system

Log rotation is a very common function on Linux s...

Solution to the problem that elements with negative z-index cannot be clicked

I was working on a pop-up ad recently. Since the d...

Details about the like operator in MySQL

1. Introduction When filtering unknown or partial...

HTML+CSS to create heartbeat special effects

Today we are going to create a simple heartbeat e...

Implementation of installing Docker in win10 environment

1. Enter the Docker official website First, go to...

Learn to deploy microservices with docker in ten minutes

Since its release in 2013, Docker has been widely...

CSS--overflow:hidden in project examples

Here are some examples of how I use this property ...

Solution to MySQL remote connection failure

I have encountered the problem that MySQL can con...

Summary of 7 reasons why Docker is not suitable for deploying databases

Docker has been very popular in the past two year...

A complete example of implementing a timed crawler with Nodejs

Table of contents Cause of the incident Use Node ...

How to use the Fuser command in Linux system

What is Fuser Command? The fuser command is a ver...

Native JS realizes compound motion of various motions

This article shares with you a compound motion im...

Two methods of implementing automatic paging in Vue page printing

This article example shares the specific code of ...