watch与watchEffect的区别，分析vue3 watchEffect

watch的话应该大家都比较熟了
在vue2中就是一个典型的监听属性
那么 在vue3项目中我们先来看看它的用法
基础用法

//声明一个变量作为监听对象
const data = ref(23);
//给data设置一个监听属性   当改变时触发方法  打印出新的value 和 以前的value
watch(data, (val, bval) =>{
    console.log(val,bval);
})
//1.5秒后修改data的值  用于触发监听事件
setTimeout(()=>{
  data.value = 66
}, 1500)
//返回响应式数据
return {
   data
}

成功打印出了之前的值和修改后的值
那如果是个引入变量呢

//声明一个监听对象
const datas = reactive({
  map:{
    name:100
  }
})
//监听datas中的map属性   下面的deep设置表示开启深度监听   一般对象数组就要这样设置
watch(
() => datas.map,
  (val, bval) =>{
    console.log(val,bval);
  },{
    deep: true
  }
)
//1.5秒后修改datas中map中的name
setTimeout(()=>{
   datas.map.name = 300
}, 1500)
 return {
    datas
 }

返回响应式数据

也算是监听到了 但显然修改前和修改后的值都变成了修改后的
其实我觉得watch一直存在监听复杂结构数据不准确的问题
那么我们再来看看watchEffect

//设置一个用于监听的变量
const datas = reactive({
  map:{
    name:100
  }
})
//设置监听watchEffect
watchEffect(()=>{
   console.log(datas.map.name);
})
//1.5秒后修改datas中的map中的name
setTimeout(()=>{
  datas.map.name = 300
}, 1500)
//返回响应式变量
return {
  datas
}

其实每次修改时都会触发 但只会看到修改后的值
不过好处在于 你不需要特意声明要监听的属性
在页面初始化时watchEffect的回调就会执行一次 只要在它回调中有用到的属性都会被监听 个人觉得就比watch灵活很多了 所以总结如下