如何在Vue3中使用watch监控一个对象的属性值

watch的基本用法

watch() 默认是懒侦听的，即仅在侦听源发生变化时才执行回调函数

第一个参数：侦听源，侦听源可以是一下几种

一个函数，返回一个值一个 ref一个响应式对象（reactive）或是由以上类型的值组成的数组
第二个参数：侦听源发生变化时要触发的回调函数。

(newValue, oldValue) => { /* code */}

当侦听多个来源时，回调函数接受两个数组，分别对应源数组中的新值和旧值

( [ newValue1, newValue2 ] , [ oldValue1 , oldValue2 ]) => {/* code */}

第三个参数：可选对象，可以支持一下这些选项

immediate：侦听器创建时立即触发回调deep：如果源是一个对象，会强制深度遍历，以便在深层级发生变化时触发回调函数flush：调整回调函数的刷新时机onTrack / onTrigger：调试侦听器的依赖

watch的监听示列

<script lang="ts" setup>
  // 接受父组件传递的数据
  const props = defineProps({
    test: {
      type: String,
      default: ''
    }
  })
   
  // 使用 watch 侦听 props 中的 test 属性
  watch(
    // 这种写法不会侦听到 props 中 test 的变化
    props.test,
    () => {
      console.log("侦听成功")
    }
  )
   
  watch(
    // 这种写法会侦听到 props 中 test 的变化
    () => props.test,
    () => {
      console.log("侦听成功")
    }
  )
</script>

盘点vue3的各种生命周期

Vue3怎么运用pinia状态管理工具

Vue3中文官网介绍

vue3语法如何利用mitt实现兄弟组件传值

vue3中axios如何封装拦截器配置请求

标签： vue3语法, vue懒侦听, watch监听属性值

上面是“如何在Vue3中使用watch监控一个对象的属性值”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_4813.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！