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

Sapphire～2026-01-25 11:43

文章目录

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

watch 监听

监视 reactive

reactive 的一个弊端：

不能整体修改数据

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

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

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

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

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

监视对象属性

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

监视数组

watchEffect

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

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

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

watchEffect 是回调一个函数：

js 复制代码

const stopWatch = watchEffect(()=>{

})

js 复制代码

// 用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()
  }
})