Setup is used to write composite APIs. Internal data and methods can only be used after passing return. Previously vue2, the data returned by data can be directly bound in both directions. If we bind the data types in setup directly in both directions, it is found that variables cannot respond in real time. Next, let's look at how setup implements the responsive function of data?

1, ref

The custom attributes in setup do not have the ability to respond, so ref is introduced. The bottom layer of ref wraps the attribute packaging value into a proxy through a proxy. The proxy is an object inside, so that the basic type of data has the ability to respond. It must be introduced before use.

Example 1: ref use

<template>
 <div>
  <input type="text" v-model="mood">
  {{mood}}
 </div>
</template>
<script>
import { ref } from "vue"
export default{
 setup(){
  let mood = ref("I'm in a bad mood at this time!")
  setTimeout(()=>{
   mood.value = "The mood should become as beautiful as people"
  },3000)
  return{
   mood
  }
 }
}
</script>

 

At this time, you can edit the mood arbitrarily in the setup template to ensure real-time response. The instance adds value when modifying the value of mood because ref works as follows:

let mood = ref("I'm in a bad mood at this time!")

Modified into  : let mood = proxy({value: "I'm in a bad mood!"})

2, reactive

The above ref makes the basic data type responsive, but if we replace it with data of reference type, it will become invalid. So reactive is introduced.

reactive wraps the reference type data into the proxy through the underlying packaging. The operating principle is as follows:

let me = reactive({
 single:true,
 want:"Warm man like a stove"
})

// The running result is
let me = proxy : { single: true, want:"Warm man like a stove" }

 

When referencing, just use me.want directly.

Example 2: reactive use

<template>
 <div>
  {{me.want}}
 </div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"Warm man like a stove"
  })
  setTimeout(()=>{
   me.want = "Summer is easy to melt"
  },3000)
  return{
   me
  }
 }
}
</script>

 

The responsive function of data in vue2 can be fully realized through setup + ref + reactive, so setup can completely replace data.

3, toRefs, toRef applications

setup + ref + reactive implements the data response. It cannot be deconstructed with ES6, which will eliminate the response feature. Therefore, toRefs needs to be deconstructed. When using, it needs to be introduced first.

Its working principle is:

import { ref , reactive, toRefs } from "vue"
let me = reactive({
 single:true,
 want:"Warm man like a stove"
})
//Run as
let me = proxy : { single: true, want:"Warm man like a stove" }

const { single, want } = toRefs( me )
// Run as
single : proxy({ value:true })
want : proxy({ value:"Warm man like a stove" })

 

toRefs combines single and want solutions into two proxies, so it is responsive.

Example 3: toRefs deconstructs data

<template>
 <div>
  {{want}}
  <input type="text" v-model="want">
 </div>
</template>
<script>
import { ref , reactive, toRefs } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"Warm man like a stove"
  })
  setTimeout(()=>{
   me.want = "Summer is easy to melt"
  },3000)
  // deconstruction
  const {single,want} = toRefs(me)
   return{
    single,
    want
   }
  }
}
</script>

 

toRef function: returns an attribute of an object as a reference. It is difficult to understand. You can print and view the results, which is easier to understand.

let me = reactive({
 single:true,
 want:"Warm man like a stove"
})
let lv = toRef( me, 'love' )
console.log('love',love);
//Print results
ObjectRefImpl {
 __v_isRef: true
 _key: "love"
 _object: Proxy {single: true, want: "Warm man like a stove"}
 value: undefined
 [[Prototype]]: Object
}

 

toRef refers to the transfer of values between components and the processing of optional parameters. When running, first check whether there is love in me. If it exists, inherit the love in me. If it does not exist, create a love, and then deconstruct and assign it to the variable lv.

Example 4: use of toRef

<template>
 <div>
  {{want}}
 <input type="text" v-model="want">
</div>
</template>
<script>
import { ref , reactive, toRefs, toRef } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"Warm man like a stove"
  })
 setTimeout(()=>{
  me.want = "Summer is easy to melt"
 },3000)
 const {single,want } = toRefs(me)
 const love = toRef(me,'love')
 console.log('love',love);
 return{
  single,
  want
  }
 }
}
</script>

 

4, Summary

Ref makes the underlying data type responsive, while reactive makes the data of the reference type responsive. setup + ref + reactive fully realizes the data responsive function in vue2.

toRefs deconstructs the data wrapped in reactive, and toRef is used for optional parameters.