1. Listen to the basic data types created by ref
watchThe first parameter can be directly written to the data name that needs to be monitored.，Listen to the change of its value
<div>
<h1>Situation 1：Monitoring【ref】Defined【Basic Type】data</h1>
<h2>The current sum is：{{ sum }}</h2>
<el-button @click="changeSum">Click mesum+1</el-button>
</div>
// datalet sum = ref(0)
// methodfunction changeSum() {
+= 1
}
// Monitoring, situation 1: Monitoring [base type] data defined by [ref]const stopWatch = watch(sum, (newValue, oldValue) => {
('sum has changed', newValue, oldValue)
if (newValue >= 10) {
stopWatch()
}
})2. Listen to the object type created by ref
When the watch monitors the person, the person's address value is listened to. It can only be listened to when the person's reference address changes. When written as (, { name: 'Li Si', age: 90, son: { age: 5 } }), it still cannot be listened to.
When deep: true is enabled, no matter which parameter in person is modified, including the son object, it can be listened to
<div>
<h1>Situation 2：Monitoring【ref】Defined【Object Type】data</h1>
<h2>Name：{{ }}</h2>
<h2>age：{{ }}</h2>
<h2>儿子age：{{ }}</h2>
<el-button @click="changeName">Modify the name</el-button>
<el-button @click="changeAge">修改age</el-button>
<el-button @click="changePerson">Modify the whole person</el-button>
<el-button @click="changeSonAge">修改儿子age</el-button>
</div>
// datalet person = ref({
name: 'Zhang San',
age: 18,
son: { age: 5 }
})
// methodfunction changeName() {
+= '~'
}
function changeAge() {
+= 1
}
function changePerson() {
= { name: 'Li Si', age: 90, son: { age: 5 } }
}
function changeSonAge() {
+= 1
}
watch(
person,
(newValue, oldValue) => {
('person has changed', newValue, oldValue)
},
{ deep: true }
)3. Listen to object type data defined by reactive, and deep monitoring will be enabled by default.
As mentioned earlier, if you are listening to object type data created by ref, you need to manually enable deep monitoring. When listening to object type data created by reactive, deep monitoring will be automatically enabled.
<div>
<h1>Situation Three：Monitoring【reactive】Defined【Object Type】data</h1>
<h2>Name：{{ }}</h2>
<h2>age：{{ }}</h2>
<el-button @click="changeName">Modify the name</el-button>
<el-button @click="changeAge">Reviseage</el-button>
<el-button @click="changePerson">Modify the whole person</el-button>
<hr />
<h2>test：{{ }}</h2>
<el-button @click="test">Revise</el-button>
</div>
// datalet person = reactive({ name: 'Zhang San', age: 18 })
let obj = reactive({ a: { b: { c: 666 } } })
// methodfunction changeName() {
+= '~'
}
function changeAge() {
+= 1
}
function changePerson() {
(person, { name: 'Li Si', age: 80 })
}
function test() {
+= 888
}
// Monitoring, situation 3: Monitoring [object type] data defined by [reactive], and the default is to enable deep monitoring.watch(person, (newValue, oldValue) => {
('person has changed', newValue, oldValue)
})
watch(obj, (newValue, oldValue) => {
('Obj has changed', newValue, oldValue)
})4. Listen to a certain property in the object type defined by ref or reactive
Listen to the basic type of object data, and it should be written in function form
The object type data that is monitored is the object, which can be written in function form or directly
It is listening to the object type data of the object, and when changing the object, the application address is changed, for example, = { ... }, it must be written in function form.
<div>
<h1>Situation 4：Monitoring【ref】or【reactive】Defined【Object Type】An attribute in the data</h1>
<h2>Name：{{ }}</h2>
<h2>age：{{ }}</h2>
<h2>car：{{ .c1 }}、{{ .c2 }}</h2>
<el-button @click="changeName">Modify the name</el-button>
<el-button @click="changeAge">修改age</el-button>
<el-button @click="changeC1">Modify the first car</el-button>
<el-button @click="changeC2">Modify the second car</el-button>
<el-button @click="changeCar">Modify the entire car</el-button>
</div>
// datalet person = reactive({ name: 'Zhang San', age: 18, car: { c1: 'Benz', c2: 'BMW' } })
// methodfunction changeName() {
+= '~'
}
function changeAge() {
+= 1
}
function changeC1() {
.c1 = 'Audi'
}
function changeC2() {
.c2 = 'public'
}
function changeCar() {
// = { c1: 'Yardi', c2: 'Emma' } (, { c1: 'Yadi', c2: 'Emma' })
}
// Monitoring, Situation 4: Monitor a certain attribute in a responsive object, and the attribute is of a basic type, and it should be written as a functional one.watch(
() => ,
(newValue, oldValue) => {
('Changed', newValue, oldValue)
}
)
watch(
() => , // If you use = { ... }, you must use the function writing method; if you use it, you can write it directly (newValue, oldValue) => {
('Changed', newValue, oldValue)
},
{ deep: true }
)If you need to listen to multiple data, you can merge 2 watches into one:
watch(
[() => , () => ],
(newValue, oldValue) => {
('Changed', newValue, oldValue)
},
{ deep: true }
)Summarize:
Listen to the basic data type created by ref, it must be written directly, and cannot be written in function form.
Listen to the object data type created by ref, which can be written directly or in function form. You need to enable deep: true
Listen to the object data type created by reactive, and must be written directly, and cannot be written in function form. Deep: true is enabled by default.
Listen to a property in the object type created by ref or reactive. This type is a basic data type and must be written in function form.
Listen to a certain property in the object type created by ref or reactive. This type is the object data type. It can be written directly or in a function form. You need to enable deep: true. If you want to listen for changes in reference address, you must write it in function form
| Serial number | Condition | Whether to use function writing | Do you need to manually turn on deep monitoring? |
|---|---|---|---|
| 1 | Listen to the basic data type created by ref | no. Must be written directly, not function form | no |
| 2 | Listen to the object data type created by ref | All are OK. Can be written directly or in function form | yes |
| 3 | Listen to the object data type created by reactive | no. Must be written directly, not function form | no. Deep monitoring is enabled by default |
| 4 | Listen to a property in the object type created by ref or reactive, which is the basic data type | yes. Must be written in function form | no |
| 5 | Listen to a property in the object type created by ref or reactive, which is the object data type | All are OK. It can be written directly or in function form; if you want to listen for changes in reference address, you must be written in function form | yes |
This is the end of this article about the details of watch monitoring in vue3. For more related vue3 watch monitoring content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!