-
两者都可监听 data 属性变化
-
watch 既要指明监视的属性,也要指明监视的回调。 默认是惰性执行,监听源可以是一个具有返回值的 getter 函数,也可以直接是一个 ref
-
watchEffect 不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性。会根据其中的属性,自动监听其变化。
-
watchEffect有点像computed:
- 但computed注重的计算出来的值(回调函数的返回值),所以必须要写返回值。
- 而watchEffect更注重的是过程(回调函数的函数体),所以不用写返回值。
<script>
import { reactive, toRefs, ref, watch, watchEffect } from 'vue'
export default {
setup() {
const numberRef = ref(10)
const state = reactive({
name: '张三',
age: 20,
})
watchEffect(() => {
// 初始化时,一定会执行一次(收集需要监听的数据)
console.log('watchEffect', state.age)
})
watchEffect(() => {
console.log('watchEffect', numberRef)
})
// watch监听ref属性
watch(numberRef, (newNum, oldNum) => {
console.log('ref watch', newNum, oldNum)
})
// watch监听state属性
watch(
// 1.确定监听哪个属性
() => state.age,
// 2.回调函数
(newState, oldState) => {
console.log('state watch', newState, oldState)
},
// 3.配置项
{
immediate: true, // 初始化之前就监听
// deep: true // 深度监听
}
)
setTimeout(() => {
numberRef.value = 100
}, 1000)
setTimeout(() => {
state.age = 25
}, 1500)
return { numberRef, ...toRefs(state) }
},
}
</script>