[RFC] deep watch allow setting condition for skipping object

[kimverchan]

Start Date: 2024-10-15
Target Major Version: 3.x
Implementation PR: vuejs/core#12157

Summary

If you want to skip the dependency collection of an object when deeply watch to an object, you cannot do so currently. Add the skip attribute to watchOptions to do this.

Examples

let dummy = 0
const source = reactive({
    num1: 1,
    nested: { _skip: true, num2: 0 },
})
watch(source, () => dummy++, {
    deep: true,
    skip(val) {
      return val._skip // return true to skip val
    }
})
source.nested.num2++ // do not run callback
expect(dummy).toBe(0)
source.num1++ // run callback
expect(dummy).toBe(1)
source.nested.num2++  // do not run callback
expect(dummy).toBe(1)

Result Playground

Motivation

When using the watch function to observe objects in depth, suppose that the object to be observed contains a specific object that does not need to be observed, but the specific object cannot be determined by depth. In this case, you can use the skip option to control the monitoring conditions to avoid unnecessary observations.

[posva]

The motivation part should include practical real world examples. Right now it repeats what can be read with the simple examples.