vue3+ts，watch函数监听props数据的使用,以及对immediate和deep属性的作用解释记录

---

前言

在开发过程中遇到这样的需求：子组件接收父组件传过来的数据，如果父组件数据发生变化，子组件也要随之变化。这时我们就要用到vue提供的watch函数监听数据发生变化。

提示：以下是本篇文章正文内容，下面案例可供参考

一、实现步骤

1.在父组件中通过es6语法的冒号“：”给子组件传递数据

代码如下（示例）：

<div v-if="stepActive === 1" class="steps-pane">
 <customs-info ref="customsInfoRef" :dec-inner-data="DecInnerdata"/>
</div>

如上代码片段，通过冒号给CustomsInfo子组件传递了一个名为dec-inner-data的参数。

2.在子组件接收参数

代码如下（示例）：

const props = defineProps({
  decInnerData: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

首先在子组件通过定义props接收父组件传来的decInnerData数据，该数据是一个对象类型的数据，也就是引用数据类型。

3.在子组件通过watch函数监听值的变化情况

代码如下（示例）：

watch(
  () => props.decInnerData,
  (newVal) => {
    if (newVal,oldVal) {
      //这里是数据更新变化后需要执行的动作
      console.log("新数据：",newVal)
      console.log("旧数据：",oldVal)
    }
  },
  { immediate: true, deep: true }
)

大家在刚开始用的时候，可能会不注意遗漏掉watch后面的括号，这个写法是不对的，不会得到响应，在vue3源码中是通过一个getter()函数来获取值变化的，所以括号遗漏掉就不能获取变化值，具体的大家可以去研究一下vue3watch函数实现的源代码。也就是以下的错误示例不会监听得到变化值。
错误代码示例如下：

//不会获得数据变化响应的情况
watch(
  props.decInnerData,
  (newVal) => {
    if (newVal,oldVal) {
      //这里是数据更新变化后需要执行的动作
      console.log("新数据：",newVal)
      console.log("旧数据：",oldVal)
    }
  },
  { immediate: true, deep: true }
)

4.{ immediate: true, deep: true }的作用解释

1.首先我们要知道watch()函数有一个特点，就是在最初绑定数据的时候并不会执行，而是在传递过来的数据发生变化的时候才会执行。如果我们的需求是需要在初始化绑定数据的时候就执行，就可以将watch函数的immediate属性值设为true,反之设为false。

2.watch函数还有一个属性deep,默认值是fasle，意思是是否进行深度监听。进行深度监听的话，监听器会一层层的往下遍历，给数据的所有属性都加上这个监听器，但是这样性能开销就会非常大，性能会降低。

假设上面的decInnerData数据有一个info属性，
①如果deep为false，那么info变化时候，监听decInnerData数据会监听不到变化。
②如果deep为true，那么info变化时候，监听decInnerData数据可以监听到变化。
③如果deep为false，immediate为true，那么info变化时候，监听decInnerData，可以监听到一次，后续的变化监听不到。

---

总结

以上介绍了watch()函数的语法和使用场景，以及对{ immediate: true, deep: true }进行一些解释记录，后面忘记可以回来参考、学习。