vue3之watch监听

最新推荐文章于 2025-09-20 21:04:37 发布

原创最新推荐文章于 2025-09-20 21:04:37 发布 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #npm

前端同时被 2 个专栏收录

47 篇文章

订阅专栏

html

47 篇文章

订阅专栏

本文介绍了Vue3中watch监听的变化，强调了其与Vue2的不同。在Vue3中，watch可以更直接地在setup中使用，回调函数形式进行监听。不仅可以监听单个变量、数组或函数，还可以同时监听多个变量和对象属性。例如，文中展示了如何监听props和自定义对象属性，并给出了具体的代码示例。Vue3的watch支持同时设置多个监听器，增强了灵活性和便利性。

部署运行你感兴趣的模型镜像

vue3的监听跟vue2有点不一样.
引入watch后直接在setup里面使用, 调用方式是以回调函数的方式呈现.

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.监听对象属性

const checkTip: Ref<{name: string; password: string;}> = ref({
  name: "",
  password: "",
});
watch(() => {
	checkTip.name
},(newName, oldName) => {
  	console.log(newName);
});

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

您可能感兴趣的与本文相关的镜像