watch 与watchEffect的区别

watch

watch用来监听特定的数据源，并在回调函数中执行。

watch(source,callback,options)

source:用于指定监听的依赖对象，可以是表达式。
callback:依赖对象变换后执行的回调函数，带有两个参数：newVal,oldVal。如果是监听多个数据没个参数可以是数组[newVal1,newVal2,...newValN],[oldVal1,oldVal2,...oldValN]
options:可选参数，用于配置watch的类型（immediate,deep） watch在vue3.0项目中是我具体用法：

//首先无论你是用ref定义的对象还是reactive定义的对象，要监听对象中的属性值变化，使用下面的方法
const data = ref({pageNum:1})
const add = ()=>{
  data.value.pageNum++
}
add()
watch(() => data.value.pageNum, (val, oldVal) => {
   if (val !== oldVal) {
     data.value.pageNum = val
     //当页码不一样调取接口
    }
})

//如果监听的是ref定义的简单数据类型，则watch的第一个参数直接是你要监听的那个变量：
var count = ref(0)
watch(count, (val, oldVal) => {
   if (val !== oldVal) {
     data.value.pageNum = val
     //当页码不一样调取接口
    }
})

//监听props的传参
watch(()=>props.content,(val,oldVal)=>{
    if(val!==oldVal){
    //做你要做的操作
    }
})

可能有人会觉得直接每次监听，都需要写一遍watch函数，很麻烦。那vue3.0也提供了多个数据的监听

watch([()=>data.value.pageNum,count],([curPage,oldPage],[curCount,oldCount])=>{
  //在这里做监听变化后的事情就ok了
})

当然，如果你想一开始就在回调函数中做一些动作那就在第三个参数中使用immediate: true。

如果你监听的是复杂的数据类型，那就可以用deep:true对数据施行深度监听。

watchEffect

在讲watchEffect之前，我们先看看在项目中我们怎么去用它？

const childOne = ref(null)
watchEffect(()=>{
        console.log('打印',childOne.value)
    },{
        flush:'post'
  })

这里我加了flush这个属性，这个属性，你从打印的日志就可以知道了，如果不加的话，就会打印模版还未挂在的值，加了flush一定是挂在完毕才会打印

stop

停止监听，看到这里是不是觉得，写vue2.0的时候，有时候想停止监听却无计可施，只能眼巴巴的等到组件被销毁的时候才能停止。是不是很气呢？这不vue3.0就给你提供了stop函数来停止监听。

那如何停止监听呢，比较简单就是再调一次你的watch()监听函数的返回值。如下：

const stop=watch(count, (val, oldVal) => {
   if (val !== oldVal) {
     data.value.pageNum = val
     //当页码不一样调取接口
    }
})
//然后在某个函数中调用stop()函数，监听就停止了

整篇文章的题目是：watch 与watchEffect的区别，还是要点一下题的，哈哈

first：watchEffect不需要指定监听的属性，自动收集依赖；watch需要指定监听的属性

second:watchEffect拿不到旧值；watch可以拿到旧值

third:watchEffect在组件第一次就会收集依赖，然后收集到的依赖发生了变化，回调才会再次执行；watch就不是了。一开始就指定了依赖。

好啦！大概就讲到这里啦，希望能对大家有所帮助！动动小指头，点赞or关注我哦！我们一起前进啦！

嘻嘻～～下篇再见啦