Vue3之watch的最简用法

watch用法

• 参数一：要监测的值或值数组。（也可直接放入对象，不建议）
• 参数二：回调函数。接收两个参数，newValue和oldValue。
• 参数三：配置项对象。immediate、deep…

1、监测一个ref数据。

let sum = ref(0);
watch(sum, (newVal, oldVal) => {
     console.log('sum的值被改变了', oldVal + '==>' + newVal);
});

2、监测多个ref数据

let sum = ref(0),
	msg = ref('Hello World');
watch([sum, msg], (newVal, oldVal) => {
    if (oldVal[0] !== newVal[0])
        console.log('sum的值被改变了', oldVal[0] + '==>' + newVal[0]);
    if (oldVal[1] !== newVal[1])
        console.log('msg的值被改变了', oldVal[1] + '==>' + newVal[1]);
}, {
    immediate: true
});

3、监测reactive数据的多个属性

重点：使用Object.values()方法提取所有属性值并返回数组。

let person = reactive({
    name: '张三',
    age: 18,
    job: {
         plus: {
              	salary: 20
          }
    }
});
watch(() => Object.values(person), (newVal, oldVal) => {
      console.log('pseron对象发生改变', newVal, oldVal);
}, {
      deep: true,   // 这里如果不开启深度监视将监测不到salary属性
});

4、监测reactive数据的单个属性

let person = reactive({
    name: '张三',
    age: 18,
    job: {
         plus: {
              	salary: 20
          }
    }
});
watch(() => person.name, (newVal, oldVal) => {
      console.log('pseron对象发生改变', newVal, oldVal);
});

5、使用递归监测数据

function iter(obj) {
     Object.keys(obj).forEach(item => {
         if(obj[item] instanceof Object){
              iter(obj[item])
              return;
    }
    watch(() => obj[item], (newVal, oldVal) => {
            console.log(`pseron对象的${item}属性值发生变化`, newVal, oldVal);
   	 	})
    })
}
let person = reactive({
    name: '张三',
    age: 18,
    job: {
         plus: {
              	salary: 20
          }
    }
});
iter(person);

要是觉得非常有用的话，给孩子点个赞吧┭┮﹏┭┮