vue3中watch函數

vue2和vue3項目管理模板：
https://github.com/BaiFangZi/vue3-antd-manage
https://github.com/BaiFangZi/vue-antd-manage

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改變了");
});