translate: essentials/lifecycle

src/guide/essentials/lifecycle.md

@@ -1,10 +1,10 @@
 # Lifecycle Hooks {#lifecycle-hooks}
 
-Each Vue component instance goes through a series of initialization steps when it's created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.
+Mỗi instance của component Vue sẽ trải qua một chuỗi các bước khởi tạo khi nó được tạo ra - ví dụ, nó cần thiết lập quan sát dữ liệu (data observation), compile template, mount instance vào DOM, và cập nhật DOM khi dữ liệu thay đổi. Trong quá trình đó, nó cũng chạy các hàm được gọi là lifecycle hooks (các hook vòng đời), cho phép người dùng chèn code của mình vào các giai đoạn cụ thể.
 
-## Registering Lifecycle Hooks {#registering-lifecycle-hooks}
+## Đăng ký Lifecycle Hooks {#registering-lifecycle-hooks}
 
-For example, the <span class="composition-api">`onMounted`</span><span class="options-api">`mounted`</span> hook can be used to run code after the component has finished the initial rendering and created the DOM nodes:
+Ví dụ, hook <span class="composition-api">`onMounted`</span><span class="options-api">`mounted`</span> có thể được dùng để chạy code sau khi component hoàn tất render lần đầu và tạo các DOM node:
 
 <div class="composition-api">
 
@@ -13,7 +13,7 @@ For example, the <span class="composition-api">`onMounted`</span><span class="op
 import { onMounted } from 'vue'
 
 onMounted(() => {
-  console.log(`the component is now mounted.`)
+  console.log(`component đã được mount.`)
 })
 </script>
 ```
@@ -24,43 +24,43 @@ onMounted(() => {
 ```js
 export default {
   mounted() {
-    console.log(`the component is now mounted.`)
+    console.log(`component đã được mount.`)
   }
 }
 ```
 
 </div>
 
-There are also other hooks which will be called at different stages of the instance's lifecycle, with the most commonly used being <span class="composition-api">[`onMounted`](/api/composition-api-lifecycle#onmounted), [`onUpdated`](/api/composition-api-lifecycle#onupdated), and [`onUnmounted`](/api/composition-api-lifecycle#onunmounted).</span><span class="options-api">[`mounted`](/api/options-lifecycle#mounted), [`updated`](/api/options-lifecycle#updated), and [`unmounted`](/api/options-lifecycle#unmounted).</span>
+Ngoài ra còn có các hook khác sẽ được gọi ở các giai đoạn khác nhau trong vòng đời của instance, trong đó phổ biến nhất là <span class="composition-api">[`onMounted`](/api/composition-api-lifecycle#onmounted), [`onUpdated`](/api/composition-api-lifecycle#onupdated), và [`onUnmounted`](/api/composition-api-lifecycle#onunmounted).</span><span class="options-api">[`mounted`](/api/options-lifecycle#mounted), [`updated`](/api/options-lifecycle#updated), và [`unmounted`](/api/options-lifecycle#unmounted).</span>
 
 <div class="options-api">
 
-All lifecycle hooks are called with their `this` context pointing to the current active instance invoking it. Note this means you should avoid using arrow functions when declaring lifecycle hooks, as you won't be able to access the component instance via `this` if you do so.
+Tất cả lifecycle hook đều được gọi với context `this` trỏ tới instance hiện tại đang gọi nó. Điều này có nghĩa là bạn nên tránh dùng arrow function khi khai báo lifecycle hook, vì khi đó bạn sẽ không thể truy cập instance của component thông qua `this`.
 
 </div>
 
 <div class="composition-api">
 
-When calling `onMounted`, Vue automatically associates the registered callback function with the current active component instance. This requires these hooks to be registered **synchronously** during component setup. For example, do not do this:
+Khi gọi `onMounted`, Vue sẽ tự động gắn callback đã đăng ký với instance component hiện tại đang active. Điều này yêu cầu các hook phải được đăng ký **một cách đồng bộ (synchronous)** trong quá trình setup của component. Ví dụ, không nên làm như sau:
 
 ```js
 setTimeout(() => {
   onMounted(() => {
-    // this won't work.
+    // đoạn này sẽ không hoạt động.
   })
 }, 100)
 ```
 
-Do note this doesn't mean that the call must be placed lexically inside `setup()` or `<script setup>`. `onMounted()` can be called in an external function as long as the call stack is synchronous and originates from within `setup()`.
+Lưu ý rằng điều này không có nghĩa là lời gọi phải nằm trực tiếp 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à call stack là synchronous và bắt nguồn từ bên trong `setup()`.
 
 </div>
 
-## Lifecycle Diagram {#lifecycle-diagram}
+## Sơ đồ vòng đời {#lifecycle-diagram}
 
-Below is a diagram for the instance lifecycle. You don't need to fully understand everything going on right now, but as you learn and build more, it will be a useful reference.
+Bên dưới là sơ đồ vòng đời của instance. Bạn không cần hiểu hết mọi thứ ngay bây giờ, nhưng khi học sâu hơn và xây dựng nhiều hơn, đây sẽ là một tài liệu tham khảo hữu ích.
 
-![Component lifecycle diagram](./images/lifecycle.png)
+![Sơ đồ vòng đời component](./images/lifecycle.png) 
 
 <!-- https://www.figma.com/file/Xw3UeNMOralY6NV7gSjWdS/Vue-Lifecycle -->
 
-Consult the <span class="composition-api">[Lifecycle Hooks API reference](/api/composition-api-lifecycle)</span><span class="options-api">[Lifecycle Hooks API reference](/api/options-lifecycle)</span> for details on all lifecycle hooks and their respective use cases.
+Tham khảo <span class="composition-api">[Lifecycle Hooks API reference](/api/composition-api-lifecycle)</span><span class="options-api">[Lifecycle Hooks API reference](/api/options-lifecycle)</span> để biết chi tiết về tất cả lifecycle hook và các trường hợp sử dụng tương ứng.