废话不多说,先看两者代码:
<template><div><h1>watchs</h1><div>{{ countRef }} - {{ name }} - {{ age }}</div></div>
</template><script>
import { ref, watch } from 'vue'
export default {setup() {const countRef = ref(0);const state = reactive({age: 20,name: 'zhangsan'})// watchwatch(countRef, (newVal, oldVal) => {console.log(newVal, oldVal)}, {immediate: true // 立即执行})watch(() => state.count, (newVal, oldVal) => {console.log(newVal, oldVal)}, {immediate: true, // 立即执行deep: true // 深度监听})// watchEffectwatchEffect(() => {// 初始化时,一定会执行一次(收集要监听的数据),自动收集需要监听的数据console.log(state.name)})watchEffect(() => {console.log(state.age)})watchEffect(() => {console.log(state.name)console.log(state.age)})setTimeout(() => {state.name = 'lisi';}, 1500);setTimeout(() => {state.age = 22;}, 1500);setTimeout(() => {state.name = 'lisi';state.age = 22;}, 1500);return {countRef,...toRefs(state)}}
}
</script><style lang="scss" scoped></style>
从上面的打印结果可以看出来,两者的异同:
- 两者都可以监听data变化
- watch需要明确监听哪个属性
- watchEffect会根据其中的属性,自动监听其变化
可以看出watchEffect会灵活很多。