Vue.js

Appearance

On this page

Lifecycle Hooks ​

Mỗi instance của thành phần Vue đi qua một loạt các bước khởi tạo khi nó được tạo - ví dụ, nó cần thiết lập quan sát dữ liệu, biên dịch template, mount instance lên DOM, và cập nhật DOM khi dữ liệu thay đổi. Trong quá trình này, nó cũng chạy các hàm được gọi là lifecycle hooks, mang lại cơ hội cho người dùng để thêm mã của họ tại các giai đoạn cụ thể.

Đăng ký Lifecycle Hooks ​

Ví dụ, hook onMountedmounted có thể được sử dụng để chạy mã sau khi thành phần đã hoàn thành việc kết xuất ban đầu và tạo các nút DOM:

vue
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`Thành phần đã được mount.`)
})
</script>
js
export default {
  mounted() {
    console.log(`Thành phần đã được mount.`)
  }
}

Cũng có các hook khác sẽ được gọi ở các giai đoạn khác nhau của vòng đời của instance, với những hook phổ biến nhất là onMounted, onUpdated, và onUnmounted.mounted, updated, và unmounted.

Tất cả các lifecycle hooks đều được gọi với ngữ cảnh this trỏ đến instance hiện tại đang gọi nó. Lưu ý điều này có nghĩa là bạn nên tránh sử dụng arrow functions khi khai báo lifecycle hooks, vì bạn sẽ không thể truy cập instance thành phần thông qua this nếu làm như vậy.

Khi gọi onMounted, Vue tự động liên kết hàm gọi lại đã đăng ký với instance thành phần hiện tại đang hoạt động. Điều này đòi hỏi những hook này được đăng ký đồng bộ trong quá trình thiết lập thành phần. Ví dụ, không nên thực hiện như sau:

js
setTimeout(() => {
  onMounted(() => {
    // điều này sẽ không hoạt động.
  })
}, 100)

Lưu ý rằng điều này không có nghĩa là cuộc gọi phải được đặt ngay bên trong setup() hoặc <script setup>. onMounted() có thể được gọi trong một hàm bên ngoài miễn là ngăn xếp cuộc gọi là đồng bộ và xuất phát từ bên trong setup().

Sơ Đồ Vòng Đời ​

Dưới đây là một biểu đồ cho vòng đời của instance. Bạn không cần phải hiểu đầy đủ mọi thứ đang diễn ra ngay bây giờ, nhưng khi bạn học và xây dựng nhiều hơn, đây sẽ là một tài nguyên hữu ích.

Biểu đồ vòng đời của thành phần

Xem Tham Khảo API Lifecycle HooksTham Khảo API Lifecycle Hooks để biết chi tiết về tất cả các lifecycle hooks và các trường hợp sử dụng tương ứng của chúng.