VueJS

Lifecycle Hooks in VueJS

Lifecycle Hooks in VueJS

1. Mở đầu

Như tiêu đề, lần này mình sẽ giới thiệu với các bạn về Lifecycle Hooks, đây là một phần kiến thức rất quan trọng khi các bạn làm việc không chỉ với VueJS mà là còn với cả Angular2+ hay ReactJS (Những Framework phổ biến bây giờ). Khi các bạn hiểu được một Lifecycle Hooks của một trong ba ông lớn này là các bạn đã có thể học những Framework còn lại hết sức dễ dàng, vì chúng có tư tưởng giống nhau. Từ khi khởi tạo component cho tới khi update dữ liệu, render ra phần view và cuối cùng là destroy (Xóa nó ra khởi memory).

Để thực hành được phần này các bạn chỉ cần tạo 1 app đơn giản hoặc không thì chỉ cần vào đường dẫn này nhé. Mình đã để sẵn VueJS trong đó rồi, chỉ cần vào và thực hành luôn thôi ^^. Nhưng chú ý là code bên dưới mình viết theo kiểu component nhé, còn code trong trang kia là nó gọi CDN của VueJS rồi viết script luôn bên dưới, nhưng đừng lo nó giống nhau cả thôi chỉ khác cách triển khai một chút.

2. Chi tiết

Đầu tiên các bạn hãy xem sơ đồ này trên trang chủ của VueJS nhé.

Đây là 1 sơ đồ rất quan trọng để mô ta một vòng đời của VueJS, nhìn vào nó ta sẽ dễ ghi nhớ và nhớ lại kiến thức nhanh hơn khi chúng ta đọc (Với người ngại đọc ^^). Như sơ đồ chúng ta sẽ chia ra làm các giai đoạn trong Lifecycle là:

  1. Before create
  2. Created
  3. Before mount
  4. Mounted
  5. Before update
  6. Updated
  7. Before destroy
  8. Destroyed

Trước khi đọc tiếp bạn hãy xem đoạn code sau:

<template>
    <div>
        <div>{{message}}</div>
        <div><button @click="changeMessage">Change message</button></div>
        <p>I'm text inside the component.</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            message: "Hello, there welcome to VueJS world"
        }
    },
    methods: {
        changeMessage() {
            this.message = "Message changed!";
        }
    },
    beforeCreate: function() {
        console.log("beforeCreate");
        alert("Before Create");
    },
    created: function() {
        console.log("Created");
        alert("Created");
    },
    beforeMount: function() {
        console.log("beforeMount");
        alert("Before Mount");
    },
    mounted: function() {
        console.log("mounted");
        console.log(this.$el.textContent);
        alert("Mounted");
    },
    beforeUpdate: function() {
        console.log("beforeUpdate");
        alert("Before Update");
    },
    updated: function() {
        console.log("updated");
        alert("Updated");
    },
    beforeDestroy: function() {
        console.log("beforeDestroy");
        alert("Before Destroy");
    },
    destroyed: function() {
        console.log("destroyed");
        alert("Destroyed");
    }
};
</script>

Before create

Khi các bạn chạy đoạn code trên các bạn sẽ thấy alert("Before Create") được chạy đầu tiên. Nó được chạy trước khi mà Component này được khởi tạo trong memory (^^ so amazing), ở đây các bạn hoàn toàn có thể hiểu là ứng dụng của chúng ta đang tạo mới một Vue Instant mới và trước khi đưa nó vào memory thì nó sẽ chạy beforeCreate - lifecycle.

<script>
export default {
    beforeCreate: function() {
        console.log("beforeCreate");
        alert("Before Create");
    }
};
</script>

Created

Tiếp theo Vue instant (Component) của chúng ta sẽ chạy đến created - lifecycle đây là khi mà nó đã được tạo trong memory app của chúng ta rồi, từ đây ta có thể dùng chúng. ^^ Cụ thể hơn là bạn đã có thể gắn data và event vào Vue instant này rồi. Nhưng các bạn chưa thể View gì được do là Dom ảo của chúng ta chưa được gắn kết và hiển thị. Hãy chạy đoạn code trên và để ý console.log nhé.

<script>
export default {
    created: function() {
        console.log("Created");
        alert("Created");
    }
};
</script>

Before mount

Chúng ta đến với phần tiếp theo đó chính là Mount, đây được giới thiệu là phần gắn dữ liệu vào Dom, trước khi nó được render ra ngoài View. Ở Before mount - lifecycle này bạn có thể check một số điều kiện để sau đó render ra ngoài Dom. Vì nó là được chạy trước khi mà chúng ta khởi đạo Dom ảo. ( Before mount - lifecycle Ít được dùng)

<script>
export default {
    beforeMount: function() {
        console.log("beforeMount");
        alert("Before Mount");
    }
};
</script>

Mounted

Mount - lifecycle được chạy khi mà chúng ta đã Mount xong, ở đây ta đã có thể tác động đến this.$el một thành phần trong Dom mà VueJS gắn vào. ( Mounted - lifecycle Rất hay được dùng). Cuối cùng cũng ngửi thấy mùi của Dom ^^, vì sau khi Mounted được chạy thì ta đã thấy Dom được hiện ra ngoài View.

<script>
export default {
    mounted: function() {
        console.log("mounted");
        console.log(this.$el.textContent);
        alert("Mounted");
    }
};
</script>

Before update

Update lifecycle nói chung cho phép chúng ta xử lí trước khi Dom được thay đổi hay hiểu các khác là nó được render lại, các bạn phải để ý là cả Dom nhé. Các bạn nên dùng Update lifecycle nếu các bạn muốn handle một hành động nào đó khi mà toàn bộ Dom bị thay đổi. Còn nếu như các bạn chỉ muốn quan sát 1 thuộc tính hoặc một phần nào đó của data thôi thì có thể dùng Watch hoặc Computed nhé ^^, để tránh ảnh hưởng đến performance.

Quay lại với Before update - lifecycle sẽ được chạy sau khi ta update data trong component hay vue instant và chạy trước khi mà nó update xong. ^^, dễ phải không nào.

<script>
export default {
    beforeUpdate: function() {
        console.log("beforeUpdate");
        alert("Before Update");
    }
};
</script>

Updated

Lifecycle sẽ được chạy sau khi mà chúng ta update data để chuẩn bị render Dom mới theo data được cập nhật. Ở đây nếu bạn muốn truy cập vào Dom mới thì có thể làm rồi nhé, vì ở đây nó đã được update rồi, chỉ chuẩn bị render ra thôi ^^.

<script>
export default {
    updated: function() {
        console.log("updated");
        alert("Updated");
    }
};
</script>

Before destroy

Destroy - lifecycle nói chung sẽ được chạy khi mà Component hay Vue instant Destroy. Ở đây các bạn có thể hiểu là nó đã clean những data này ra khỏi hệ thống ^^ lợi dụng tính chất này ta có thể add code về analytics để có thể lấy các số liệu thống kê hiệu quả nhất.

Before destroy - lifecycle được chạy trước khi chúng ta Destroy component nên ở đây các bạn cần clean những data, các sự kiện không cần thiết, các hàm như setInterval, … Vì ngay sau sự kiện này là ta đã Destroy component này rồi

<script>
export default {
    beforeDestroy: function() {
        console.log("beforeDestroy");
        alert("Before Destroy");
    }
};
</script>

Destroyed

Cuối cùng trong 1 lifecycle chính là Destroyed - lifecycle, đối với lifecycle này chúng ta đã thực hiện Destroy xong Vue instant này sẽ không còn tồn tại nữa ^^.

<script>
export default {
    destroyed: function() {
        console.log("destroyed");
        alert("Destroyed");
    }
};
</script>

3. Kết luận

Như vậy mình đã giới thiệu với các bạn một phần cực kì quan trọng trong VueJS. Qua bài này mình mong các bạn sẽ có sự hiểu biết hơn về Lifecycle hooks trong VueJS, từ đó sẽ có thể tự tin học Angular hay React vì bọn này cũng same same vậy.

Vậy thôi, see you again ^-^

4. Tham khảo

# Introduction to Vue lifecycle hooks
# Intro to Vue.js: Vue-cli and Lifecycle Hooks
# Understanding Vue.js Lifecycle Hooks
# The Vue Instance

Tagged , , ,
0 0 vote
Article Rating
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments