watch和watchEffect的区别

废话不多说，先看两者代码：

<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会灵活很多。