watchEffect 和 watch 的区别

1.watch侦听器

对基本数据类型进行监听----- watch特性： 1.具有一定的惰性lazy 第一次页面展示的时候不会执行，只有数据变化的时候才会执行 2.参数可以拿到当前值和原始值 3.可以侦听多个数据的变化，用一个侦听器承载 4.如果监听rective对象中的属性,必须通过函数来指定,如果监听多个数据,需要使用数组来指定。

watch (
  prop,             //如果监听的是一个对象，第一个参数传入回调  ()=>{obj.prop} 
  (newValue, oldValue) => {
      console.log(newValue, oldValue);
  },{
    immediate:true, //默认初始时不执行回调，通过配置immediate未true，来指定初始时立即执行
    deep:true       //通过配置deep为true，来指定深度监听。
  })监听新旧属性

侦听器还可以使用数组以同时侦听多个源：

watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
  /* ... */
}

2.watchEffect

1.立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。 2.立即执行，没有惰性，页面的首次加载就会执行。 3.不需要传递要侦听的内容,只要传递一个回调函数 4.不能获取之前数据的值 只能获取当前值 5.一些异步的操作放在这里会更加合适

const count = ref(0)
watchEffect( () => {
  console.log(count.value)
  },
  {
   flush:'post' //添加flush:'post'会在onBeforeUpdate之后执行 没有会在之前
  }
})

3.watch和watchEffect停止监听

1.watch 与 watchEffect 在手动停止侦听、清除副作用 (将 onInvalidate 作为第三个参数传递给回调)、刷新时机和调试方面有相同的行为。 2.将watch/watchEffect 赋值给一个变量，调用这个变量，函数执行就会停止监听，一般在组件销毁时执行。

var stop =  watchEffect(async (onInvalidate)=>{
       var a = states.value
       console.log('watchEffect')
       onInvalidate(()=>{ //没有stop先执行回调 在执行副作用
           console.log("onInvalidate") //有stop 执行会停在这里 副作用不在执行
       })
})

setTimeout(()=>{
  stop()
},2000)