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.

• « 上一篇：vue3.0中使用nextTick
• » 下一篇：vscode设置C++代码格式化（Clang-Format）