Vue3-14 watch监视对象及对象属性，watchEffect

文章目录

• [watch 监听](#watch 监听)
• • [监视 reactive](#监视 reactive)
  • 监视对象属性
  • 监视数组
• watchEffect

watch 监听

监视 reactive

reactive 的一个弊端：

不能整体修改数据

左边ref相当于替换了整个人；

右边reactive相当于人没换，只是换了属性。

监视reactive对象，默认是开启深度监视的，是不能关闭的。

监听对象前后的值为什么是相同的？

他们修改的是属性，对象的地址值是没变的，等到打印的时候，拿到的就是最新的数据了。

监视对象属性

watch 监听对象的话， 监听的是对象的地址值的变化，不是对象某个属性的变化。

监视数组

watchEffect

watch 必须明确指出我监视什么

watchEffect 一上来就会监视，相当于watch 加了个立即执行。

会自动分析需要监视哪些数据的。

watchEffect 是回调一个函数：

const stopWatch = watchEffect(()=>{

})

// 用watchEffect实现，不用
const stopWtach = watchEffect(()=>{
  // 室温达到50℃，或水位达到20cm，立刻联系服务器
  if(temp.value >= 50 || height.value >= 20){
    console.log(document.getElementById('demo')?.innerText)
    console.log('联系服务器')
  }
  // 水温达到100，或水位达到50，取消监视
  if(temp.value === 100 || height.value === 50){
    console.log('清理了')
    stopWtach()
  }
})