Summary of how to use vue3 watch monitoring function

watch introduction

 The watch in Vue is used to monitor the responsive changes of the data. Get the values ​​before and after the data changes

 The watch listener can listen to a getter function, and the getter should return a responsive object

When the object is updated, the corresponding callback function will be executed

// watch的完整入参

watch(监听的数据，副作用函数，配置对象)
watch(data, (newVal, oldVal) => {}, {immediate: true, deep: true})

Different scenarios of watch monitoring

import { ref, watch, reactive } from "vue";

// 创建响应式数据
let name = ref("小红");
let age = ref(18);
let state = reactive({
  sex: "女",
  city: {
    hainan: {
      haikoushi: "海口市",
    },
  },
});

Listen to a single refill data

watch(name, (newName, oldName) => {
  console.log("newName", newName);
});

Listen to multiple refill data, and any responsive object update will execute the callback function

 Method 1: vue3 allows multiple watch listeners to exist

watch(name, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});

watch(age, (newValue, oldValue) => {
  console.log("new", newValue, "old", oldValue);
});

 Method 2: Add the data to be monitored to the array

//第一种写法
watch([name, age], (newValue, oldValue) => {
  // 返回的数据是数组
  console.log("new", newValue, "old", oldValue); 
  //[newName, newAge] [oldName, oldAge]
});

//还有第二种写法
watch([name, age], ([newName, newAge], [oldName, oldAge]) => { 
})

Monitor proxy data

 Listen to the responsive data defined by reactive

 At this time, vue3 will force deep monitoring to be enabled.
 When the monitoring value is a proxy object, the value of oldValue will be abnormal, which is the same as newValue at this time.

  newValue === oldValue, which is basically the same content address, which is the object itself

// 监听proxy对象
watch(state, (newValue, oldValue) => {
  console.log("newValue", newValue, "oldValue", oldValue);
});

Monitor an attribute of proxy data

It is necessary to write the monitoring value as a function return form, and vue3 cannot directly monitor the change of a certain property of the object 

The monitored attribute value is a basic type of data, which needs to be written as a function to return the attribute to be monitored

watch(
  () => state.sex,
  (newValue, oldValue) => {
    console.log("newValue",newValue, "oldvalue", oldValue);
  }
);

 When the attribute of the monitoring proxy object is a complex data type, deep monitoring needs to be enabled

watch(
  () => person.city,
  (newvalue, oldvalue) => {
    console.log("person.city newvalue", newvalue, "oldvalue", oldvalue);
  },{ deep: true , immediate: true }
);

Listen to some properties of proxy data

watch([() => state.age, () => state.name], (newValue, oldValue) => {
  // 此时newValue为数组
  console.log("state.age", newValue, oldValue);
});

The use of watchEffect

watchEffect will be executed immediately;

There is no need to manually pass in the data that needs to be monitored;

The received parameter is a callback function;

Only the new value can be obtained, and the value before modification cannot be obtained

// 监听数据
watchEffect(() => {
  console.log(state.sex,'--',state.city)
});

stop listening

// 监听数据
let stop = watchEffect(() => {
  console.log(state.sex,'--',state.city)
  setTimeout(()=>{
     stop();
  },3000);
});

Summarize

 When listening to the proxy proxy data defined by reactive

oldValue cannot be obtained correctly

Forcibly open deep monitoring (cannot be closed)

The deep configuration item takes effect when listening to a certain attribute of the proxy proxy object defined by reactive