In Vue.js, we often need to monitor properties, and we can respond to data changes through watch. The following uses an example to introduce the basic usage of watch.
shallow monitoring
<template>
<div>
<button @click="setCount">+{
{ count }}</button>
<button @click="setName">{
{ name }}</button>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('jons')
const setCount = () => {
count.value++
}
const setName = () =>{
name.value= 'hello'
}
//侦听一个参数
watch(count,(newval,oldVal) => {
console.log(newval, oldVal)
})
//侦听多个参数，不会立即执行
watch([count, name],([newCount, newName], [oldCount, oldName]) => {
console.log('比之前变了', [newCount, newName], [oldCount, oldName])
})
//侦听多个参数,并立即执行
watch([count, name],([newCount, newName], [oldCount, oldName]) => {
console.log('比之前变了', [newCount, newName], [oldCount, oldName])
},
{ //立即执行
immediate:true
})
</script>Multiple listeners, deep listeners, and listener responsive object properties
<template>
<div>
<button @click="setCount">+{
{ count }}</button>
<button @click="setName">{
{ name }}</button>
<button @click="setAge">age:{
{ state.age }}</button>
</div>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const count = ref(0)
const name = ref('jons')
const setCount = () => {
count.value++
}
const setName = () =>{
name.value= 'hello'
}
const state = ref({age:1, name: 'jon'}
)
const setAge = () => {
state.value.age++
}
//无效
watch(state,()=> {
console.log(state.value.age)
})
//有效
watch(
//返回响应式对象属性
()=> state.value.age,
(age,oldAge) => {
console.log(age, oldAge)
})
//有效，慎用，递归影响性能
watch(state,() =>{
console.log('深度监听',state.value.age)
},{
deep:true
})
//侦听一个参数
watch(count,(newval,oldVal) => {
console.log(newval, oldVal)
})
//侦听多个参数，不会立即执行
watch([count, name],([newCount, newName], [oldCount, oldName]) => {
console.log('比之前变了', [newCount, newName], [oldCount, oldName])
})
//侦听多个参数,并立即执行
watch([count, name],([newCount, newName], [oldCount, oldName]) => {
console.log('比之前变了', [newCount, newName], [oldCount, oldName])
},
{ //立即执行
immediate:true
})
</script>watchEffect
watchEffect will track dependencies during side effects. It will automatically track all accessible reactive properties during synchronous execution. This is more convenient, and the code tends to be cleaner, but sometimes its responsive dependencies are less explicit.
const phone = ref(119)
const changePhone = () => {
phone.value++
}
//会立即执行
watchEffect(()=> {
console.log(phone.value, state.value.age)
})- END -
About Qi Wu Troupe
Qi Wu Troupe is the largest front-end team of 360 Group, and participates in the work of W3C and ECMA members (TC39) on behalf of the group. Qi Wu Troupe attaches great importance to talent training. There are engineers, lecturers, translators, business interface people, team leaders and other development directions for employees to choose from, and supplemented by providing corresponding training on technical skills, professional skills, general skills, leadership skills, etc. course. Qi Dance Troupe welcomes all kinds of outstanding talents to pay attention to and join Qi Dance Troupe with an open and talent-seeking attitude.
