setup+ref+reactive Realization of vue3 Responsive Function

setup is used to write a combined api, and the internal data and methods need to pass through return before the template can be used. In the previous 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, we find that variables cannot respond in real time. Next, let's look at how setup realizes the responsive function of data.

1. ref

The custom attributes in setup do not have responsive ability, so ref is introduced. The bottom layer of ref wraps the attribute wrapping value into an proxy through proxy, and the inside of proxy is an object, which makes the basic type of data have responsive ability and must be introduced before use.

Example 1: ref uses

<template>
 <div>
  <input type="text" v-model="mood">
  {{mood}}
 </div>
</template>
<script>
import { ref } from "vue"
export default{
 setup(){
  let mood = ref(" At this time, I am in a bad mood! ")
  setTimeout(()=>{
   mood.value = " The mood should change like a person 1 Sample beauty "
  },3000)
  return{
   mood
  }
 }
}
</script>

At this time, mood can be edited arbitrarily in setup template, which can ensure real-time response. Instance adds value to modify the value of mood because ref works as follows:

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

Amend to: let mood = proxy ({value: "I'm in a bad mood at this time!"})

2. reactive

The ref above makes the underlying data type responsive, but if we switch to data of reference type, it will be invalid. So reactive is introduced.

reactive wraps reference type data into proxy through underlying wrapping, as follows:

let me = reactive({
 single:true,
 want:" A warm man as warm as a stove "
})

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

When referencing, just use me. want directly.

Example 2: reactive uses

<template>
 <div>
  {{me.want}}
 </div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:" A warm man as warm as a stove "
  })
  setTimeout(()=>{
   me.want = " Summer melts easily "
  },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. Application of toRefs and toRef

setup + ref + reactive implements a data-responsive expression, which cannot be deconstructed using ES6 and eliminates the response characteristic. Therefore, toRefs deconstruction is needed. When using it, it needs to be introduced first.

It works as follows:

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

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

toRefs resolves single and want into two proxy, 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:" A warm man as warm as a stove "
  })
  setTimeout(()=>{
   me.want = " Summer melts easily "
  },3000)
  //  Deconstruction 
  const {single,want} = toRefs(me)
   return{
    single,
    want
   }
  }
}
</script>

Effect of toRef: Returns one attribute of the object as a reference. It is difficult to understand, so it is easier to understand the results by printing.

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

toRef is to pass values between components and process optional parameters. When running, first check whether love exists in me, inherit love in me if it exists, create an love if it does not exist, and then deconstruct and assign values to variable lv.

Example 4: toRef uses

<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:" A warm man as warm as a stove "
  })
 setTimeout(()=>{
  me.want = " Summer melts easily "
 },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 implements the responsive function of data in vue2.

toRefs deconstructs the data wrapped by reactive, and toRef is used to check optional parameters.