watch() defaults to lazy listening, that is, the callback function is only executed when the listening source changes.
The first parameter is the source of the listener . This source can be any of the following:
- one function, one return value
- a ref
- A reactive object (defined by reactive)
- ...or an array of values of the above types
The second parameter is a callback function, which can receive three parameters: the new value (newValue), the old value (oldValue), and a callback function for side effect cleanup
The third parameter is an optional parameter, which is an object structure, such as: deep (deep monitoring), immediate (monitor once when created), etc...
Monitor a reactive data defined by ref
<template>
<div>
<h2>{
{name}}</h2>
<button @click="name += '666'">修改姓名</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let name = ref('小明')
watch(name,(newValue, oldValue)=>{
console.log('修改了name',newValue,oldValue);
})
return {
name
}
}
}
</script>
Monitoring ref defines multiple responsive data
Define multiple responsive data, the first parameter passed is multi-wrapped in the form of an array
<template>
<div>
<h2>{
{name}}</h2>
<button @click="name += '666'">修改姓名</button>
<h2>{
{age}}</h2>
<button @click="age++">增长年龄</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let name = ref('小明')
let age = ref(18)
watch([name,age],(newValue, oldValue)=>{
console.log('修改了',newValue,oldValue);
})
return {
name,
age
}
}
}
</script>
Monitor all attributes of a responsive data defined by reactive
important point:
- The old value (oldValue) cannot be obtained correctly with reactive data
- The deep monitoring is forced to be turned on (closing the deep attribute is invalid!!!)
<template>
<div>
<h1>姓名:{
{data.name}}</h1>
<h1>年龄:{
{data.age}}</h1>
<h1>测试深度监视数值:{
{data.school.s1.num}}</h1>
<button @click="data.name += '~'">修改姓名</button>
<button @click="data.age++">年龄增长</button>
<button @click="data.school.s1.num++">测试深度监视数值</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let data = reactive({
name:'张三',
age:18,
school:{
s1:{
num:666
}
}
})
watch(data,(newValue, oldValue)=>{
console.log('修改了data',newValue,oldValue);
},{deep:false})
return {
data
}
}
}
</script>
<style lang="scss" scoped>
</style>
It can be seen from the printing results that the new value is exactly the same as the old value, and the old value cannot be monitored (waiting for the official follow-up version)
In the above code, the deep attribute is set to false, but the printed result can still be monitored, so the deep attribute is invalid
Monitor a certain data of a responsive data defined by reactive
If the parameter 1 in the watch uses the method to read the value, it will warn, and the operation is not available, but how to monitor a certain data?
In parameter 1, a function needs to be configured and passed by return value
<template>
<div>
<h1>姓名:{
{data.name}}</h1>
<h1>年龄:{
{data.age}}</h1>
<h1>测试深度监视数值:{
{data.school.s1.num}}</h1>
<button @click="data.name += '~'">修改姓名</button>
<button @click="data.age++">年龄增长</button>
<button @click="data.school.s1.num++">测试深度监视数值</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let data = reactive({
name:'张三',
age:18,
school:{
s1:{
num:666
}
}
})
watch(()=>data.age,(newValue, oldValue)=>{
console.log('修改了data中的年龄',newValue,oldValue);
},{deep:false})
return {
data
}
}
}
</script>
It can be seen that the return value configuration of parameter 1 in the watch written in the code
Monitor some data of a responsive data defined by reactive
If you read the previous monitoring ref to define multiple responsive data and monitor a certain data of reactive data defined by reactive, you may know how to write it, that is, wrap it in an array, and write multiple in the array function to return the response data
<template>
<div>
<h1>姓名:{
{data.name}}</h1>
<h1>年龄:{
{data.age}}</h1>
<h1>测试深度监视数值:{
{data.school.s1.num}}</h1>
<button @click="data.name += '~'">修改姓名</button>
<button @click="data.age++">年龄增长</button>
<button @click="data.school.s1.num++">测试深度监视数值</button>
</div>
</template>
<script>
import { reactive, ref } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
export default {
setup(){
let data = reactive({
name:'张三',
age:18,
school:{
s1:{
num:666
}
}
})
watch([()=>data.age,()=>data.name],(newValue, oldValue)=>{
console.log('修改了data中的年龄',newValue,oldValue);
},{deep:false})
return {
data
}
}
}
</script>