setup+ref+reactive implements vue3 responsiveness

Setup is used to write combined APIs. The internal data and methods need to be returned before the template can use them. In the previous vue2, the data returned by data can be directly used for two-way binding. If we directly bind the data type in setup to two-way binding, we find that the variable cannot respond in real time. Next, let’s see how setup implements the responsiveness of data?

1. ref

The custom attributes in setup are not responsive, so ref is introduced. Ref wraps the attribute value into a proxy through a proxy. The proxy contains an object, which makes the basic type of data responsive. It must be introduced before use.

Example 1: ref usage

<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 right now!")
  setTimeout(()=>{
   mood.value = "The mood should become as beautiful as the person"
  },3000)
  return {
   mood
  }
 }
}
</script>

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

let mood = ref("I'm in a bad mood right now!")

Modify to: let mood = proxy({value:"I'm in a bad mood right now!"})

Reactive

The above ref makes the basic data type responsive, but if we change it to reference type data, it will fail. So reactive was introduced.

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

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

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

When quoting, just use me.want.

Example 2: Reactive usage

<template>
 <div>
  {{me.want}}
 </div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"a warm man who is as warm as a stove"
  })
  setTimeout(()=>{
   me.want = "It's easy to melt in the summer"
  },3000)
  return {
   me
  }
 }
}
</script>

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

3. toRefs and toRef Application

setup + ref + reactive implements data responsiveness, and ES6 destructuring cannot be used, which will eliminate the responsiveness. Therefore, toRefs deconstruction is required and it needs to be introduced first when used.

It works as follows:

import { ref , reactive, toRefs } from "vue"
let me = reactive({
 single:true,
 want:"a warm man who is as warm as a stove"
})
//Run as let me = proxy : { single: true, want:"A warm man who is 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 decomposes single and want into two proxies, so it is responsive.

Example 3: toRefs destructuring 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 who is as warm as a stove"
  })
  setTimeout(()=>{
   me.want = "It's easy to melt in the summer"
  },3000)
  // deconstruct const {single,want} = toRefs(me)
   return {
    single,
    want
   }
  }
}
</script>

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

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

toRef is used to pass values ​​between components and process optional parameters. When running, it first checks whether love exists in me. If it exists, it inherits love in me. If it does not exist, it creates a love and then deconstructs and assigns it to the variable lv.

Example 4: toRef usage

<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 who is as warm as a stove"
  })
 setTimeout(()=>{
  me.want = "It's easy to melt in the summer"
 },3000)
 const { single, want } = toRefs(me)
 const love = toRef(me,'love')
 console.log('love',love);
 return {
  single,
  want
  }
 }
}
</script>

IV. Conclusion

ref makes basic data types responsive, while reactive makes reference type data responsive. setup + ref + reactive fully implements the data responsiveness function in vue2.

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

The above is what I introduced to you about how to realize the responsive function of vue3 through setup+ref+reactive. I hope it will be helpful to you. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!