- Are the two most important responsive APIs in Vue3's composition API
- Ref is used to process basic type data, and reactive is used to process objects (recursive deep responsive)
- If you use ref object/array, the object/array will be automatically converted into reactive proxy objects.
- Inside ref: hijacking of data by adding getter/setter to the value attribute
- Reactive internal: Use Proxy to implement hijacking of all data inside the object, and operate internal data inside the object through Reflect
- Data operations of ref: .value is required in js, not required in templates (the .value will be automatically added when the template is parsed internally)
<template>
<div>refand</div>
<div>msg1:{{msg1}}</div>
<div>msg2:{{msg2}}</div>
<div>msg3:{{msg3}}</div>
<button @click="updata">Change</button>
</template>
<script lang="ts">
import {reactive, ref} from "vue";
export default {
setup(){
const msg1=ref('hello')
const msg2 = reactive({
name: 'jack',
wife: {
name:'rose'
}
})
const msg3 = ref({ // If the ref is an object, then it has been processed reactively to form a Proxy object name: 'jack',
wife: {
name: 'rose'
}
})
function updata(){
+= '++'
+= '++'
+= '++'
}
return {
msg1,
msg2,
msg3,
updata
}
}
}
</script>
Computational properties and monitoring
Computed function:
- Consistent with computed configuration function
- There is getter/setter
Consistent with watch configuration function
- Monitors one or more responsive data specified, and automatically executes monitoring callbacks once the data changes.
- The default callback is not executed at the beginning, but you can specify that the first time is executed immediately at the beginning by configuring immediate to true.
- Specify deep monitoring by configuring deep to true
watchEffect function
- Without directly specifying the data to be monitored, which responsive data are monitored by the callback function.
- The first time is executed at the beginning by default, so that data to be monitored can be collected
- Callback when monitoring data changes
<template>
<h1>Computational properties and monitoring</h1>
<fieldset>
<legend>Name operation</legend>
Last name：<input type="text" placeholder="Enter a last name" v-model=""><br>
name：<input type="text" placeholder="Enter a name" v-model="">
</fieldset>
<fieldset>
<legend>Compute properties and monitoring</legend>
Name：<input type="text" placeholder="Show Name" v-model="fullName1"><br>
Name：<input type="text" placeholder="Show Name" v-model="fullName2"><br>
Name：<input type="text" placeholder="Show Name" v-model="fullName3"><br>
</fieldset>
</template>
<script lang="ts">
import {reactive, ref, computed, watch, watchEffect} from "vue";
export default {
setup() {
const user=reactive({
firstName:'East',
lastName: 'Undefeated'
})
/*
* Computed properties in Vue3
* If only one callback function is passed in to compute attribute, then it means get
* Returns a ref object
* */
const fullName1=computed(()=>{
return + '-' +
})
const fullName2=computed({
get(){
return + '-' +
},
set(val){
const name=('-')
=name[0]
=name[1]
}
})
// Monitoring properties let fullName3=ref('')
watch(user,({firstName,lastName})=>{ // Deconstruct the object in user =firstName + '-' +lastName
},{immediate:true}) // Execute once at the beginning. You can also add deep monitoring. // watchEffect(()=>{
// = + '-' +
// }) // More intelligent, automatically execute once at the beginning
/*
* Wathc can monitor multiple attributes and listen for non-responsive data, need ()=>
* */
watch([()=>,()=>],()=>{
("Watch executed")
})
return {
user,
fullName1,
fullName2,
fullName3
}
}
}
</script>
This is the end of this article about vue3 responsive data and watch attributes. For more related vue3 watch attribute content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!