前言

今天简单聊下两种监听怎么选择，两者的区别可以简单的看下这篇：juejin.cn/post/727627…

需要新旧值：就选择watch

对象的深度监听：

import { reactive, watch } from "vue";

const obj = reactive({

name: "xxx",

age: 11,

});

watch(

() => obj,

(neVal) => {

console.log(neVal, 444888888888);

},

{ deep: true }

);

setTimeout(() => {

obj.name = "22222";

}, 1000);

const name = ref("ddd");

watch(

() => name.value,

(a, b) => {

console.log(a, b);

}

);

  


setTimeout(() => {

name.value = "133333";

}, 1000);

不需要新旧值：就选择watchEffect

const obj = reactive({

name: "xxx",

age: 11,

});

  


watchEffect(() => {

if (obj.name) {

console.log(obj.name, 9000000);

}

});

  


watchEffect(() => {

if (obj) {

console.log(obj.name, 911000000);

}

});

watchEffect立即执行监听、自动进行深度监听