Metode vs Dihitung dalam Vue

Apa perbedaan utama antara metode dan nilai yang dihitung dalam Vue.js?

Mereka terlihat sama dan dapat dipertukarkan.

Nilai dan metode yang dikomputasi sangat berbeda dalam Vue dan jelas tidak dapat dipertukarkan dalam kebanyakan kasus.

Properti yang Dihitung

Nama yang lebih tepat untuk nilai yang dihitung adalah properti yang dihitung . Bahkan, ketika Vue dipakai, properti dihitung dikonversi menjadi properti Vue dengan pengambil dan terkadang setter. Pada dasarnya Anda dapat menganggap nilai yang dihitung sebagai nilai turunan yang akan diperbarui secara otomatis setiap kali salah satu nilai dasar yang digunakan untuk menghitungnya diperbarui. Anda tidak memanggil yang dihitung dan tidak menerima parameter apa pun. Anda mereferensikan properti yang dikomputasi sama seperti Anda akan properti data. Inilah contoh klasik dari dokumentasi :

computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

Yang dirujuk dalam DOM seperti ini:

<p>Computed reversed message: "{{ reversedMessage }}"</p>

Nilai yang dihitung sangat berharga untuk memanipulasi data yang ada di Vue Anda. Kapan pun Anda ingin memfilter atau mengubah data Anda, biasanya Anda akan menggunakan nilai yang dihitung untuk tujuan itu.

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.names.filter(n => n.startsWith("B"))
    }
}

<p v-for="name in startsWithB">{{name}}</p>

Nilai yang dihitung juga di-cache untuk menghindari penghitungan berulang suatu nilai yang tidak perlu dihitung ulang ketika belum berubah (karena mungkin tidak ada dalam satu lingkaran misalnya).

metode

Suatu metode hanyalah fungsi yang terikat pada instance Vue. Ini hanya akan dievaluasi ketika Anda secara eksplisit menyebutnya. Seperti semua fungsi javascript, ia menerima parameter dan akan dievaluasi ulang setiap kali dipanggil. Metode berguna dalam situasi yang sama fungsi apa pun berguna.

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.startsWithChar("B")
    },
    startsWithM(){
        return this.startsWithChar("M")
    }
},
methods:{
    startsWithChar(whichChar){
        return this.names.filter(n => n.startsWith(whichCharacter))
    }
}

Dokumentasi Vue sangat bagus dan mudah diakses. Saya merekomendasikannya.

Ketika @gleenk meminta contoh praktis untuk membuat perbedaan cache dan ketergantungan antara metode dan properti yang dihitung, saya akan menunjukkan skenario sederhana:

app.js

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },
    methods: {
        addToAmethod: function(){
            console.log('addToAmethod');
            return this.a + this.age;
        },
        addToBmethod: function(){
            console.log('addToBmethod');
            return this.b + this.age;
        }
    },
    computed: {
        addToAcomputed: function(){
            console.log('addToAcomputed');
            return this.a + this.age;
        },
        addToBcomputed: function(){
            console.log('addToBcomputed');
            return this.b + this.age;
        }
    }
});

Di sini kita memiliki 2 metode dan 2 properti yang dikomputasi yang melakukan tugas yang sama. Metode addToAmethod& addToBmethoddan properti yang dihitung addToAcomputed& addToBcomputedsemua menambahkan +20 (yaitu agenilai) ke salah satu aatau b. Mengenai metode, keduanya disebut setiap kali tindakan telah dilakukan pada salah satu properti yang terdaftar, bahkan jika dependensi untuk satu metode tertentu tidak berubah. Untuk properti yang dihitung, kode dieksekusi hanya ketika dependensi telah berubah; misalnya, salah satu nilai properti spesifik yang merujuk ke A atau B akan memicu addToAcomputedatau addToBcomputed, masing-masing.

Metode dan deskripsi yang dikomputasi tampak sangat mirip, tetapi karena @Abdullah Khan telah menentukannya , mereka bukan hal yang sama ! Sekarang mari kita coba menambahkan beberapa html untuk mengeksekusi semuanya bersama dan melihat di mana perbedaannya.

Demo kasus Metode

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },
    methods: {
        addToAmethod: function(){
            console.log('addToAmethod');
            return this.a + this.age;
        },
        addToBmethod: function(){
            console.log('addToBmethod');
            return this.b + this.age;
        }
    }
});

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>VueJS Methods - stackoverflow</title>
            <link href="style.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
    
        </head>
        <body>
            <div id="vue-app">
                <h1>Methods</h1>
                <button v-on:click="a++">Add to A</button>
                <button v-on:click="b++">Add to B</button>
                <p>Age + A = {{ addToAmethod() }}</p>
                <p>Age + B = {{ addToBmethod() }}</p>
            </div>
        </body>
        
        <script src="app.js"></script>
    </html>

Hasil yang dijelaskan

Ketika saya mengklik tombol "Tambah ke A" , semua metode dipanggil (lihat hasil layar log konsol di atas), addToBmethod()ini juga dieksekusi tetapi saya tidak menekan tombol "Tambahkan ke B" ; nilai properti yang merujuk ke B tidak berubah. Perilaku yang sama terjadi jika kita memutuskan untuk mengklik tombol "Tambahkan ke B" , karena sekali lagi kedua metode akan dipanggil secara independen dari perubahan ketergantungan. Menurut skenario ini, ini adalah praktik buruk karena kami menjalankan metode setiap waktu, bahkan ketika dependensi tidak berubah. Ini benar-benar menghabiskan sumber daya karena tidak ada cache untuk nilai properti yang belum berubah.

Demo kasus properti yang dihitung

new Vue({
    el: '#vue-app',
    data: {
        a: 0,
        b: 0,
        age: 20
    },

    computed: {
        addToAcomputed: function(){
            console.log('addToAcomputed');
            return this.a + this.age;
        },
        addToBcomputed: function(){
            console.log('addToBcomputed');
            return this.b + this.age;
        }
    }
});

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>VueJS Computed properties - stackoverflow</title>
            <link href="style.css" rel="stylesheet" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.min.js"></script>
        </head>
        <body>
            <div id="vue-app">
                <h1>Computed Properties</h1>
                <button v-on:click="a++">Add to A</button>
                <button v-on:click="b++">Add to B</button>
                <p>Age + A = {{ addToAcomputed }}</p>
                <p>Age + B = {{ addToBcomputed }}</p>
            </div>
        </body>
        
        <script src="app.js"></script>
    </html>

Hasil yang dijelaskan

Ketika saya mengklik tombol "Add to A" , hanya properti yang dikomputasi addToAcomputeddipanggil karena, seperti yang sudah kami katakan, properti yang dikomputasi dieksekusi hanya ketika dependensi telah berubah. Dan karena saya tidak menekan tombol "Tambahkan ke B" dan nilai properti usia untuk B tidak berubah, tidak ada alasan untuk memanggil dan menjalankan properti yang dihitung addToBcomputed. Jadi, dalam arti tertentu, properti yang dikomputasi mempertahankan nilai "sama tidak berubah" untuk properti B seperti semacam cache. Dan dalam keadaan ini ini dianggap praktik yang baik .

Dari docs

properti ..compached di-cache berdasarkan dependensinya. Properti yang dihitung hanya akan mengevaluasi kembali ketika beberapa dependensinya telah berubah.

Jika Anda ingin data di-cache menggunakan properti Computed di sisi lain jika Anda tidak ingin data di-cache menggunakan properti Metode sederhana.

Salah satu perbedaan antara komputasi dan metode. Misalkan kita memiliki fungsi yang akan mengembalikan nilai penghitung (penghitung hanya variabel). Mari kita lihat bagaimana fungsi berperilaku baik dalam komputasi maupun metode

Dihitung

Pada saat pertama kali dieksekusi kode di dalam fungsi akan dieksekusi dan vuejs akan menyimpan nilai penghitung dalam cache (untuk mengakses lebih cepat). Tetapi ketika kita lagi memanggil fungsi vuejs tidak akan lagi menjalankan kode yang tertulis di dalam fungsi itu. Pertama-tama memeriksa setiap perubahan yang dilakukan ke konter atau tidak. Jika ada perubahan yang dilakukan maka hanya akan mengeksekusi kembali kode yang ada di dalam fungsi itu. Jika tidak ada perubahan yang dilakukan pada counter vuejs tidak akan lagi menjalankan fungsinya. Ini hanya akan mengembalikan hasil sebelumnya dari cache.

metode

Ini seperti metode normal dalam javascript. Setiap kali kita memanggil metode itu akan selalu menjalankan kode di dalam fungsi terlepas dari perubahan yang dibuat ke penghitung.

Metode akan selalu mengeksekusi ulang kode terlepas dari perubahan dalam kode. di mana seperti yang dikomputasi akan mengeksekusi kembali kode maka hanya jika salah satu dari nilai dependensinya berubah. Kalau tidak, itu akan memberi kita hasil sebelumnya dari cache tanpa menjalankan kembali

Inilah uraian pertanyaan ini.

Kapan harus menggunakan metode

• Untuk bereaksi terhadap beberapa peristiwa yang terjadi di DOM
• Untuk memanggil fungsi ketika sesuatu terjadi pada komponen Anda.
• Anda dapat memanggil metode dari properti atau pengamat yang dikomputasi.

Kapan menggunakan properti yang dihitung

• Anda perlu membuat data baru dari sumber data yang ada
• Anda memiliki variabel yang Anda gunakan di templat yang dibuat dari satu atau beberapa properti data
• Anda ingin mengurangi nama properti yang rumit dan bersarang menjadi yang lebih mudah dibaca dan mudah digunakan (tetapi perbarui ketika properti asli berubah)
• Anda perlu referensi nilai dari templat. Dalam hal ini, membuat properti yang dihitung adalah yang terbaik, karena di-cache.
• Anda perlu mendengarkan perubahan lebih dari satu properti data

Properti yang Dihitung

Properti terkomputasi disebut juga nilai terkomputasi. Artinya, mereka memperbarui dan dapat diubah kapan saja. Selain itu, cache data hingga berubah. Ketika Vue dipakai, properti dihitung dikonversi menjadi properti.

Satu hal lagi yang ingin saya bagikan, Anda tidak dapat melewatkan parameter apa pun di properti yang dihitung itu sebabnya saat memanggil properti komputer apa pun tidak diperlukan tanda kurung.

Metode

Metode sama dengan fungsi dan bekerja dengan cara yang sama. Selain itu, metode tidak melakukan apa-apa kecuali Anda menyebutnya. Juga, seperti semua fungsi javascript, ia menerima parameter dan akan dievaluasi ulang setiap kali dipanggil. Setelah itu, mereka tidak bisa menyimpan nilai

Di dalam metode memanggil kurung ada dan Anda dapat mengirim satu atau lebih parameter di dalamnya.

Menemukan pertanyaan yang sama. Bagi saya lebih jelas seperti ini:

1. Ketika Vue.js melihat v-on directivediikuti oleh suatu metode, ia tahu persis metode mana yang harus dipanggil dan kapan harus memanggilnya.

<button v-on:click="clearMessage">Clear message</button> // @click
// method clearMessage is only called on a click on this button

<input v-model="message" @keyup.esc="clearMessage" @keyup.enter="alertMessage" />
/* The method clearMessage is only called on pressing the escape key
and the alertMessage method on pressing the enter key */

2. Ketika suatu metode dipanggil tanpav-on directive itu akan dipanggil setiap kali suatu peristiwa dipicu pada halaman yang memperbarui DOM (atau hanya perlu merender ulang bagian dari halaman). Bahkan ketika metode itu tidak ada hubungannya dengan peristiwa yang dipicu.

<p>Uppercase message: {{ messageUppercase() }}</p>
methods: {
   messageUppercase() {
      console.log("messageUpercase");
      return this.message.toUpperCase();
   }
}
/* The method `messageUppercase()` is called on every button click, mouse hover 
or other event that is defined on the page with the `v-on directive`. So every
time the page re-renders.*/

3. Properti yang dikomputasi hanya dipanggil ketika nilai properti diubah yang direferensikan oleh thiskata dalam definisi fungsinya.
   

<p>Uppercase message: {{ messageUppercase }}</p> 
data() {
 return {
    message: "I love Vue.js"
   }
 },
computed: {
 messageUppercase() {
    console.log("messageUpercase");
    return this.message.toUpperCase();
 }
}
/* The computed property messageUppercase is only called when the propery message is
changed. Not on other events (clicks, mouse hovers,..) unless of course a specific 
event changes the value of message.  */

Yang perlu diambil di sini adalah praktik terbaik untuk menggunakan computedproperti jika metode tidak dipanggil dengan v-on directive.