Móc vòng đời Vue.js

Vue.js lifecycle hooks là một tập hợp các phương thức cho phép bạn chạy mã ở các giai đoạn cụ thể của vòng đời thành phần Vue. Chúng cung cấp một cách để khai thác các điểm khác nhau của sự tồn tại của thành phần, từ khi tạo đến khi hủy. Các hook này rất cần thiết để thực hiện các tác vụ như khởi tạo dữ liệu, thiết lập trình lắng nghe sự kiện và dọn dẹp tài nguyên.

Vòng đời của một thành phần Vue

Vòng đời của một thành phần Vue có thể được chia thành nhiều giai đoạn. Mỗi giai đoạn được liên kết với các móc vòng đời cụ thể mà bạn có thể sử dụng để thực thi mã. Sau đây là các giai đoạn chính của vòng đời thành phần Vue:

Tạo: Thành phần đang được khởi tạo.
Đang gắn kết: Thành phần đang được thêm vào DOM.
Đang cập nhật: Dữ liệu phản ứng của thành phần đang thay đổi.
Hủy: Thành phần đang bị xóa khỏi DOM.

Móc vòng đời chính

Vue.js cung cấp một số hook vòng đời mà bạn có thể sử dụng trong các thành phần của mình. Mỗi hook tương ứng với một giai đoạn cụ thể trong vòng đời. Sau đây là các hook được sử dụng phổ biến nhất:

created: Được gọi sau khi thành phần được tạo. Đây là nơi tốt để lấy dữ liệu hoặc khởi tạo trạng thái thành phần.
mounted: Được gọi sau khi thành phần đã được gắn vào DOM. Đây là nơi bạn có thể thực hiện thao tác DOM hoặc bắt đầu các hoạt động không đồng bộ.
updated: Được gọi sau khi dữ liệu phản ứng của thành phần đã thay đổi và DOM đã được cập nhật. Hữu ích để phản ứng với các thay đổi dữ liệu.
destroy: Được gọi trước khi thành phần bị hủy. Sử dụng hook này để dọn dẹp tài nguyên, chẳng hạn như trình lắng nghe sự kiện hoặc bộ đếm thời gian.

Ví dụ về Lifecycle Hooks

Đã tạo Hook

Hook created được sử dụng để thực hiện các hành động sau khi thành phần instance đã được tạo nhưng trước khi nó được gắn kết. Sau đây là một ví dụ về việc sử dụng hook created để lấy dữ liệu:

<template>
  <div>
    <p>Data: {{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await fetch('https://api.example.com/data');
      this.data = await response.json();
    }
  }
};
</script>

Móc gắn

Hook mounted được gọi sau khi thành phần đã được thêm vào DOM. Nó lý tưởng để thực hiện thao tác DOM hoặc bắt đầu các hoạt động không đồng bộ yêu cầu thành phần phải ở trong DOM. Sau đây là một ví dụ:

<template>
  <div ref="myDiv"></div>
</template>

<script>
export default {
  mounted() {
    this.$refs.myDiv.innerHTML = 'Component has been mounted!';
  }
};
</script>

Đã cập nhật Hook

Hook updated được gọi sau khi dữ liệu phản ứng của thành phần đã thay đổi và DOM đã được cập nhật. Nó hữu ích để phản ứng với các thay đổi dữ liệu. Sau đây là một ví dụ:

<template>
  <div>
    <input v-model="text" placeholder="Type something"/>
    <p>Updated Text: {{ text }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: ''
    };
  },
  updated() {
    console.log('Component updated with text:', this.text);
  }
};
</script>

Móc bị phá hủy

Hook destroyed được gọi trước khi thành phần bị hủy. Sử dụng hook này để thực hiện dọn dẹp, chẳng hạn như xóa trình lắng nghe sự kiện hoặc dừng bộ đếm thời gian. Sau đây là một ví dụ:

<template>
  <div>Check the console when this component is destroyed</div>
</template>

<script>
export default {
  destroyed() {
    console.log('Component is being destroyed');
  }
};
</script>

Phần kết luận

Các hook vòng đời Vue.js rất cần thiết để quản lý các giai đoạn khác nhau của vòng đời thành phần. Bằng cách hiểu và sử dụng các hook này, bạn có thể khởi tạo dữ liệu, thao tác DOM, xử lý các bản cập nhật và dọn dẹp tài nguyên một cách hiệu quả. Kết hợp các hook vòng đời vào các thành phần Vue.js của bạn để tạo ra các ứng dụng mạnh mẽ và phản hồi.

vòng đời vue tạo gắn kết cập nhật hủy móc thành phần dữ liệu dom phương pháp sự kiện dọn dẹp khởi tạo