vue数组和对象进行 watch 和 watchEffect 对比-526互联

const arr1 = ref([]);
    const arr2 = reactive([]);
    const obj1 = ref({});
    const obj2 = reactive({});
    watchEffect(() => {
        console.log("watchEffect arr1", arr1.value);
        console.log("watchEffect arr2", arr2);
        console.log("watchEffect obj1", obj1.value);
        console.log("watchEffect obj2", obj2);
    });
    watch(
        arr1,
        (newValue, oldValue) => {
            console.log("watch arr1", newValue, oldValue);
        },
        {}
    );
    watch(
        arr2,
        (newValue, oldValue) => {
            console.log("watch arr2", newValue, oldValue);
        },
        {}
    );
    watch(
        obj1,
        (newValue, oldValue) => {
            console.log("watch obj1", newValue, oldValue);
        },
        {}
    );
    watch(
        obj2,
        (newValue, oldValue) => {
            console.log("watch obj2", newValue, oldValue);
        },
        {}
    );
    setTimeout(() => {
        arr1.value.push(111);
    }, 2000);
    setTimeout(() => {
        arr2.push(222);
    }, 2000);
    setTimeout(() => {
        obj1.value["aaa"] = 111;
    }, 2000);
    setTimeout(() => {
        obj2["bbb "] = 222;
    }, 2000);

以上写法，数组和对象修改，仅在 watch 的监听下, reactive定义的数组和对象可以被监听到改变

const arr1 = ref([]);
    const arr2 = reactive([]);
    const obj1 = ref({});
    const obj2 = reactive({});
    watchEffect(() => {
        // console.log("layerList1", layerList);
        // console.log("layerList2", layerList.value);
        // console.log("currentClickLayer111", currentClickLayer);
        console.log("watchEffect arr1", arr1.value);
        console.log("watchEffect arr2", arr2);
        console.log("watchEffect obj1", obj1.value);
        console.log("watchEffect obj2", obj2);
    });
    watch(
        arr1,
        (newValue, oldValue) => {
            console.log("watch arr1", newValue, oldValue);
        },
        { deep: true }
    );
    watch(
        arr2,
        (newValue, oldValue) => {
            console.log("watch arr2", newValue, oldValue);
        },
        { deep: true }
    );
    watch(
        obj1,
        (newValue, oldValue) => {
            console.log("watch obj1", newValue, oldValue);
        },
        { deep: true }
    );
    watch(
        obj2,
        (newValue, oldValue) => {
            console.log("watch obj2", newValue, oldValue);
        },
        { deep: true }
    );
    setTimeout(() => {
        arr1.value.push(111);
    }, 2000);
    setTimeout(() => {
        arr2.push(222);
    }, 2000);
    setTimeout(() => {
        obj1.value["aaa"] = 111;
    }, 2000);
    setTimeout(() => {
        obj2["bbb "] = 222;
    }, 2000);