Vue3 中的 watch 和 watchEffect 详解
在 vue 3 组件化开发中 中使用 watch , watchEffect 都需要import导入
import { watch, watchEffect } from 'vue'
watch
属性
- watch 具备一定的惰性
- 可以拿到原始值和当前值
- 可以侦听多个数据的变换,用一个侦听器承载
传参
- 第一个参数,需要传递一个需要监听的 function 、ref 、reactive object
- 第二个参数,用来接受数据原始值和当前值
- 第三个参数,传递 watch 的高级配置项 例如 immediate: true
一、监听基础类型
const count = ref(0)
watch(count, (newValue, oldValue) => {
console.log('watch' + newValue, oldValue)
})
二、监听复杂类型
在实际开发中,我们经常需要监听一个复杂的类型,具体写法如下
const boy = reactive({
name: '小小孩子们',
blog: 'www.xxhzm.cn',
friend: {
friend1 : '小明',
friend2 : '小红'
}
})
监听整个对象
watch(boy, (newValue, oldValue) => { console.log('boy发生了变化') console.log(newValue); console.log(newValue.friend); }) boy.name = 'Little children' boy.friend.friend3 = '小王'
第一个参数传入我们要监听的对象,当监听的对象里面的任意一个属性发生变化,watch 方法便会触发。
监听对象中的某个属性
// 如果我们直接写 boy.name watch(boy.name, (newValue, oldValue) => { console.log('boy发生了变化') console.log(newValue) }) // vue会提示我们,监听的对象需要是一个 function 或者 ref 或者是一个 reactive object // 正确的写法是: watch(() => boy.name, (newValue, oldValue) => { console.log('boy发生了变化') console.log(newValue) }) boy.name = 'Little children'
监听对象的所有属性
watch(() => boy, (newValue, oldValue) => { console.log('boy发生了变化') console.log(newValue) }, { immediate: true }) boy.name = 'Little children'
监听多个数据
watch 里面可以接收一个数组
无论数组里面的哪一个数据发生变化,都会执行侦听器
watch([()=> boy.name, count], ([newName, newCount], [oldName, oldCount]) => { console.log(newName + '---' + oldName) console.log(newCount + '---' + oldCount) }) boy.name = 'Little children'
watchEffect
属性
- 立即执行的,没有惰性
- 不需要传递要侦听的内容,会自动感知代码依赖,不需要传递很多参数,只需要一个回调函数
- 不能获取之前数据的值
一、监听基础类型
const count = ref(0)
watchEffect(() => {
console.log(count.value)
})
count.value ++
评论