vue3中watch函数

watch

监听普通类型

 let count = ref(1);
 const changeCount = () => {
	 count.value+=1
 };

watch(count, (newValue, oldValue) => { //直接监听
	console.log("count改变了");
});

监听响应式对象

 let book = reactive({
     name: "js编程",
     price: 50,
 });
 const changeBookName = () => {
 	book.name = "c#";
 };
 watch(()=>book.name,()=>{//通过一个函数返回要监听的属性
 	console.log('书名改变了')
 })

监听多个参数执行不同的方法

不过以上只是一些简单的例子，对于vue2中，watch可以监听多个源，并且执行不同的函数

在vue3中同理也能实现相同的情景，通过多个watch来实现，但在vue2中，只能存在一个watch

watch(count, () => {
	console.log("count改变了");
});
watch(
    () => book.name,
    () => {
        console.log("书名改变了");
    }
);

监听多个参数执行相同的方法

在vue2中可能存在需要执行同一事件的情况，解决方法通常是利用computed把他们存入一个对象中，监听这个对象的变化

对于vue3，可以免去computed的操作

watch([() => book.name, count], ([name, count], [preName, preCount]) => {
	console.log("count或book.name改变了");
});