vue3中如何使用侦听器

原创于 2022-09-23 16:07:38 发布 · 391 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #vue.js

本文详细介绍了如何在 Vue3 中导入并使用 watch 侦听器进行深度监听。通过示例展示了如何设置 deep 参数来监听对象属性的变化，并在值变化时触发回调函数，从而实现对组件状态的精确控制。

使用vue3语法糖，页面导入whtch侦听器

import { watch} from "vue"; //watch   侦听器实例

页面中使用：

watch(
  obj, //要侦听的参数 
(newValue, oldValue) => {
     //newValue   变动之前的值
     //oldValue   变动之后的值
    console.log(newValue, oldValue, "由" + oldValue + "变为" + newValue);
  },
  {
    deep: true, // 深度侦听的参数，开启深侦听
  }
);