effect和watch 的区别详解

effect和watch 的区别详解

在vue3.x版本中，watch 和 effect 都能用来监听数据变化，那两者有什么区别呢？

watchEffect 立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。

watch 需要侦听特定的数据源，并在单独的回调函数中执行副作用。默认情况下，它也是惰性的——即回调仅在侦听源发生变化时被调用。

<script setup lang="ts">
import { reactive, ref, watch, effect, compute } from "vue";
const state = reactive({ count: 0 })
const doubleCount = compute(() => {
	return state.count++
})
/*
setTimeout(() => {
	state.count++
}, 1000)
*/
effect(() => {
	console.log('effect', doubleCount.count)
})

const wstate = reactive({ count: 1 })
const handleGetstate = () => {
	return wstate.count * 5
} 
handleGetstate()
watch(
  () => wstate.count,
  (newVal, oldVal) => {
    // 监听count，没有立即执行、深度监听获取不到count初始值，只能拿到变化后的值
    console.log('watch', wstate.count)
    console.log(`watch监听变化前的数据：${oldVal}`)
    console.log(`watch监听变化后的数据：${newVal}`)
  },
  // watch 惰性的 可以添加immediate 立即执行监听
  {
    immediate: true, // 立即执行
    deep: true // 深度监听
  }
)

</script>

参数不同：effect只需要传递一个回调函数，不需要传递侦听的数据，它会在页面加载时主动执行一次，来收集依赖；而watch至少要有两个参数（第三个参数是配置项），第一个参数是侦听的数据，第二个参数是回调函数

结果不同：effect获取不到更改前的值；而watch可以同时获取更改前和更改后的值