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

2024-01-10 14:56:56


前言

在开发过程中遇到这样的需求:子组件接收父组件传过来的数据,如果父组件数据发生变化,子组件也要随之变化。这时我们就要用到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 }进行一些解释记录,后面忘记可以回来参考、学习。

文章来源:https://blog.csdn.net/weixin_46689373/article/details/135449946
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。