setup is used to write a combination API. The internal data and methods need to be returned before the template can be used. In the previous vue2, the data returned by data can be directly bound in two-way. If we directly bind the data type in the setup two-way, we find that the variable cannot respond in real time. Next, let’s take a look at how setup implements data’s responsive function?
1. Ref
The custom attributes in setup do not have responsive capabilities, so ref is introduced. The underlying ref wraps the property wrapping value into a proxy. The proxy is an object inside, so that the basic type of data has responsive capabilities and must be introduced before use.
Example 1: ref
<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(()=>{
= "The mood must become as beautiful as a human"
},3000)
return{
mood
}
}
}
</script>
At this time, you can edit the mood anyway in the setup template to ensure real-time response. The instance adds value to modify the value of mood because the ref works:
let mood = ref("I'm in such a bad mood at this time!")
Modify to: let mood = proxy({value:"I'm in a bad mood at this time!"})
2. Reactive
The above ref makes the basic data type responsive, but if we change it to the reference type of data, it will be invalid. So reactive was introduced.
Reactive wraps the reference type data into proxy through the underlying wrapper. The usage principle is as follows:
let me = reactive({
single:true,
want:"Warming man like a stove"
})
// The operation result islet me = proxy : { single: true, want:"Warming man like a stove" }
When citing, just use it directly.
Example 2: Reactive usage
<template>
<div>
{{}}
</div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
setup(){
let me = reactive({
single:true,
want:"Warming man like a stove"
})
setTimeout(()=>{
= "Summer is easy to melt"
},3000)
return{
me
}
}
}
</script>
The responsive function of data in vue2 can be fully implemented through setup + ref + reactive, so the setup can completely replace data.
3. toRefs, toRef applications
setup + ref + reactive implements data responsiveness and cannot be deconstructed using ES6, which will eliminate the response feature. Therefore, toRefs is deconstructed, and when used, it needs to be introduced first.
It works as follows:
import { ref , reactive, toRefs } from "vue"
let me = reactive({
single:true,
want:"Warming man like a stove"
})
//Run aslet me = proxy : { single: true, want:"Warming man like a stove" }
const { single, want } = toRefs( me )
// Run assingle : proxy({ value:true })
want : proxy({ value:"Warming man like a stove" })
toRefs decomposes single and want into two proxy s, 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:"Warming man like a stove"
})
setTimeout(()=>{
= "Summer is easy to melt"
},3000)
// Deconstruction const {single,want} = toRefs(me)
return{
single,
want
}
}
}
</script>
toRef function: return a certain property of the object as a reference. It is difficult to understand, so you can print it and view the results to understand.
let me = reactive({
single:true,
want:"Warming man like a stove"
})
let lv = toRef( me, 'love' )
('love',love);
//Print resultsObjectRefImpl {
__v_isRef: true
_key: "love"
_object: Proxy {single: true, want: "Warming man like 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. 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: toRef Use
<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:"Warming man like a stove"
})
setTimeout(()=>{
= "Summer is easy to melt"
},3000)
const {single,want } = toRefs(me)
const love = toRef(me,'love')
('love',love);
return{
single,
want
}
}
}
</script>
4. Summary
ref makes the basic data type responsive, while reactive makes the reference type of data responsive. setup + ref + reactive fully implements the data responsive function in vue2.
toRefs deconstructs reactive wrapped data, toRef is used to selectable parameters.
The above is what the editor introduced to you to realize the vue3 responsive function through setup+ref+reactive. I hope it will be helpful to everyone. Thank you very much for your support for my website!