踩坑：Vue3 中的watch监视属性

一、问题一：reactive 定义的响应式数据无 oldValue

问题

• 监视 reactive 所定义的一个响应式数据，是无法正确获取到 oldValue 的
• 源码如下：

<script setup lang="ts">
import { ref, reactive, watch } from "vue";

const dataInfo = reactive(
  {
    'name': '法外狂徒张三',
    'age': 15
  }
)

watch(dataInfo, (newValue, oldValue) => {
  console.log(newValue, oldValue);
})

setTimeout(() => {
  dataInfo.age++;
  dataInfo.name += '!'
}, 5200);
</script>

• 运行结果如下
  
• 从运行结果可以看出，获取到的 newValue 和 oldValue 两者是一样的

分析

我们从 Vue3 官网可以了解到: newValue 此处和 oldValue 是相等的， 除非 state.someObject 被整个替换了

解决

开发中如果要用到 oldValue 的值，可以对象中的该值单独提出作为 ref 去包裹使用

二、问题二：watch默认开启了深度监视且无法关闭

问题

• 当我们想要监视一个多层级的数据时，Vue2 需开启深度监视，但Vue3会默认开启，当我们选择关闭深度监视时，时无法关闭的
• 源码如下：

<script setup lang="ts">
import { ref, reactive, watch } from "vue";

const dataInfo = reactive(
  {
    'name': '法外狂徒张三',
    'age': 15,
    'data':{
	    data1:1,
	    data2:2,
  }
)

watch(dataInfo, (newValue, oldValue) => {
  console.log(newValue, oldValue);
}，{deep:false})

setTimeout(() => {
  dataInfo.data.data1++;
  dataInfo.name += '!'
}, 5200);
</script>

分析

当我们想要监视一个多层级的数据时，Vue2 需开启深度监视，但Vue3会默认开启，当我们选择关闭深度监视时，时无法关闭的

解决

监视 reactive 定义响应式对象的向里一级，开启深度监听 deep:true 是有用的

<script setup lang="ts">
import { ref, reactive, watch } from "vue";

const dataInfo = reactive(
  {
    'name': '法外狂徒张三',
    'age': 15,
    'data':{
	    data1:1,
	    data2:2,
  }
)

watch(dataInfo.data, (newValue, oldValue) => {
  console.log(newValue, oldValue);
}，{deep:true})

setTimeout(() => {
  dataInfo.data.data1++;
  dataInfo.name += '!'
}, 5200);
</script>