watch和watchEffect的异同

watch

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

使用方法

// 侦听一个 getter
const state = reactive({
    
     count: 0 })
watch(
  () => state.count,
  (count, prevCount) => {
    
    

  }
)

// 直接侦听ref
const count = ref(0)
watch(count, (count, prevCount) => {
    
    

})

//使用数组同时侦听多个源
const firstName = ref('')
const lastName = ref('')

watch([firstName, lastName], (newValues, prevValues) => {
    
    
  console.log(newValues, prevValues)
})

firstName.value = 'John'
lastName.value = 'Smith' 

watchEffect

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

使用方法

const count = ref(0)

watchEffect(() => {
    
    
console.log(count.value)
})
setTimeout(() => {
    
    
  count.value++
  // -> logs 1
}, 100)

watch和watchEffect的相同点

watch 与 watchEffect共享停止侦听，清除副作用 (相应地 onInvalidate 会作为回调的第三个参数传入)、副作用刷新时机和侦听器调试行为。

watch和watchEffect的区别

	执行时机	参数	结果
watch	惰性地执行副作用，它不会立即执行，但可以配置 immediate，使其主动触发	至少要有两个参数（第三个参数是配置项），第一个参数是侦听的数据，第二个参数是回调函数	可以同时获取更改前和更改后的值
watchEffect	立即执行，在页面加载时会主动执行一次，来收集依赖	只需要传递一个回调函数，不需要传递侦听的数据，它会在页面加载时主动执行一次，来收集依赖	获取不到更改前的值