Dotaz: Vue.js - základy

[mica]

Při seznamování se s Vue.js jsem narazil na určité chování, které si neumím vysvětlit. Jde o dvě věci, které (asi) spolu souvisejí, ale pro přehlednost je vezmu postupně. První z nich:

V HTML mám:

<p>Number is {{ returnNumber() }}</p>

V Javascriptu pak (zestručněno):

new Vue({
   data: function() {
     return {
       number: 0
    }
  },
  methods: {
     returnNumber() {
       /* tělo funkce returnNumber() má dvě různé varianty zapsané níže */
     }
  }
})

Dvě různé podoby těla funkce returnNumber():

1)

return this.number = Math.random();

2)

return this.number++

V případě první varianty se po načtení stránky do odstavce vypíše nějaké odpovídající náhodné číslo, kdežto v případě druhé varianty se tam objeví číslo 102 a navíc se v konzoli objeví hlášení o chybě [Vue warn]: You may have an infinite update loop in a component render function. Takže v případě varianty 1) se funkce spustí jen jednou, kdežto v případě varianty 2) se spustí opakovaně (minimálně 102krát) a zřejmě do nekonečna, pokud by nebyla zastavena pojistkou ve Vue.

Obě varianty mají společné to, že funkce změní hodnotu vlastnosti number a její nová hodnota se pak vypíše do odstavce. Navzdory tomuto společnému se ale jinak chovají rozdílně. Ani trochu mi není jasné, proč se toto děje. Dokázal by mi to někdo nějak jednoduše vysvětlit? Děkuji.

---

---

Odpovědi

[z_sk]

Moznost 2). Akú hodnotu ma premenná this.number pri prvom volaní?

[mica]

No při prvním spuštění pracuje funkce s this.number = 0, po prvním dokončení je hodnota zvětšena na 1. Má mě to navést k odpovědi? Já z toho nic vyčíst nedokážu.

[🇹🇬]

To "++" znamená, že se _to_ číslo (this.number, tj. 0) má zvětšit o 1. Když to renderuje, už má hodnotu 1, takže zvětší 1 o 1 a máš 2 atd. Nekonečná smyčka.

[🇹🇬]

jj asi se to samo dycky zkusí zaktualizovat a udělá to rekurzi :O ;D

a těch 100 je asi jako konstantou MAX_UPDATE_COUNT nastavenou na hodnotu 100 vtom *js hele řádek 4247 takže to udělá jenom těch 100 vopakování dycky :D ;D

rekurzi by to asi jako mělo dělat i pro to náhodný číslo :D ;D

[Olaf]

Čau Gréto. Jo, možná by tazatel mohl říct, co vlastně chce udělat. :o) BTW, ty děláš s Vue? Mi některé věci připadají matoucí. Hodně jich tam vypadá jak definice / import v kruhu, ale možná jsem jen nechápavý. Asi bych měl najít nějaké tutoriály, kde ty věci řeší logicky -- a ne tak, že lopatu pojmenují jako manuálně manipulovatelný aparát k transportu kvant sedimentálních, metamorfovaných a jiných hmot v rámci tří dimenzí a do všech lineárních obalů ortogonálních vektorů euklidovského prostoru R3.

[🇹🇬]

lol ani ne :D :D mě zajímalo jenom proč těch 100 :D ;D

[🇹🇬]

Chtěl jsi říct, že ++ je nejdříve čtení hodnoty a pak její navýšení, takže Vue detekuje závislost renderu na této hodnotě, monitoruje ji a při změně přerenderuje obsah. A protože samotný rendering tu hodnotu mění, tak vyvolá další rendering a tak donekonečna (do limitu). Že? *rofl*

[OldFrog {Ondra Nemecek}]

...takhle si nabije víceméně každý, kdo začíná s gui a bindingem dat. Je nutno si představit, odkud kam ty události a změny dat tečou...

[mica]

rekurzi by to asi jako mělo dělat i pro to náhodný číslo :D ;D

No, tady jsem si všiml právě rozdílu u dvou různých zápisů:

1)

this.number = Math.random();
return this.number

2)

return this.number = Math.random()

První zápis vyvolá nekonečnou smyčku, druhý ne. Takže, pokud to dobře chápu, v zápisu 2) se návratová hodnota metody Math.random() vloží do this.number a zároveň se vrátí jako výsledek funkce, ale hodnota this.number se při tom nečte, kdežto v zápisu 1) se na druhém řádku hodnota this.number přečte.

Mám to tedy celkově chápat tak, že ve Vue nemá smysl do textové interpolace (tj. do {{ }}) zapisovat volání funkcí, které pracují s hodnotami v objektu data?

[z_sk]

Skús ešte:

3)

return (this.number = Math.random());