A brief analysis of the difference between ref and toRef in Vue3

A brief analysis of the difference between ref and toRef in Vue3

1. ref is copied, the view will be updated

If you use ref to convert a property value in an object into responsive data

Modifying the responsive data will not affect the original data;

At the same time the view will be updated.

Ref means copying. Copying will not affect the original data.

<template>
 <div>
    <div>
      <div>{{stateObj}}</div>
       <button @click="func1">Button</button>
    </div>
 </div>
</template>
<script>
import {ref} from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"张三",age:22}
    
    //Convert a property in the object into responsive data //instead of turning the object into responsive data let stateObj=ref(obj.name)
    function func1(){
      stateObj.value="Zhang San becomes Li Si";
      //The original data has not changed. Original data obj {name: "张三", age: 22}
      console.log("original data obj",obj)

      //The responsive data has changed/**
      Responsive stateObj RefImpl {
          _rawValue: "Zhang San becomes Li Si", _shallow: false,
          __v_isRef: true, _value: "Zhang San becomes Li Si"
      }
      **/
      // Becomes a ref object console.log("responsive stateObj",stateObj)

    }

    return {stateObj,func1}
},
}
</script>

2. toRef is a reference, the view is not updated

If toRef is used to convert the properties of an object into responsive data

When we modify the responsive data, it will affect the original data

If the data is created through toRef, the data will not trigger the view after the value is modified

toRef is a reference; it refers to the property in the previous object

So after you modify it, it will affect the value of the original data.

<template>
 <div>
    <div>
      <div>{{state}}</div>
       <button @click="func1">Button</button>
    </div>
 </div>
</template>
<script>
import { toRef } from 'vue'
export default {
  name: 'App',
  setup(){
    let obj={name:"张三",age:22}
    //Convert a property name in the object into responsive data //Instead of turning the object into responsive data let state=toRef(obj, 'name');
    console.log('toRef',state)
    function func1(){
      state.value="I am Li Si";
      console.log('obj',obj)
      console.log('state',state)
    }
    return {state,func1}
  },
}
</script>

3. Conclusion

ref copy, modify responsive data, will not affect previous data, the interface will change.

toRef reference, modifying the responsive data will affect the previous data and the interface will not be updated.

Use cases for toRef

If you want to associate responsive data with original data.

And after updating the responsive data, you don't want the view to update; then you can use toRef

summary:

The difference between ref and toRef

(1) The essence of ref is copying, and modifying the responsive data will not affect the original data; the essence of toRef is a reference relationship, and modifying the responsive data will affect the original data

(2) When the ref data changes, the interface will automatically update; when the toRef data changes, the interface will not automatically update

(3) The ref passed to toRef is different; toRef receives two parameters, the first parameter is which object, and the second parameter is which attribute of the object

Summarize

This is the end of this article about the difference between ref and toRef in Vue3. For more information about the difference between Vue3 ref and toRef, please search 123WORDPRESS.COM’s previous articles or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • setup+ref+reactive implements vue3 responsiveness
  • Detailed explanation of Vue's ref attribute
  • Refs and Ref Details in Vue3
  • Introduction to reactive function toRef function ref function in Vue3
  • Vue.js $refs usage case explanation
  • Detailed analysis of the difference between Ref and Reactive in Vue3.0
  • Detailed explanation and extension of ref and reactive in Vue3
  • The complete usage of setup, ref, and reactive in Vue3 combination API
  • Usage and demonstration of ref in Vue

<<:  MySQL 8.0.15 installation and configuration graphic tutorial

>>:  CentOS7 enables MySQL8 master-slave backup and daily scheduled full backup (recommended)

Recommend

Detailed installation process of Jenkins on Linux

Table of contents 1. Install JDK 2. Install Jenki...

Example analysis of interval calculation of mysql date and time

This article uses an example to describe the inte...

How to gracefully and safely shut down the MySQL process

Preface This article analyzes the process of shut...

About the problem of running git programs in jenkins deployed by docker

1. First, an error message is reported when assoc...

How to use Webstorm and Chrome to debug Vue projects

Table of contents Preface 1. Create a new Vue pro...

Solution to Nginx 500 Internal Server Error

Today, when I was using Nginx, a 500 error occurr...

Teach you how to use docker-maven-plugin to automate deployment

1. Introduction to docker-maven-plugin In our con...

Detailed explanation of browser negotiation cache process based on nginx

This article mainly introduces the detailed proce...

How to change the tomcat port number in Linux

I have several tomcats here. If I use them at the...

Summary of learning HTML tags and basic elements

1. Elements and tags in HTML <br />An eleme...

Two usages of iFrame tags in HTML

I have been working on a project recently - Budou...