4. Moment

tech

Table of Content

• Introduction
• Instalasi
• Alasan Menggunakan computed()
  • Perbedaan antara `computed` dan `methods`
  • Kenapa menggunakan computed()?

Introduction

Karena ada jam kosong, maka saya mau coba ngulik lagi VueJS tapi di Laravel. Yang sering saya pakai itu plugin momentjs. Seringkali kita manipulasi waktu dari timestamp ke waktu yg kita inginkan seperti 2023-12-29 00:00:00 menjadi 29 December 2023. Di vuejs agak tricky nih ya.

Instalasi

1. install package nya npm install moment
2. Jangan lupa di import import moment from 'moment';
3. Taruh di function computed(). Contoh kode

import axios from 'axios';
import moment from 'moment';
 
export default {
    // kode lain
    computed: {
        moment() {
        return moment;
        }
    }
}

1. Penggunaan di dalam tag <template> seperti ini <td>{{ moment(ap.apply_at).format('DD MMMM YYYY') }}</td>

Alasan Menggunakan computed()

Perbedaan antara computed dan methods

1. computed: Digunakan untuk menghitung nilai yang tergantung pada properti lain di dalam komponen. computed di cache
2. methods: Setiap kali fungsi dipanggil, logika di dalamnya akan dieksekusi kembali. methods tidak di cache.

Kenapa menggunakan computed()?

• Reusability: Dengan menyediakan moment sebagai computed, Anda membuatnya tersedia secara global untuk digunakan di seluruh template komponen tanpa perlu mengimpor ulang atau menginisialisasi di setiap metode.
• Optimization: Dengan computed, Vue.js akan memastikan bahwa nilai moment di-cache dan dihitung ulang hanya jika terjadi perubahan pada nilai properti yang digunakan di dalamnya. Ini menghemat sumber daya komputasi jika komponen memiliki banyak penggunaan moment.

Date: 24-07-2024