1. ref is copied, the view will be updatedIf 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 updatedIf 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. Conclusionref 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 SummarizeThis 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:
|
<<: MySQL 8.0.15 installation and configuration graphic tutorial
>>: CentOS7 enables MySQL8 master-slave backup and daily scheduled full backup (recommended)
Table of contents 1. Install JDK 2. Install Jenki...
This article uses an example to describe the inte...
Preface This article analyzes the process of shut...
Table of contents The pitfalls Filling method Wha...
1. First, an error message is reported when assoc...
Table of contents Preface 1. Create a new Vue pro...
There are two types: (different browsers) 1. Avail...
Today, when I was using Nginx, a 500 error occurr...
1. Introduction to docker-maven-plugin In our con...
Due to the needs of the work project, song playba...
This article mainly introduces the detailed proce...
I have several tomcats here. If I use them at the...
1 Download The address is: https://dev.mysql.com/...
1. Elements and tags in HTML <br />An eleme...
I have been working on a project recently - Budou...