Vue3.0 —— watch函数

原创已于 2022-08-09 23:16:07 修改 · 689 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2022-07-02 17:24:23 首次发布

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文详细介绍了Vue中如何使用watch监听不同类型的变量变化，包括基本的数据监听、对象深度监听、多个数据监听及特定对象属性监听的方法。

1、监听 ref 数据

watch ( 要监听的目标，改变后触发的回调 )

 watch(count, (newValue, oldVlaue) => {
      console.log( newValue, oldVlaue);
 });

2、监听通过 reactive 定义的对象数据,以及需要深度监听的情况

 
setup(){
    const obj = reactive({
      name: "ss",
      age: 54,
      brand: { 
        id: 1,
        name: "哈哈",
      },
    });

    //
    const update = () => {
      (obj.name = "sdd"), (obj.age = 44);
    };

    const updateBrandName = () => {
      obj.brand.name = "哇嘎嘎";
    };

    
    watch(obj,
        () => {
            console.log("数据改变了");
        },
        {
            // 深度监听
            deep: true,
            // 默认执行监听
            immediate: true,
        })
}

3、监听多个数据的变化（使用数组）

watch([count, obj], () => {
      console.log("监听多个数据");
});

4、只监听对象中某一个属性的变化例obj.name

 watch(
    // 第一个参数为函数写法，返回该属性（固定写法）
      () => obj.name,
      () => {
        console.log("监听obj.name的变化");
      }
);