VUE框架Vue3下使用watch监听reactive下的数据变化并使深度监视起效------VUE框架

<template>
    <h1>{{ data.counter }}</h1>
    <button @click="data.counter++">按一下加一</button>
    <h1>{{ data.a.b.c.d.counter1 }}</h1>
    <button @click="data.a.b.c.d.counter1++">按一下加一</button>
</template>

<script>
import { reactive,watch } from 'vue'
export default {
    name : "App",
    setup(){
        let data = reactive({
            counter : 1,
            a : {
                b : {
                    c : {
                        d: {
                            counter1 : 100
                        }
                    }
                }
            }
        });
        // 对于reactive监视的属性来说,默认就是开启深度监视的
        // 如果需要针对对象的某属性,那就只指定这个属性即可
        watch(data,(newValue,oldValue) => {
            // 对于reactive来说,新的可以获取,老的获取不了
            console.log("我是新的"+newValue+"我是旧的"+oldValue);
            // newValue可以获取,但是old获取不了
        },{immediate:true});

        // 如果我们只需要侦听一个属性,我们就写一个函数,只侦听那一个属性即可
        // 因为我们最后获取的是一个基本数据类型的值,所以不能直接指向它,必须是以函数的形式返回
        // 除非那个是一个响应式的对象
        watch(()=>{return data.counter},(newValue,oldValue) => {
            console.log("我是新的"+newValue+"我是旧的"+oldValue);
        },{immediate:true});
        watch(()=>data.a.b.c.d.counter1,(newValue,oldValue)=>{
            console.log("我是新的"+newValue+"我是旧的"+oldValue);
        },{immediate:true});
        // 监听数组的方式
        watch([()=>data.counter,()=>data.a.b.c.d.counter1],(newValue,oldValue)=>{
            console.log("我是新的"+newValue+"我是旧的"+oldValue);
        },{immediate:true});
        // 这个还是oldValue获取不了,但是可以使用深度监视效果了
        watch(()=>data.a.b,(newValue,oldValue)=>{
            console.log("我是新的"+newValue+"我是旧的"+oldValue+"哈哈哈哈");
        },{immediate:true,deep:true});
        return {data};
    } 
}
</script>

<style>

</style>

<template>

? ? <h1>{{ data.counter }}</h1>

? ? <button @click="data.counter++">按一下加一</button>

? ? <h1>{{ data.a.b.c.d.counter1 }}</h1>

? ? <button @click="data.a.b.c.d.counter1++">按一下加一</button>

</template>

<script>

import { reactive,watch } from 'vue'

export default {

? ? name : "App",

? ? setup(){

? ? ? ? let data = reactive({

? ? ? ? ? ? counter : 1,

? ? ? ? ? ? a : {

? ? ? ? ? ? ? ? b : {

? ? ? ? ? ? ? ? ? ? c : {

? ? ? ? ? ? ? ? ? ? ? ? d: {

? ? ? ? ? ? ? ? ? ? ? ? ? ? counter1 : 100

? ? ? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? ? }

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? });

? ? ? ? // 对于reactive监视的属性来说,默认就是开启深度监视的

? ? ? ? // 如果需要针对对象的某属性,那就只指定这个属性即可

? ? ? ? watch(data,(newValue,oldValue) => {

? ? ? ? ? ? // 对于reactive来说,新的可以获取,老的获取不了

? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue);

? ? ? ? ? ? // newValue可以获取,但是old获取不了

? ? ? ? },{immediate:true});

? ? ? ? // 如果我们只需要侦听一个属性,我们就写一个函数,只侦听那一个属性即可

? ? ? ? // 因为我们最后获取的是一个基本数据类型的值,所以不能直接指向它,必须是以函数的形式返回

? ? ? ? // 除非那个是一个响应式的对象

? ? ? ? watch(()=>{return data.counter},(newValue,oldValue) => {

? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue);

? ? ? ? },{immediate:true});

? ? ? ? watch(()=>data.a.b.c.d.counter1,(newValue,oldValue)=>{

? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue);

? ? ? ? },{immediate:true});

? ? ? ? // 监听数组的方式

? ? ? ? watch([()=>data.counter,()=>data.a.b.c.d.counter1],(newValue,oldValue)=>{

? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue);

? ? ? ? },{immediate:true});

? ? ? ? // 这个还是oldValue获取不了,但是可以使用深度监视效果了

? ? ? ? watch(()=>data.a.b,(newValue,oldValue)=>{

? ? ? ? ? ? console.log("我是新的"+newValue+"我是旧的"+oldValue+"哈哈哈哈");

? ? ? ? },{immediate:true,deep:true});

? ? ? ? return {data};

? ? }

}

</script>

<style>

</style>

import mitt from 'mitt';
// 这个会创建一个对象emitter
// 把它当作全局事件总线对象即可
export default mitt();

import mitt from 'mitt';

// 这个会创建一个对象emitter

// 把它当作全局事件总线对象即可

export default mitt();