watchListener usage method

  1. watchListeners can listen to onegetterfunction
    • thisgetterTo return a reactive object
    • When the object is updated, the corresponding callback letter is executed
import { reactive, watch } from 'vue' const state = reactive({ count: 0 }) watch(() => state.count, (newValue, OldValue) => {// Because watch can only be observed by getter/effect functions, ref, hot active objects, or arrays, you need to change state.count to getter})Copy the code

2. Watch can listen on reactive objects

import { ref, watch } from 'vue' 
const count = ref(0) 
watch(count, (newValue, oldValue) => {
})
Copy the code

3. Watch can listen to multiple responsive lines. If any responsive object is updated, the callback function will be executed

import { ref, watch } from 'vue' const count = ref(0) const count2 = ref(1) watch([count, count2], ([newCount, NewCount2], [oldCount, oldCount]) => {}) oldVlaue) => { console.log(newValue)//[newCount, newCount2] console.log(oldValue)//[oldCount, oldCount2] })Copy the code