watch监听器使用方法
1. watch监听器可以监听一个getter函数
- 这个
getter要返回一个响应式对象 - 当该对象更新后，会执行对应的回调函
import { reactive, watch } from 'vue'
const state = reactive({ count: 0 })
watch(() => state.count, (newValue, oldValue) => {
// 因为watch被观察的对象只能是getter/effect函数、ref、active对象或者这些类型是数组
// 所以需要将state.count变成getter函数
})
2.watch可以监听响应式对象
import { ref, watch } from 'vue'
const count = ref(0)
watch(count, (newValue, oldValue) => {
})
3.watch可以监听多个响应式对象，任何一个响应式对象更新，就会执行回调函数
import { ref, watch } from 'vue'
const count = ref(0)
const count2 = ref(1)
//第一种写法
watch([count, count2], ([newCount, newCount2], [oldCount, oldCount2]) => {
})
//还有第二种写法
watch([count, count2], (newValue, oldVlaue) => {
console.log(newValue)//[newCount, newCount2]
console.log(oldValue)//[oldCount, oldCount2]
})
4. 深度监听和立即执行
{ deep: true , immediate: true }
// 定义响应式对象数据
const obj = reactive({
name: '小象',
age: 18,
cp: {
name: '小花',
age: 16,
},
})
// 监听 reactive 定义的响应式数据
// 特点1：newVal === oldVal，根本就是同一个内容地址，就是对象本身
// 特点2：reactive() 对象默认是深度监听，能监听到所有的子属性的变化
// 注意点：
// 💥 如果监听的属性值是基本类型数据，需要写成函数返回该属性的方式才能监听到
watch(
() => obj.cp,
val => {
console.log('小象找到CP了要发红包', val)
},
{ deep: true , immediate: true }
)
watchEffect的使用
- watchEffect会立即执行；
- 不需要手动传入所需要监听的数据；
- 接收的参数为一个回调函数；
- 只能获取新值，无法获取修改之前的值
<div id="app">
<input type="text" v-model="webName">
<p>{{ webName }}</p>
<input type="text" v-model="webUrl">
<p>{{ webUrl }}</p>
</div>
<script>
const app = Vue.createApp({
setup() {
const {reactive, watch, watchEffect, toRefs} = Vue;
let objData = reactive({webName:'自如初', webUrl:'https://www.ziruchu.com'});
// 监听数据
watchEffect(() => {
console.log(objData.webName,'--',objData.webUrl)
});
// 数据解构
let { webName, webUrl } = toRefs(objData);
return {webName, webUrl}
}
});
const vm = app.mount('#app');
</script>
停止监听
// 监听数据
let stop = watchEffect(() => {
console.log(objData.webName,'--',objData.webUrl)
setTimeout(()=>{
stop();
},3000);
});
点赞加关注，永远不迷路
