PRISTUP VIRTUALNOM DOM -U POMOĆU FUNKCIJA RENDERIRANJA U VUE.JS -U

Pristup virtualnom DOM -u pomoću funkcija renderiranja u Vue.js -u

Izvorno objavio Nwose Lotanna na https://blog.logrocket.com

Prije nego počnete

Ovaj je post prikladan za programere svih faza, uključujući početnike. Evo nekoliko stvari koje biste već trebali imati prije nego što prođete kroz ovaj članak.

Na računaru će vam trebati sljedeće:

Node.js verzija 10.x i iznad instaliran. To možete provjeriti pokretanjem donje naredbe u svom terminalu/naredbenom retku:

node -v

Uređivač koda: Visual Studio Code se toplo preporučuje
Pogledaj najnoviju verziju , globalno instaliran na vašem računalu
CLI 3.0 prikaz instaliran na vašem stroju. Da biste to učinili, prvo deinstalirajte staru CLI verziju:

npm uninstall -g vue-cli

zatim instalirajte novu:

npm install -g @vue/cli

Preuzmite Vue početni projekt ovdje
Raspakirajte preuzeti projekt
Idite u raspakiranu datoteku i pokrenite naredbu za ažuriranje svih ovisnosti:

npm install

Uvod: Kako Vue radi u preglednicima

Vue.js ima fokus na sloju prikaza vašeg JavaScript projekata i zato su predlošci dostupni za prikaz vaše prezentacije (jezik za označavanje). Čvor je najmanja jedinica konstrukcija u DOM -u, pa kada se ovakav kod predloška pošalje u DOM, preglednik sve razlaže na čvorove:

The paragraph text stays here

Dakle, zaglavlje je čvor, a tekst zaglavlja podređeni čvor unutar čvora zaglavlja, baš kao što je odlomak čvor, a tekst u njemu podređeni čvor. Za ažuriranje ovih čvorova Vue pruža predložak za pisanje koda prezentacije dok sastavlja čvorove.

Dakle, za odlomak poput ovog gore, jednostavno upišite ovo u odjeljak predloška:

Tekst odlomka ostaje ovdje

Ili upotrijebite funkciju renderiranja da biste je stvorili, ovako:

render: function (createElement) { return createElement('p', 'The paragraph text stays here') }

Možete brzo primijetiti razinu apstrakcije koju dobivate s Vueom kad usporedite obje metode. Funkcija renderiranja, međutim, bliže je prevoditelju jer će se kod predloška i dalje trebati prepisivati u JavaScript.

Kako Vue upravlja čvorovima

Kako bi nadgledao i ispravno upravljao tim čvorovima, Vue JS gradi virtualni DOM gdje obavlja prljavi posao u skladu s čvorovima i načinom na koji se mijenjaju od točke montiranja na OnInit do kada se ne montiraju (na onDestroy) kao virtualni čvorovi. Virtualni DOM jednostavno je stablo komponenti svih virtualnih čvorova.

Render funkcija

Ovo je funkcija u JavaScriptu koja se koristi unutar Pogled na komponente za izvršavanje zadataka poput stvaranja elementa. Ovdje vidimo funkciju koja je prikazana gore:

render: function (createElement) { return createElement('p', 'The paragraph text stays here') }

Vidite da se argument createElement koristi za stvaranje novog elementa u DOM -u, iza kulisa vraća virtualni čvor. Virtualni čvorovi nazivaju se VNodes u Vue JS.

CreateElement funkcije render prihvaća do tri parametra:

Prvi parametar naziva se render element , potrebno je za rad createElement, može biti niz ili čak funkcija. Obično je to naziv HTML oznake, komponentna opcija ili funkcija koja se razrješava u naziv oznake.
Drugi parametar je definicija komponente ili naziv HTML oznake u zadnjem parametru. Obično je objekt i izborni je parametar. To je podatkovni objekt koji odgovara parametru koji će se stvoriti u DOM -u.
Treći parametar je dječji parametar , to može biti ili niz ili niz vrijednosti podataka ili podređeni čvor prvog parametra.

Demo

Da bismo ilustrirali funkciju renderiranja, pogledajmo primjer, ako ste pročitali ovaj post od početka, preuzeli ste početni projekt , raspakirali i otvorili u aplikaciji VS Code. Otvorite datoteku App.vue i provjerite izgleda li ovako:

import Test from './components/Test.vue' export default {name: 'app', komponente: {Test}, data () {return {greetings: 'Tekst odlomka ostaje ovdje'}}} #app {font- obitelj: 'Avenir', Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: sive boje; poravnavanje teksta: središte; boja: #2c3e50; margin-top: 60px; }

To je upravo ono što smo imali kao prvi uzorak koda na početku ovog posta. Da biste koristili pristup funkcije renderiranja, zapamtite da je to čisti JavaScript koncept u Vueu pa otvorite datoteku main.js, trebala bi izgledati ovako:

import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ render: h => h(App), }).$mount('#app')

Ovdje Vue čuva zadanu izjavu o montaži i kako je datoteka app.vue korijenska komponenta. Dodajte ovaj blok koda prije novog bloka koda Vue, odmah nakon trećeg retka:

import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false Vue.component('Hello', { render(createElement){ return createElement('p', 'The rendered paragraph text stays here'); } }) new Vue({ render: h => h(App), }).$mount('#app')

Time se stvara nova Vue komponenta pod nazivom Hello, a zatim unutar nje stvara element odlomka. Odlomak će izgledati točno kao da ste otvorili novu .vue datoteku poput komponente Test u direktoriju projekta. Da biste ga isprobali, vratite se u datoteku app.vue i dodajte komponentu Hello u predložak i gledajte kako se pojavljuje u vašem pregledniku.

Evo kako će to izgledati u pregledniku:

Koristeći snagu JavaScripta

Svoje znanje o JavaScriptu možete iskoristiti za stvarno upravljanje virtualnim DOM -om jer već znate da upotreba funkcije render daje izravnu kontrolu nad Vue virtualnim DOM -om. Možete dodati podatkovni objekt s vrijednostima, a zatim upotrijebiti ovo za pozivanje na njega ovako:

Vue.component('Hello', { render(createElement){ return createElement('p', this.greetings); }, data(){ return { greetings: 'The paragraph text stays here' } } })

Ovo prikazuje stvoreni odlomak s tekstom navedenim u podatkovnom objektu.

Korištenje rekvizita

Također možete koristiti svoje omiljene konstrukte Vue JS poput rekvizita, na primjer. Ako vaš odjeljak predloška app.vue ima svojstvo automobila poput ovog:

twitter pregled izbrisanih tweetova

Možete ga referencirati pomoću rekvizita u datoteci main.js ovako:

Vue.component('Hello', { render(createElement){ return createElement('p', this.greetings + this.car); }, data(){ return { greetings: 'The paragraph text stays here' } }, props: ['car'] })

Evo kako će to izgledati u pregledniku:

Stvaranje ugniježđenih komponenti

Također možete ugnijezditi elemente s funkcijom render poput ove:

Vue.component('Hello', { render(createElement){ return createElement('ul', [createElement('li',[createElement('p', 'I am a nested list item')])]); }, data(){ return { greetings: 'The paragraph text stays here' } }, props: ['car'] })

Evo kako će to izgledati u pregledniku:

Zaključak

Ovo je bio dobar uvod u pristup Vue virtualnom DOM -u s render funkcijama. To je vrlo izravan način komunikacije s DOM -om, a poznavajući i Vue i JavaScript, možete udobno imati potpunu kontrolu nad DOM -om.

Hvala na čitanju ❤

Ako vam se svidio ovaj post, podijelite ga sa svim prijateljima iz programiranja!

Pratite nas na Facebook | Cvrkut