- vừa được xem lúc

Vue Instance Lifecycle

0 0 75

Người đăng: Minh Huyen

Theo Viblo Asia

Chào các bạn.

Hôm nay, mình sẽ trở lại với chủ đề Vòng đời của Vue instance. Chủ đề này chắc không còn lạ lẫm gì nữa, vì mỗi khi học 1 framework mới thì mình phải quan tâm đến cái vòng đời của nó như thế nào, phải không? ?) Mình cũng xin chia sẻ ngắn gọn thôi nha.

1. Overview

Để có thể hiển thị được giao diện và dữ liệu lên màn hình, từ khi ứng dụng vừa được tạo hay khi ta thay đổi giá trị data, Vue đã trải qua rất nhiều bước. Trong vòng đời đó, Vue cung cấp cho chúng ta đủ các hooks để có thể thực thi code ở bất kỳ giai đoạn nào của ứng dụng. Điều này rất tốt, kiểu chiều lòng khách hàng, phải không? =))

Mình liệt kê ngắn gọn qua hình ảnh này. (Nguồn: https://www.udemy.com/)

Cùng xem chi tiết thế nào nhé.

2. Chi tiết

Sau khi ta gọi lệnh createApp(), Vue sẽ bắt đầu chạy vòng đời của mình, qua các giai đoạn mà chúng ta có thể tác động thông qua các hooks.

2.1. Create

Trong giai đoạn này, chúng ta có beforeCreate()created(). Chúng được thực thi ngay trước và sau khi dữ liệu, events được thiết lập. Tại thời điểm này, chúng ta sẽ chưa thấy gì trên màn hình cả. Vue chỉ mới biết về các data và cấu hình chung của ứng dụng mà thôi. Vì vậy, bạn sẽ không thể thao tác gì với DOM ở giai đoạn này đâu. Tuy nhiên, bạn có thể request data từ server ở đây rồi.

beforeCreate()

Chạy ngay sau khi 1 instance được khởi tạo và trước khi dữ liệu, các events, watchers được thiết lập. Khi đó, ta chưa truy cập được vào data của ứng dụng.

created()

Tại đây, dữ liệu, events, computed properties, methods, watcher đã được thiết lập xong. Nhưng vì chưa mount nên vẫn chưa có DOM và chưa có dữ liệu trên màn hình.

2.2. Mount

Sau giai đoạn create, Vue sẽ compile các template, gắn data vào giao diện và chuyển sang giao đoạn mount. Ở đây, chúng ta có beforeMount()mounted(). Chúng được chạy trước và sau khi hiển thị giao diện và dữ liệu trên màn hình, hay chính là khi khởi tạo component.

Ở đây, ta không sử dụng server-side rendering.

beforeMount()

Được gọi khi template đã được compile và chuẩn bị render lần đầu tiên.

mounted()

Lúc này, Vue biết những gì hiển thị trên màn hình, nó tạo ra DOM trên trình duyệt. (Phần này có liên quan đến DOM ảo và DOM thật, các bạn đọc thêm nhé). Tại đây, ta đã có thể thao tác với DOM được rồi, có thể dùng js để làm các thứ rồi. ?)

2.3. Update

Rồi ứng dụng nào cũng phải đến lúc thay đổi data mà thôi. Khi dữ liệu được thay đổi, chúng ta có beforeUpdate()updated(). Chúng được chạy trước và sau khi data thay đổi, làm cho component phải re-render lại view.

Ở đây, ta không sử dụng server-side rendering.

2.4. Unmount

Giai đoạn này là khi 1 component bị hủy, chuyển component khác hoặc hủy toàn bộ ứng dụng Vue. Ở ver khác 3., giai đoạn này được gọi là destroy (xem thêm). Ở đây, chúng ta có beforeUnmount()unmounted(). Chúng ta nên làm gì trong 2 hàm này nhỉ?

beforeUnmount()

Chạy trước khi một component bị hủy. Khi đó, instance vẫn còn đầy đủ các chức năng. Ta có thể dùng nó để hủy các events, ngắt kết nối không cần thiết trước khi chuyển sang component mới.

unmounted() Khi đó, tất cả các mọi thứ của instance bị hủy, như directives, event listener, watcher, computed,... Ở đây, mình có thể call để báo cho server biết instance bị hủy chẳng hạn. ?

Tổng kết

Trên đây, mình đã ghi lại một cách đơn giản vòng đời của 1 instance trong Vue. Kiến thức khá đơn giản nên các bạn có thể đọc thêm trong phần tài liệu tham khảo nhé.

Thank all!

Tài liệu tham khảo

https://v3.vuejs.org/api/options-lifecycle-hooks.html https://www.digitalocean.com/community/tutorials/vuejs-component-lifecycle https://viblo.asia/p/bai-10-vong-doi-cua-mot-vue-instance-va-cach-ap-dung-vao-thuc-te-GrLZDwveKk0

Bình luận

Bài viết tương tự

- vừa được xem lúc

Ví dụ CRUD với Laravel và Vuejs.

1. Cài đặt Laravel. composer create-project --prefer-dist laravel/laravel vuelaravelcrud. .

0 0 139

- vừa được xem lúc

Bài 1: Cài đặt Vue và chạy chương trình Hello world đầu tiên

Ở bài đầu tiên này mình sẽ hướng dẫn các bài cài đặt VueJS vào project Laravel, sau đó chúng ta sẽ cùng xem những thứ cơ bản của Vue nhé. Vì Laravel đã hỗ trợ tích hợp VueJS nên việc cài đặt của chúng ta sẽ hết sức đơn giản.

0 0 125

- vừa được xem lúc

Lazy loading and code splitting in Vue.js

Việc giữ cho ứng dụng của bạn tải nhanh ngày càng khó hơn. Trong loạt bài này, tôi sẽ đi sâu vào các kỹ thuật tối ưu hiệu suất Vue và bạn có thể sử dụng trong các ứng dụng Vue.

0 0 102

- vừa được xem lúc

Validating Vue.js Forms Using Vuelidate

Introduction. Validate thông tin đầu vào trên các ứng dụng web là rất quan trọng.

0 0 201

- vừa được xem lúc

5 Good Practices mình đang sử dụng trong Vuejs

Mở đầu. Mình đã sử dụng vuejs được cũng được 1 năm trở lại đây.

0 0 86

- vừa được xem lúc

[P5] VueJS - Một vài Interpolations khác trong Vue

Ở bài viết trước, mình đã nói về một vài keyword trong Vue như v-if, v-else, v-show, v-for, ... Chúng thực chất là các syntax đặc biệt của Vue để thao tác linh hoạt với các DOM ảo, được gọi là Interpolations. Ngoài ra, Vue còn các Interpolations khác. Mục đích của nó thì đã quá rõ ràng, hiển thị tex

0 0 48