Vue3【十三】watch监视

Vue3 中的watch祝你能监视以下四种数据

1. ref 定义的数据
2. reactive定义的数据
3. 函数返回一个值
4. 一个包含上述内容的数组

案例截图

目录结构

案例代码

Person.vue

<template>
    <div class="person">
        <!-- <h1>Watch情况1：监视【ref】定义的【基本类型】的数据</h1> -->
        <!-- <h2>当前求和：{{ sum }}</h2>
        <button @click="changeSum">累加+1</button> -->
        
        <!-- <h1>Watch情况2：监视【ref】定义的【对象类型】的数据</h1> -->
        <!-- <h1>Watch情况3：监视【reactive】定义的【对象类型】的数据</h1>
        <h2>名字：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <button @click="changeName">改名字</button>
        <button @click="changeAge">改年龄</button>
        <button @click="changePerson">改人</button> -->

        <!-- <h1>Watch情况4：监视返回值函数 的数据</h1> -->
        <h1>Watch情况5：监视上述多个数据</h1>
        <h2>名字：{{ person.name }}</h2>
        <h2>年龄：{{ person.age }}</h2>
        <h2>汽车：{{ person.car.car1 }}、{{ person.car.car2 }}</h2>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
        <button @click="changeCar1">修改第一辆车</button>
        <button @click="changeCar2">修改第二辆车</button>
        <button @click="changeCar">修改整个车</button>


    </div>
</template>

<script lang="ts" setup>
import { ref, reactive ,watch } from 'vue';
// Vue3 中的watch祝你能监视一下四种数据
// 1. ref 定义的数据
// 2. reactive定义的数据
// 3. 函数返回一个值
// 4. 一个包含上述内容的数组

// 1. ref 定义的数据 --------------------------------
// const sum = ref(0);

// 方法
// function changeSum(){
//     sum.value++;
// }

// 监视 和 停止监视
// const stopWatch =  watch(sum, (newValue, oldValue) => {
//     console.log('sum变了', newValue, oldValue);
//     // 停止监视
//     if(newValue > 10){
//         stopWatch();
//     }
// })

// 2. ref 定义的对象类型数据 ----------------------------
// 数据
// const person = ref({
//     name: '吕洞宾',
//     age: 18000
// })

// 方法
// function changeName(){
//     person.value.name = '何仙姑';
// }
// function changeAge(){
//     person.value.age++;
// }
// function changePerson(){
//     person.value = {
//         name: '铁拐李',
//         age: 19000
//     }
// }

// 监视 情况一: 监视【ref】定义的【对象类型】的数据，监视的是对象的地址值
// watch(person, (newValue, oldValue) => {
//     console.log('person变了', newValue, oldValue);
// })

// 若要监视对象内部的数据，需要使用深度监视
// watch(person, (newValue, oldValue) => {
//     console.log('person变了', newValue, oldValue);
// }, {deep: true})

// 监视 情况二: 监视【ref】定义的【对象类型】的数据，监视的是对象的地址值
// 立刻监视 watch的第一个参数是被监视的数据，第二个参数是监视回调函数，第三个参数是配置对象(deep,immediate等等)
// watch(person, (newValue, oldValue) => {
//     console.log('person变了', newValue, oldValue);
// },{deep:true,immediate: true})
// 若修改的是ref定义的对象中的属性，因为newValue和oldValue是同一个对象
// 若修改整个ref定义的对象，newValue是新值，newValue和oldValue是两个不同的对象

// 监视 情况三: 监视【active】定义的【对象类型】的数据，且默认开启了深度监视 ----------------
// const person = reactive({
//     name: '吕洞宾',
//     age: 18000
// })
// // 方法
// function changeName(){
//     person.name = '何仙姑';
// }
// function changeAge(){
//     person.age++;
// }
// function changePerson(){
//     // 批量修改对象属性，对象还是原来对象
//     Object.assign( person , {
//         name: '铁拐李',
//         age: 19000
//     })
// }
// // 监视
// watch(person, (newValue, oldValue) => {
//     console.log('person变了', newValue, oldValue);
// })


// 4. 函数返回值 -------------------------------------------------------------------------
let person = reactive({
    name: '吕洞宾',
    age: 18000,
    car: {
        car1: '奔驰',
        car2: '宝马'
    }
})
function changeName(){
    person.name += '何仙姑';
} 
function changeAge(){
    person.age++;
}
function changeCar1(){
    person.car.car1 = '仙鹤';
}  
function changeCar2(){
    person.car.car2 = '毛驴';
}
function changeCar(){
    person.car = {
        car1: '艾玛',
        car2: '雅马哈'
    }
}
// 监视 响应式对象中的某个属性，且该对象是基本类型的，需要写成函数式
// watch(() => person.name,(newValue, oldValue) => {
//         console.log('name变了', newValue, oldValue);
//     }
// )
// 监视 响应式对象中的某个属性，且该对象是对象类型的，可以直接写、也能写函数式 更推荐写函数
// 想要监视细节，需要手动开启深度监视
// watch(()=>person.car,(newValue, oldValue) => {
//         console.log('car变了', newValue, oldValue);
//     },{deep: true}
// )

// 5.数组 监视多个数据---------------------------------------------------------------------------------
watch([()=>person.car.car1,()=>person.age],(newValue, oldValue) => {
        console.log('car1或年龄变了', newValue, oldValue);
    },{deep: true}
)

</script>

<style scoped>
.person {
    background-color: #ff9e4f;
    box-shadow: 0 0 10px;
    border-radius: 30px;
    padding: 30px;
}

button {
    margin: 0 10px;
    padding: 0 5px;
    box-shadow: 0 0 5px;
    ;
}
</style>