<template>
<div class="home">
<button @click="a++">{{ a }}</button>
<br />
<button @click="b++">{{ b }}</button>
</div>
</template>
<script>
import { ref, reactive, readonly, toRefs, computed, watch } from "vue";
export default {
setup() {
let a = ref(0);
let b = ref(0);
//如果watch方法中不傳任何參數，代碼體中也不使用任何響應式變量，則它的代碼只會執行一次，就是初始化時執行。
//沒有在參數中傳入變量的watch中的代碼至少會執行一次，在初始化的時候執行
// watch(()=>{
// console.log('------');
// });
//如果watch中使用了任何的響應式變量的值，那么每次任意變量有變化的時候都會執行一次代碼
// watch(()=>{
// console.log(a.value+'------');
// });
//將a作為參數傳入watch則表示對a進行監聽，那么a變化的時候就會執行一次watch中的代碼
//有監聽的變量的watch默認不會初始化執行一次
// watch(a,()=>{
// console.log('--------');
// console.log(a.value);
// });
//如果傳入傳入{immediate:true}則會始終默認先以a的初值執行一次watch回調函數中的代碼
// watch(a,()=>{
// console.log('--------');
// console.log(a.value);
// },{immediate:true});
//可以在回調函數中傳入參數獲取變量變化前和變化后的值
// watch(a, (newValue, oldValue) => {
// console.log(oldValue);
// console.log(newValue);
// });
//監聽多個變量的寫法
watch([a,b], ([newa,olda], [newb,oldb]) => {
console.log(olda);
console.log(newa);
console.log(oldb);
console.log(newb);
});
//注意：如果上面的a或者b是對象（reactive聲明的）的話，也可以監控到對象的變化，但是在回調函數中的新舊對象中訪問不到
//對象中的成員，如果希望能拿到對象中的成員最好是監控的時候不是傳入整個響應對象而是對象中的某個屬性即可。
return { a, b };
},
};
</script>