vue3之watch监听
Posted 放飞的回忆
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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监听的主要内容,如果未能解决你的问题,请参考以下文章