07/09/2018, 21:55

Sử dụng computed trong VueJS, sự khác nhau giữa computed và methods

tìm hiểu về computed, cách sử dụng và so sánh sự khác nhau giữa computed và methods

Computed là gì và cách sử dụng

Khi component được khởi tạo thì computed sẽ được biến đổi giống như một property. Bạn có thể coi computed giống như dữ liệu ở trong data.Nhiều khi trong ứng dụng của chúng ta ở có nhiều xử lý kiểu như sau:

<template>
    <div class="my-component">
        <div>{{ message.split('').reverse().join('') }}</div>
    </div>
</template>

Điều này làm cho template của chúng ta nhìn không được gọn gàng, phải mất một lúc nhìn thì các bạn mới nhận ra đoạn code trên sẽ hiển thị message theo thứ tự ngược lại. Điều này sẽ ngày càng tệ hơn nếu như trong component các bạn muốn làm điều tương tự nhiều lần. Đó là lúc chúng ta cần sử dụng đến computed.

Về cách sử dụng thì computed được sử dụng gần giống như methods. Chúng ta cùng làm thử một ví dụ như sau:

<template>
    <div class="my-component">
        <div>{{ reverseMessage }}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                message: 'this is text'
            }
        },
        computed: {
            reverseMessage() {
                return this.message.split('').reverse().join('')
            }
        }
    }
</script>

<style lang="scss" scoped>
    .my-component {
        color: red;
    }
</style>

Ở đây mình tạo một computed tên là reverseMessage với mục đích chuyển một đoạn text theo thứ tự ngược lại. Nhìn có vẻ giống với methods như ở bài trước mình giới thiệu đó nhỉ.

Sự khác nhau giữa computed và methods

Điều gì xảy ra nếu các ở trong cặp dấu {{ }} ở template các bạn viết là reverseMessage() thay vì reverseMessage, khi đó lúc chạy ở console sẽ báo lỗi _vm.reverseMessage is not a function. Từ đây mình muốn rút ra cho các bạn một số điểm khác biệt giữa computed và methods:

  • Khi gọi computed ta không được thêm cặp dấu () đằng sau, điều đó tức là computed cũng không thể nhận tham số đầu vào như methods
  • Vì không nhận tham số đầu vào nên computed chỉ nên dùng với các dữ liệu có sẵn trong data của component
  • computed sẽ tính toán lại mỗi khi các biến phụ thuộc trong nó thay đổi, còn methods sẽ được tính toán lại bất kì khi nào nó được gọi, nên nếu biết tận dụng computed để tính toán các dữ liệu có sẵn thì sẽ cải thiện được performance app của các bạn. Điều tuyệt vời của computed là nó sẽ được cached nên giả sử bạn có 1 computed với hàng loạt tính toán, lặp trong đó, thì nếu các các biến phụ thuộc không thay đổi thì khi sử dụng nó sẽ chỉ mất thời gian tính 1 lần, những lần sau kết quả sẽ được sử dụng lại từ lần trước.

Kết luận

Kiến thức trong bài mình tổng hợp từ những gì mình học được và mình thấy cần thiết khi xây dựng dự án, để hiểu sâu về computed thì còn nhiều thứ như getter hay setter nhưng mình thấy không thực sự cần thiết và có thể sẽ làm cho các bạn mới bắt đầu khó hiểu. Trong tương lai nếu có thể mình sẽ hướng dẫn thêm các bạn về chúng.

Ở bài tiếp theo chúng ta sẽ tìm hiểu về watcher trong VueJS nhé.

Cám ơn các bạn đã theo dõi ^^ !

Bài liên quan

Phân Biệt Sự Khác Nhau Giữa Interface Và Abstract Class Trong PHP

Interface Là Gì Interface định nghĩa tập hợp các method mà những class sử dụng interface sẽ cần phải triển khai (implement) các method này. interface I_Test { public function foo(); } Với interface I_Test được định nghĩa như trên thì bắt buộc tất cả các class sử dụng interface này phải có ...

Bùi Văn Nam viết 10:35 ngày 07/09/2018

Sự khác nhau giữa Issue và Risk trong quản lý dự án

1. Tổng quan Việc quản lý một dự án có thể hiểu là bạn thiết lập thời gian để hoàn thành những mục tiêu. Cho dù đó là dự án nhỏ hay lớn thì nhìn chung lại việc quản lý sẽ liên quan đến việc lập kế hoạch, tổ chức, sắp xếp và sử dụng các nguồn lực trong dự án. Quản lý dự án bao gồm những việc như ...

Tạ Quốc Bảo viết 17:41 ngày 12/08/2018

Sự khác nhau giữa Self và Static trong PHP

Đặt vấn đề Chúng ta cùng tìm hiểu qua một số đoạn code ví dụ như dưới đây. Giả sử chúng ta có class Car như sau : class Car { public static function model ( ) { self : : getModel ( ) ; } protected static function getModel ( ) { ...

Tạ Quốc Bảo viết 16:56 ngày 12/08/2018

Kotlin Tutorial - Bài 2: Biến trong Kotlin, sự khác nhau giữa Java và Kotlin. val và var

Trong bài thứ 2 thì chúng ta sẽ thấy được các biến hoạt động thế nào trong Kotlin, val với var là gì và khi nào sử dụng val, khi nào sử dụng var. Tôi muốn bắt đầu từ đây bởi vì nó sẽ rất hữu ích để hiểu được về cách tạo các field trong các class của chúng ta sau này. Biến trong Kotlin Biến ...

Hoàng Hải Đăng viết 16:09 ngày 12/08/2018

Sự khác nhau giữa addFragment và replaceFragment trong Android

Khi làm việc với ứng dụng android chắc các bạn không thể không biết đến Fragment . Fragment là một phần giao diện người dùng hoặc hành vi của một ứng dụng. Fragment có thể được đặt trong Activity hoặc chính trong Fragment , nó có thể cho phép thiết kế Activity, Fragment với nhiều mô-đun. ...

Hoàng Hải Đăng viết 15:10 ngày 12/08/2018
+2