Hone logo
Hone
Problems

Implementing a Custom Watch Effect in Vue.js (TypeScript)

This challenge focuses on understanding and replicating the core functionality of Vue's watch effect. Building a custom watch effect allows for a deeper understanding of Vue's reactivity system and provides a valuable exercise in reactive programming. You'll be creating a simplified version of Vue's internal watch mechanism.

Problem Description

Your task is to implement a function called createWatchEffect that mimics the behavior of Vue's watch effect. This function should take a getter function (which returns the value to be watched) and an effect function (which will be executed whenever the watched value changes). The createWatchEffect function should:

  1. Track Dependencies: Internally track the dependencies of the getter function. This is crucial for Vue's reactivity system to know when to trigger the effect. For simplicity, assume the getter function directly accesses reactive properties.
  2. Initial Execution: Execute the effect function immediately upon creation. This ensures the effect runs once with the initial value.
  3. Reactive Updates: Whenever the value returned by the getter function changes, execute the effect function again.
  4. Cleanup: Provide a method to stop the watch effect, preventing further executions. This is essential for preventing memory leaks and unexpected behavior.

Key Requirements:

  • The createWatchEffect function must return an object with a stop method.
  • The stop method must prevent the effect function from being executed again.
  • The effect function should be executed in a synchronous manner.
  • The getter function should be called only once initially and then only when its dependencies change.

Expected Behavior:

When createWatchEffect is called, the effect function should run immediately with the initial value. Subsequent changes to the value returned by the getter function should trigger the effect function again. Calling the stop method should prevent any further executions of the effect function.

Edge Cases to Consider:

  • What happens if the getter function returns the same value multiple times? The effect function should not be executed repeatedly in this case.
  • How to handle potential errors within the getter or effect functions? (For this challenge, you can assume these functions will not throw errors).
  • What happens if the getter function relies on a reactive property that is later removed? (For this challenge, you can assume reactive properties will persist during the watch's lifetime).

Examples

Example 1:

Input:
const data = { count: 0 };
const getter = () => data.count;
const effect = (newValue) => { console.log('Count changed:', newValue); };

const watch = createWatchEffect(getter, effect);

data.count = 1; // Output: Count changed: 1
data.count = 2; // Output: Count changed: 2
watch.stop();
data.count = 3; // No output

Explanation: The effect function is initially called with 0. Subsequent changes to data.count trigger the effect function until watch.stop() is called.

Example 2:

Input:
const data = { message: 'Hello' };
const getter = () => data.message;
const effect = (newValue) => { document.getElementById('message').textContent = newValue; };
const watch = createWatchEffect(getter, effect);

document.getElementById('message').textContent = 'Initial Message';
data.message = 'Goodbye'; // The text in the element changes to "Goodbye"
watch.stop();
data.message = 'World'; // The text in the element remains "Goodbye"

Explanation: The effect function updates the DOM element. Changes to data.message are reflected in the DOM until watch.stop() is called.

Example 3: (Edge Case - Same Value)

Input:
const data = { value: 10 };
const getter = () => data.value;
const effect = (newValue) => { console.log('Effect triggered'); };

const watch = createWatchEffect(getter, effect);

data.value = 10; // Effect triggered (initial execution)
data.value = 10; // No effect triggered (value unchanged)
watch.stop();
data.value = 20; // No effect triggered

Explanation: The effect function is only triggered when the value changes. If the value remains the same, the effect is not executed again.

Constraints

  • The solution must be written in TypeScript.
  • The createWatchEffect function should accept two arguments: a getter function and an effect function.
  • The returned object must have a stop method.
  • The getter function should be called only once initially and then only when its dependencies change.
  • The effect function should be executed synchronously.
  • Assume that the getter function directly accesses reactive properties. No complex dependency tracking is required beyond this assumption.

Notes

  • This is a simplified implementation of Vue's watch effect. A real-world implementation would involve more sophisticated dependency tracking and optimization.
  • Focus on understanding the core concepts of reactivity and how changes to data can trigger updates to the UI.
  • Consider how you can efficiently determine if the value returned by the getter function has changed. A simple comparison might suffice for this challenge.
  • Think about how to prevent memory leaks by stopping the watch effect when it is no longer needed.
Loading editor...
typescript