// … handlers // … observe // make data and arr reactive const data = { x: 1, y: 2 } const proxy = new Proxy(data, handlers) const arr = [1, 2, 3] const arrProxy = new Proxy(arr, handlers) // observe functions const depA = () => console.log(`x = ${proxy.x}`) const depB = () => console.log(`y = ${proxy.y}`) const depC = () => console.log(`x + y = ${proxy.x + proxy.y}`) const depD = () => { let sum = 0 for (let i = 0; i < arrProxy.length; i++) { sum += arrProxy[i] } console.log(`sum = ${sum}`) } // dry-run all dependents observe(depA) observe(depB) observe(depC) observe(depD) // output: x = 1, y = 2, x + y = 3, sum = 6 // mutate data proxy.x = 3 // output: x = 3, x + y = 5 arrProxy[1] = 4 // output: sum = 8