Toon posts:

[JS] weten welke variabelen in functie worden gebruikt

Pagina: 1
Acties:

Vraag


  • Rekcor
  • Registratie: Februari 2005
  • Laatst online: 31-05 14:56
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)

https://tweakers.net/i/xlfuQTM5wchRVAGBz3jieooCi5s=/full-fit-in/4000x4000/filters:no_upscale():fill(white):strip_exif()/f/image/ALzyM3aMArtb4HnoXVOkF2JQ.png?f=user_large

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

Beste antwoord (via Rekcor op 05-01-2022 20:34)


  • Peter
  • Registratie: Januari 2005
  • Laatst online: 29-05 01:52
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:
1
2
3
4
5
6
7
8
class RefImpl {
    // ...
    get value() {
        trackRefValue(this);
        return this._value;
    }
    // ...
}

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

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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 :)

Alle reacties


Acties:
  • Beste antwoord
  • 0Henk 'm!

  • Peter
  • Registratie: Januari 2005
  • Laatst online: 29-05 01:52
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:
1
2
3
4
5
6
7
8
class RefImpl {
    // ...
    get value() {
        trackRefValue(this);
        return this._value;
    }
    // ...
}

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

JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
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
  • Registratie: Februari 2005
  • Laatst online: 31-05 14:56
Dank, weer wat geleerd :-)


Tweakers maakt gebruik van cookies

Tweakers plaatst functionele en analytische cookies voor het functioneren van de website en het verbeteren van de website-ervaring. Deze cookies zijn noodzakelijk. Om op Tweakers relevantere advertenties te tonen en om ingesloten content van derden te tonen (bijvoorbeeld video's), vragen we je toestemming. Via ingesloten content kunnen derde partijen diensten leveren en verbeteren, bezoekersstatistieken bijhouden, gepersonaliseerde content tonen, gerichte advertenties tonen en gebruikersprofielen opbouwen. Hiervoor worden apparaatgegevens, IP-adres, geolocatie en surfgedrag vastgelegd.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Toestemming beheren

Hieronder kun je per doeleinde of partij toestemming geven of intrekken. Meer informatie vind je in ons cookiebeleid.

Functioneel en analytisch

Deze cookies zijn noodzakelijk voor het functioneren van de website en het verbeteren van de website-ervaring. Klik op het informatie-icoon voor meer informatie. Meer details

janee

    Relevantere advertenties

    Dit beperkt het aantal keer dat dezelfde advertentie getoond wordt (frequency capping) en maakt het mogelijk om binnen Tweakers contextuele advertenties te tonen op basis van pagina's die je hebt bezocht. Meer details

    Tweakers genereert een willekeurige unieke code als identifier. Deze data wordt niet gedeeld met adverteerders of andere derde partijen en je kunt niet buiten Tweakers gevolgd worden. Indien je bent ingelogd, wordt deze identifier gekoppeld aan je account. Indien je niet bent ingelogd, wordt deze identifier gekoppeld aan je sessie die maximaal 4 maanden actief blijft. Je kunt deze toestemming te allen tijde intrekken.

    Ingesloten content van derden

    Deze cookies kunnen door derde partijen geplaatst worden via ingesloten content. Klik op het informatie-icoon voor meer informatie over de verwerkingsdoeleinden. Meer details

    janee