Add lazyWatch Function for Lazy-Initialized Watchers

[tal7aouy]

This pull request introduces a new utility function, lazyWatch, to our reactivity library. This function enables the creation of watchers that can be initialized lazily, allowing for deferred setup until the watcher is explicitly triggered. This enhancement provides greater flexibility in managing the initialization of watchers, potentially optimizing performance in scenarios where immediate setup is not necessary.

Changes

• Added lazyWatch Function:
  • A utility function that facilitates lazy initialization of watchers.
  • Accepts source, callback, and options to configure lazy behavior.
  • Returns a function to initialize the watcher if lazy is true, or sets up the watcher immediately if lazy is false.

Function Signature:

export const lazyWatch = (
  source: any,
  callback: (newVal: any, oldVal: any) => void,
  options: { lazy?: boolean } = { lazy: true },
): LazyWatchReturn | void => {
  if (options.lazy) {
    let initialized = false

    // Return a function that initializes the watcher when invoked
    return () => {
      if (!initialized) {
        initialized = true // Set initialized to true after first call
        watch(source, callback) // Set up the watcher
      }
    }
  } else {
    // If lazy is false, initialize the watcher immediately
    watch(source, callback)
  }
}

Motivation

The lazyWatch function addresses the need for deferred initialization of watchers, which can be beneficial in scenarios where immediate setup of watchers is not desirable. By supporting lazy initialization, developers can have more control over when the watcher setup occurs, which can lead to performance optimizations and more efficient resource usage.

Testing

Unit tests have been created to verify the functionality of the lazyWatch function:

• Lazy Initialization: Ensures that the watcher is not initialized until the returned function is called.
• Immediate Initialization: Validates that watchers are set up immediately when the lazy option is set to false.

Checklist

• The code adheres to the project's coding standards and guidelines.
• Comprehensive tests have been written and successfully passed.
• Documentation has been updated to reflect the new lazyWatch function and its usage.

Additional Notes

Feedback on this enhancement is welcome. The lazyWatch function is designed to improve the flexibility and performance of our reactivity system by allowing deferred initialization of watchers. This feature is expected to benefit scenarios where controlling the timing of watcher activation is critical.

[github-actions]

Size Report

Bundles

File	Size	Gzip	Brotli
runtime-dom.global.prod.js	100 kB	37.9 kB	34.1 kB
vue.global.prod.js	159 kB	57.8 kB	51.4 kB

Usages

Name	Size	Gzip	Brotli
createApp (CAPI only)	48.8 kB	18.8 kB	17.2 kB
createApp	55.4 kB	21.3 kB	19.4 kB
createSSRApp	59.4 kB	23 kB	21 kB
defineCustomElement	60.2 kB	22.9 kB	20.9 kB
overall	69.1 kB	26.4 kB	24 kB

[edison1105]

• Implementing a new API needs to be discussed through an RFC.
• If lazy is necessary, I prefer the following approach

const { start } = watch(source, callback, { lazy: true })

// start()