在Vue.js中我们经常会需要监听属性，我们可以通过 watch 来响应数据的变化。下面通过举例来介绍一下watch的基本使用方法。
浅层监听
<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>多个监听、深层监听、监听响应式对象属性
<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则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。
const phone = ref(119)
const changePhone = () => {
phone.value++
}
//会立即执行
watchEffect(()=> {
console.log(phone.value, state.value.age)
})- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
