Ref function:

Syntax: const XXX = ref (initValue) const XXX = ref (initValue) Get () and set() responsively dependent on Object.defineProperty()

The Ref function is an argument for the base data type
  • The basic use
<template>
  <h2>{{Str}}</h2>
</template>

<script>
import {ref} from 'vue'
export default {
  setup(){
    const Str =ref('hello')
    return{Str}}} we define a Str variable to receive the value of the ref object generated by the ref processingreturnGo out and write Str directly into the template, where is our source data? With that in mind let's print Strsetup(){
    const Str =ref('hello')
    console.log(Str)
    return{Str}} The following information is displayed: RefImpl__v_isRef: true
_rawValue: "hello"
_shallow: false
_value: "hello"
value: "hello"
[[Prototype]]: ObjectSo here we see a value on the ref object, yes, the value that we store is on the value property, why is it directreturnThe output is Str instead of str.value. Because Vue did us a favor, we can abbreviate it here,returnStr is the equivalent of str.value, but value is not an exception. It is important to note, however, that you cannot abbreviate the data in Str when operating in the setup function.Copy the code
  • Response principle
With basic data types in mind, let's talk about the principle of responsiveness. That is, why do we use a ref object to accept data instead of just defining a string 'hello' and manipulating it directly? For the REF function, there is a kind of "contract" between the data parameters and the ref object generated by processing. After we hand over the processed parameters, that is, the REF object, we directly modify the value attribute of the ref object. Because of the existence of this contract, As a result, when the attribute value is modified, the corresponding source data parameters will also be modified, but before the original data is modified, VUE will listen to our modified data and immediately parse the template update page, which is the reactive principle of the REF object. The contract here is just get() and Object.definePropertysetWe don't have enough space to demonstrate the underlying core code. Reacti - Reacti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACti - ReACtiCopy the code

Reactive functions:

Const XXX = ref (source object) const XXX = ref (source object) The ES6-based Proxy implementation operates on source objects by Proxy, and reactive defines a deeper level of reactive data objects than the shallow level of reactive data objects defined by Reactive

Reactive Specifies parameters for object types
  • The basic use
    <template>
  <h2>Name: {{Person. Name}}</h2>
  <h2>Salary: {{Person. Job. Salary}}</h2>
</template>

<script>
import {reactive} from 'vue'
export default {
  setup(){
    const p ={
      name:'Ben'.job: {salary:'30k'}}const Person =reactive(p)
    return{Person}}} here is different from the above ref function, the parameter is a kind of data objects, and then to accept the return value of Person objects will be as same as the above ref object is the data corresponding to the value attribute? Print the Person object with this queryProxy
[[Handler]]: Object
[[Target]]: Object
job: {salary: "30k"}
name: "Ben"
[[Prototype]]: Object
[[IsRevoked]]: falseWe found that the Person object does not have a value attribute and the Person object is a proxy object. Here we can understand that Person is an enhanced VERSION of the P object. For P, Person is a proxy object, so we can directly access its own properties. Instead of the ref function mapping the data to the value property, so let'sreturnThe outgoing Person object can be placed directly in the template to read the propertiesCopy the code
  • Response principle
    Reactive is more "deep". The bottom layer relies on the Proxy implementation in ES6. All objects processed by Reactive are Proxy objects. The core idea of responsiveness is very much the same as ref, where we define a Person object to be the proxy for the P object, and they also create a contract, so we're putting the Person objectreturnWhen we go out and modify the data of the Person object, Vue listens for this action and parses the template and updates the page at the same time until the original object data changes.Copy the code
Ref function parameters for object type

How does ref define object type data relate to reactive?

A REF object can only operate on shallow data, treating the basic data type as its attribute value. If a REF parameter is an object with a deeper data type, it will resort to someone other than Reactive. At the bottom, Vue processes object parameters through reactive functions into a Proxy object on the value property of ref

<template>
  <h2>Name: {{Person. Name}}</h2>
  <h2>Salary: {{Person. Job. Salary}}</h2>
</template>

<script>
import {reactive,ref} from 'vue'
export default {
  setup(){
    const p ={
      name:'Ben'.job: {salary:'30k'}}const Person =ref(p)
    console.log(Person)
    return{Person}}} prints the result of the Person object: RefImpl {_shallow: false.__v_isRef: true._rawValue: {... },_value: Proxy}
__v_isRef: true
_rawValue: {name: "Ben".job: {... }}_shallow: false
_value: Proxy {name: "Ben".job: {... }}value: Proxy
[[Handler]]: Object
[[Target]]: Object
job: {salary: "30k"}
name: "Ben"
[[Prototype]]: Object
[[IsRevoked]]: false
[[Prototype]]: ObjectWe can clearly see that the corresponding object under the value attribute is the processing and generation of p raw data objectProxyobjectCopy the code

The difference between:

1. Storage type: THE REF object can accept data of both basic and object types, and reactive only accepts data of object types. Reactive: The reactive function is also dependent on reactive 3 when the ref parameter is an object type. Usage: The key-value pair of the Proxy object corresponds to the key-value pair of the original data object one by one, and the object can be used directly (the object that receives the returned value). In the form of the key name, the ref object will map the data parameter to its value property. In the template, we can omit the. Value form, which looks like "assigning the source data to a variable of type REF, can be used directly in the template." 4. The reactive principle: Ref's reactive principle depends on get() and object.defineProperty ()setReactive relies on proxies in ES6.Copy the code