vue3之watch监听

1.先引入watch

import { ref, defineComponent, watch } from "vue";

2.在setup里面引用

/*监听props*/
watch(props,(newProps, oldProps) => {
    showModal.value = newProps.isOpened;
    editData.value = newProps.editData as IAdminUser;
});

watch有2个参数, 第一个参数是监听的数据对象, 可以是单个变量、数组、函数;
第二个参数是数据改变时的回调函数, 有2个参数, 第一个是改变后的数据, 第二个是改变前的数据;

3.监听多个变量

const checkTip: Ref<{name: string; password: string;}> = ref({
  name: "",
  password: "",
});
watch([props, checkTip],([newProps, newCheckTip], [oldProps, oldCheckTip]) => {
  console.log(newProps, newCheckTip);
});

4.监听对象属性

watch(
() = > props.name,
(newName, oldName) = > {
  console.log(newName);
},
{deep: true}
);

在vue2中watch只有一个, 而在vue3中可以存在多个watch.


原文链接:https://blog.csdn.net/weixin_39720860/article/details/114005689

vue3之watch监听

上一篇:移动端适配 rem 设置


下一篇:mybatis foreach list特殊处理