Cara mudah menghilangkan flicker {{ }} di vue.js
Jika Anda membuat sebuah webapp atau blog atau yang sejenis dengan menggunakan vue.js, maka Anda mungkin akan menemui sedikit masalah yang mengganggu, yaitu kadang akan muncul seperti flicker karakter {{ }} pada saat halaman terbuka. Memang hanya beberapa milisecond saja, tetapi lama kelamaan akan terasa sangat mengganggu. Masalah ini hampir pasti muncul pada saat Anda menggunakan vue.js tidak sebagai SPA, melainkan sebagai library biasa yang digunakan langsung di halaman web. Lalu apa penyabab masalah flicker ini dan bagaimana solusinya ?
Masalah flicker ini disebabkan oleh proses rendering template vue yang di dalamnya terdapat mustache tag yaitu {{ }}. Proses rendering template ini akan dilakukan setelah vue.js selesai di load oleh Browser, sehingga ada jeda waktu antara loading library vue.js dan halaman web yang sudah terlanjur muncul.
Ada berapa solusi yang bisa dicoba untuk menghindari flicker ini terjadi. Beberapa diantaranya adalah sebagai berikut.
1. Mengubah posisi loading vue.js dari sebelum akhir body menjadi di atas body.
Jika dalam kondisi normal Anda biasanya menempatkan posisi script di bagian akhir dari body, seperti contoh di bawah ini :
<!DOCTYPE html>
<html>
<head>
<title>Apa kabar dunia</title>
<style>
.tengah {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h3 class="tengah">{{ message }}</h3>
<span>Halo, perkenalkan nama saya <b>{{nama}}</b>, saya saat ini tinggal di <b>{{ alamat }}</b>.</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Apa kabar dunia",
nama : "Fulan bin Fulan",
alamat : "Indonesia"
}
});
</script>
</body>
</html>Pada kode di atas, vue.js di load dari cdn.jsdelivr.net diposisi akhir body, sebelum script aplikasi. Kode dengan pola seperti inilah yang akan menyebabkan ada flicker {{ message }} selama beberapa saat.
Untuk menghilangkan flicker, cara yang paling mudah adalah dengan memindahkan loading vue.js ke head, seperti contoh di bawah ini.
<!DOCTYPE html>
<html>
<head>
<title>Apa kabar dunia</title>
<style>
.tengah {
text-align: center;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h3 class="tengah">{{ message }}</h3>
<span>Halo, perkenalkan nama saya <b>{{nama}}</b>, saya saat ini tinggal di <b>{{ alamat }}</b>.</span>
</div>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Apa kabar dunia",
nama : "Fulan bin Fulan",
alamat : "Indonesia"
}
});
</script>
</body>
</html>Cara ini sangat mudah, tetapi sebenarnya sangat tidak disarankan, karena akan menambah loading time dari halaman web. Ada blocking time dimana browser akan menunggu sampai dengan vue.js selesai di get dari server baru melanjutkan proses render. Jadi, jika anda memilih untuk menggunakan solusi ini, pastikan anda menggunakan library vue.js versi production.
2. Menggunakan v-text
Alternatif lain untuk menghilangkan flicker adalah dengan menggunakan v-text pada tag tempat mustache tag berada. Untuk contoh di atas, kita bisa pindahkan {{ message }} , dan {{ nama }} dan {{ alamat }} masing-masing ke dalam blok dimana dia berada.
<!DOCTYPE html>
<html>
<head>
<title>Apa kabar dunia</title>
<style>
.tengah {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<h3 class="tengah" v-text="message"></h3>
<span>Halo, perkenalkan nama saya <b v-text="nama"></b>, saya saat ini tinggal di <b v-text="alamat"></b>.</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Apa kabar dunia",
nama : "Fulan bin Fulan",
alamat : "Indonesia"
}
});
</script>
</body>
</html>Dengan menggunakan solusi ini, maka flicker akan hilang dikarenakan meskipun vue.js ditempatkan di akhir body, akan tetapi karena di dalam div tersebut kosong, maka tidak akan ada yang di render pada saat awal halaman tersebut muncul. Bandingkan dengan sebelumnya yang di dalam div terdapat mustache tag {{ message }}.
Akan tetapi, solusi ini hanya cocok jika Anda menggunakan sedikit mustache tag. Jika Anda menggunakan banyak sekali mustache tag, maka Anda mungkin akan kerepotan karena harus mengganti mustache tag menjadi v-text dibanyak tempat.
3. Menggunakan v-cloak
Mungkin solusi ini yang paling cocok disebagian besar keadaan. Yaitu dengan menggunakan v-clock untuk menyembunyikan mustache tag sampai dengan library vue.js selesai di-load oleh browser. Untuk menggunakan fitur v-cloak ini, langkah pertama yang harus dilakukan adalah menambahkan css untuk meng-hidden v-cloak secara default. Silahkan tambahkan css ini ke dalam head atau external css di dalam head.
<style>
[v-cloak] {display: none}
</style>Kemudian, silahkan tambahkan v-cloak pada blok yang terdapat mustache tag. Pada contoh di atas adalah pada div.
<!DOCTYPE html>
<html>
<head>
<title>Apa kabar dunia</title>
<style>
[v-cloak] {display: none}
.tengah {
text-align: center;
}
</style>
</head>
<body>
<div id="app" v-cloak>
<h3 class="tengah">{{ message }}</h3>
<span>Halo, perkenalkan nama saya <b>{{nama}}</b>, saya saat ini tinggal di <b>{{ alamat }}</b>.</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
message: "Apa kabar dunia",
nama : "Fulan bin Fulan",
alamat : "Indonesia"
}
});
</script>
</body>
</html>Dengan menggunakan v-cloak ini, Anda hanya perlu menambahkan 1 baris css dan menempatkan v-cloak hanya di 1 tempat saja (di-root aplikasi) atau mungkin hanya di beberapa tempat saja. Bandingkan dengan jika Anda menggunakan v-text, dimana Anda harus menambahkan v-text disemua tempat yang menggunakan mustache tag.
Kesimpulan
Dari beberapa aklternatif solusi di atas, silahkan pilih dan gunakan solusi mana yang paling sesuai dengan kebutuhan Anda. Untuk saya pribadi, solusi yang paling cocok dan saya gunakan sampai saat ini adalah yang menggunakan v-cloak
Sekian tip dan trik kali ini. Selamat mencoba dan semoga yang sedikit ini bermanfaat.
Sumber :
https://vuejs.org/v2/api/#Directives