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!