[JS] weten welke variabelen in functie worden gebruikt

[Rekcor]

Ik ben VUE3 aan het leren met de Composition API. Erg vet tot nu toe!

Nu ben ik bij de 'watchEffect' functie aanbeland, en die werkt op een manier die ik niet begrijp

YouTube: Vue JS 3 Tutorial for Beginners #10 - The Composition API (part 1)



De watchEffect-functie 'weet' dat 'search.value' wordt gebruikt in de doorgeven functie, terwijl dat - itt tot de normale watch - nergens expliciet wordt opgegeven. Hoe kan dit?

Dat kan toch niet anders dan dat de functie wordt geparsed? Zo ja, is dat een goed idee? (het doet me denken aan een bepaalde versie van angularjs die ook magischerwijs dependencies detecteerde, wat allerlei issues gaf bij minificatie e.d.).

Ik heb in de vue-broncode zitten neuzen, maar die is dermate complex dat ik het niet kan vinden https://cdn.jsdelivr.net/...6/dist/vue.esm-browser.js

[Peter]

De functie gegeven in watchEffect wordt direct uitgevoerd, waarna Vue via dynamische getters bijhoudt welke referenties gebruikt zijn. Daarom is het belangrijk dat je alle referenties altijd aanroept in de functie gegeven aan watchEffect. In de broncode kan je dit zien in de RefImpl class:

JavaScript:

class RefImpl {
    // ...
    get value() {
        trackRefValue(this);
        return this._value;
    }
    // ...
}

Een simpel, stand-alone voorbeeld zonder Vue kan er als volgt uitzien:

JavaScript:

let trackReferences = false;
let usedReferences = [];

class MyRef {
    #value;

    constructor(value) { this.#value = value; }

    set value(value) { this.#value = value; }
    get value() {
        if (trackReferences)
            usedReferences.push(this);
        return this.#value;
    }
}

function watchEffect(fn) {
    trackReferences = true;
    usedReferences = [];

    fn();

    trackReferences = false;
    console.log(usedReferences);  // [ a, c ]
}

const a = new MyRef(42);
const b = new MyRef(50);
const c = new MyRef(100);

watchEffect(() => {
    console.log(`${a.value} < ${c.value}`);
});

Daarna zou je de functie toe kunnen voegen aan MyRef als een observer, wat precies is wat Vue doet

[Rekcor]

Dank, weer wat geleerd :-)