Câu hỏi phỏng vấn VueJS: Tổng hợp & Giải đáp chi tiết nhất

1. Khám Phá VueJS: Nền Tảng Phát Triển Giao Diện Hiện Đại

Bạn đang chuẩn bị cho buổi phỏng vấn VueJS sắp tới, đúng không? Để mà nói, lĩnh vực phát triển giao diện người dùng (frontend) giờ sôi động lắm, và VueJS nổi lên như một ngôi sao sáng, được nhiều anh em lập trình viên tin dùng. Để tự tin hơn trong buổi trò chuyện quan trọng đó, chúng ta cùng đi sâu vào những thứ cốt lõi nhé.

VueJS Là Gì Và Tại Sao Lại Phổ Biến?

Thực chất, VueJS là một framework JavaScript mã nguồn mở được thiết kế để xây dựng giao diện người dùng (UI) và những ứng dụng một trang (SPA) hiệu quả. Nó ra đời với mục tiêu giải quyết những vấn đề mà các framework lớn hơn gặp phải, mang đến một cách tiếp cận linh hoạt và dễ chịu hơn nhiều.

Lịch sử phát triển của Vue tuy không quá dài nhưng lại rất vững chắc, được cộng đồng ủng hộ nhiệt tình. Điểm mạnh lớn nhất của nó, theo tôi, là sự cân bằng giữa sức mạnh và tính đơn giản.

• Dễ học, dễ tích hợp: Kể cả bạn mới tiếp cận frontend, Vue cũng rất thân thiện. Nó có thể tích hợp dễ dàng vào các dự án hiện có hoặc kết hợp với các thư viện, framework khác mà không gây quá nhiều rắc rối.
• Hiệu suất cao, kích thước nhẹ: Gói cài đặt của Vue khá gọn nhẹ, giúp ứng dụng của bạn khởi động nhanh hơn, mang lại trải nghiệm tốt hơn cho người dùng cuối.
• Cú pháp đơn giản, dễ đọc: Cú pháp của Vue gần gũi với HTML và JavaScript thuần túy, làm cho việc đọc và viết code trở nên trực quan.
• Tùy biến linh hoạt: Bạn có thể sử dụng Vue theo nhiều cách khác nhau, từ những ứng dụng nhỏ đến các hệ thống phức tạp, đều rất hiệu quả.

Nói thêm một chút, VueJS thường được gọi là một “framework tiến bộ”. Điều này có nghĩa là bạn có thể dùng nó từng chút một, chỉ cần tích hợp phần View hoặc dùng toàn bộ các công cụ đi kèm để xây dựng một SPA hoàn chỉnh. Nó cũng tuân theo kiến trúc MVVM (Model-View-ViewModel), nơi ViewModel đóng vai trò trung gian, giúp đồng bộ dữ liệu giữa Model (dữ liệu) và View (giao diện), làm cho việc quản lý trạng thái trở nên rõ ràng và dễ dàng hơn.

Những Kỹ Năng Cốt Lõi Cần Có Khi Làm Việc Với VueJS

Để thực sự làm chủ VueJS, bạn cần một nền tảng vững chắc. Đây không chỉ là câu chuyện về cú pháp mà còn là tư duy lập trình.

• Kiến thức vững chắc về JavaScript (ES6+), HTML, CSS: Đây là ba trụ cột của mọi lập trình viên frontend. Hiểu sâu về chúng sẽ giúp bạn viết code VueJS mạch lạc và tối ưu.
• Hiểu biết về Git và cách quản lý phiên bản: Bất kỳ dự án thực tế nào cũng cần Git để làm việc nhóm và quản lý lịch sử thay đổi code.
• Quen thuộc với Vue CLI (hoặc Vite) và cách sử dụng dòng lệnh: Đây là những công cụ giúp bạn khởi tạo, phát triển và build ứng dụng VueJS một cách nhanh chóng, chuyên nghiệp.

Bên cạnh đó, việc có kiến thức về các công cụ đóng gói như Webpack/Rollup, hay hiểu cách tương tác với các API RESTful cũng rất quan trọng. Một ứng dụng VueJS thường xuyên cần giao tiếp với backend để lấy và gửi dữ liệu.

Các Tính Năng Chủ Chốt Tạo Nên Sức Hút Của VueJS

Điểm làm cho VueJS được yêu thích chính là những tính năng cốt lõi được thiết kế rất thông minh:

• Data binding (ràng buộc dữ liệu): Khả năng tự động đồng bộ dữ liệu giữa logic ứng dụng và giao diện người dùng một cách linh hoạt, có thể là một chiều hoặc hai chiều.
• Components (thành phần) và khả năng tái sử dụng: Vue khuyến khích việc chia nhỏ giao diện thành các component độc lập, nhỏ gọn, giúp code dễ quản lý và tái sử dụng.
• Transition features (tính năng chuyển đổi): Tạo hiệu ứng động mượt mà khi các phần tử được thêm, xóa hoặc thay đổi trạng thái trong DOM.
• HTML templates (khuôn mẫu HTML): Sử dụng cú pháp HTML quen thuộc để định nghĩa giao diện, nhưng được mở rộng thêm các chỉ thị đặc biệt của Vue.
• Reactivity System (Hệ thống phản ứng): Đây là trái tim của Vue. Nó tự động theo dõi các thay đổi của dữ liệu và cập nhật giao diện mà không cần bạn phải thao tác thủ công.

Đặc biệt, Vue sử dụng một Virtual DOM để tối ưu hóa việc cập nhật giao diện. Thay vì trực tiếp thay đổi DOM thật (thường rất tốn kém về hiệu suất), Vue sẽ tạo ra một bản sao nhẹ của DOM (Virtual DOM), so sánh sự khác biệt giữa trạng thái cũ và mới, sau đó chỉ cập nhật những phần tử DOM thật sự đã thay đổi. Về hệ thống reactivity, Vue 3 đã có một bước tiến lớn với Proxy API, thay thế cho Object.defineProperty() ở Vue 2, mang lại hiệu suất tốt hơn và loại bỏ một số hạn chế của phiên bản trước.

2. Các Khái Niệm Nền Tảng Trong VueJS

Khi ngồi vào bàn phỏng vấn VueJS, những khái niệm cơ bản này sẽ là thứ đầu tiên nhà tuyển dụng muốn bạn nắm vững. Dù ở cấp độ Fresher hay Junior, đây là nền tảng không thể thiếu.

Khởi Tạo Ứng Dụng VueJS: Instance Và Cấu Trúc Cơ Bản

Mọi ứng dụng VueJS đều bắt đầu từ một Vue Instance. Trong Vue 2, chúng ta dùng `new Vue({…})`, còn với Vue 3 và Composition API, bạn sẽ quen thuộc với `createApp({…})`. Instance này chính là “cửa ngõ” để Vue quản lý dữ liệu, phương thức và hành vi của ứng dụng.

Khi khởi tạo, có vài tùy chọn cơ bản mà bạn sẽ thường xuyên dùng:

• `data`: Nơi chứa dữ liệu phản ứng (reactive data) của component.
• `methods`: Nơi định nghĩa các hàm xử lý logic.
• `computed`: Để tạo các thuộc tính tính toán dựa trên `data` khác.
• `watch`: Theo dõi sự thay đổi của một thuộc tính cụ thể và thực hiện một hành động.
• `el`: Phần tử DOM mà Vue Instance sẽ gắn vào và quản lý.

Bạn có thể hình dung một ứng dụng VueJS đơn giản như thế này:

<div id="app">
  <p>Xin chào, {{ message }}</p>
  <button @click="changeMessage">Đổi lời chào</button>
</div>
<script>
  const app = Vue.createApp({ // Hoặc new Vue() cho Vue 2
    data() {
      return {
        message: 'thế giới VueJS!'
      }
    },
    methods: {
      changeMessage() {
        this.message = 'các bạn lập trình viên!'
      }
    }
  });
  app.mount('#app'); // app.$mount('#app') cho Vue 2
</script>

Hiểu Rõ Về Directives (Chỉ Thị) Phổ Biến Trong VueJS

Directives là những thuộc tính đặc biệt có tiền tố `v-` trong HTML của Vue, dùng để áp dụng hành vi đặc biệt cho DOM. Chúng là một phần không thể thiếu khi bạn bắt đầu lập trình VueJS.

• `v-bind`: Dùng để liên kết một thuộc tính HTML với một giá trị trong dữ liệu của Vue. Ví dụ: `` hoặc rút gọn là ``.
• `v-on`: Dùng để lắng nghe các sự kiện DOM và chạy một phương thức khi sự kiện xảy ra. Ví dụ: `` hoặc rút gọn là ``.
• `v-model`: Đây là chỉ thị “hai chiều” quan trọng, dùng để liên kết dữ liệu hai chiều trên các phần tử form như ``, ``, `<select>`. Khi dữ liệu thay đổi, giao diện cập nhật; khi người dùng nhập liệu, dữ liệu cũng được cập nhật. `v-model` thực chất là một cách viết tắt cho `v-bind:value` và `v-on:input` (hoặc `v-on:change` tùy loại input). Nó giúp chúng ta giữ “nguồn đáng tin cậy” (single source of truth) trong `data` của component.</li> <li>`v-show` và `v-if`: Hai chỉ thị này đều dùng để hiển thị/ẩn phần tử, nhưng cách hoạt động lại khác nhau hoàn toàn. <ul> <li>`v-if`: Điều kiện `true` thì phần tử được render vào DOM, `false` thì bị loại bỏ hoàn toàn khỏi DOM. Ưu điểm là tối ưu khi phần tử hiếm khi thay đổi trạng thái, nhược điểm là chi phí render/unrender cao hơn.</li> <li>`v-show`: Phần tử luôn được render vào DOM, nhưng khi điều kiện là `false` thì nó sẽ được áp dụng `display: none` bằng CSS. Ưu điểm là chuyển đổi nhanh, nhược điểm là luôn có trong DOM dù không hiển thị. Bạn nên dùng `v-show` khi phần tử cần chuyển đổi hiển thị thường xuyên, còn `v-if` cho những phần tử ít khi thay đổi.</li> </ul> </li> <li>`v-for`: Dùng để lặp lại các phần tử dựa trên một mảng dữ liệu hoặc một phạm vi số. <ul> <li>Ví dụ: ` <li v-for="item in items">{{ item.name }}</li> <p>`.</li> <li>Khi dùng `v-for`, bạn bắt buộc phải cung cấp một thuộc tính `:key` duy nhất cho mỗi phần tử lặp. `key` giúp Vue theo dõi danh tính của mỗi node trong danh sách. Điều này cực kỳ quan trọng để Vue có thể tối ưu hiệu suất khi danh sách thay đổi (thêm, xóa, sắp xếp lại), và cũng để quản lý trạng thái nội bộ của các component trong danh sách một cách chính xác. Nếu không có `key`, Vue có thể gặp lỗi hoặc cập nhật DOM không hiệu quả.</li> </ul> </li> </ul> <div style="text-align: center; margin: 30px 0;"> <figure class="wp-block-image size-large"> <img decoding="async" src="https://truongcaodangsupham.com/wp-content/uploads/2026/03/image_06-80.png" alt="Hình ảnh trừu tượng dòng chảy dữ liệu tốc độ cao, tối ưu trên đường dẫn kỹ thuật số màu xanh, thể hiện sự hiệu quả và nhanh nhạy cần thiết khi giải quyết các câu hỏi phỏng vấn VueJS." title="Hình ảnh trừu tượng dòng chảy dữ liệu tốc độ cao, tối ưu trên đường dẫn kỹ thuật số màu xanh, thể hiện sự hiệu quả và nhanh nhạy cần thiết khi giải quyết các câu hỏi phỏng vấn VueJS." style="border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); width: 100%; height: auto;"/><figcaption style="font-style: italic; font-size: 14px; color: #555; margin-top: 10px;">Hình ảnh trừu tượng dòng chảy dữ liệu tốc độ cao, tối ưu trên đường dẫn kỹ thuật số màu xanh, thể hiện sự hiệu quả và nhanh nhạy cần thiết khi giải quyết các câu hỏi phỏng vấn VueJS.</figcaption></figure> </p></div> <p>Ngoài ra, còn có các directive khác như `v-text` (thay thế `textContent`), `v-html` (thay thế `innerHTML` – cẩn thận với XSS!), `v-once` (chỉ render một lần rồi thôi), `v-cloak` (giúp ẩn phần tử cho đến khi Vue hoàn thành biên dịch). Thậm chí, bạn còn có thể tạo ra các chỉ thị tùy chỉnh của riêng mình để thêm hành vi đặc biệt cho DOM.</p> <h3>Component Trong VueJS: Xây Dựng Ứng Dụng Mạnh Mẽ</h3> <p>Component là trái tim của mọi ứng dụng VueJS hiện đại. Chúng là những khối xây dựng độc lập, có thể tái sử dụng, giúp bạn chia nhỏ giao diện người dùng thành các phần nhỏ hơn, dễ quản lý và phát triển hơn rất nhiều.</p> <p>Một component trong Vue thường được viết dưới dạng Single File Component (.vue), bao gồm ba phần chính:</p> <ul> <li>`<template>`: Chứa cấu trúc HTML và các chỉ thị của Vue để định nghĩa giao diện.</li> <li>`<script>`: Chứa logic JavaScript, dữ liệu, phương thức của component.</li> <li>`<br /> <style>`: Chứa CSS để tạo kiểu cho component, có thể dùng `scoped` để giới hạn phạm vi CSS chỉ trong component đó.</li> </ul> <p>Để sử dụng component, bạn cần đăng ký chúng. Có hai cách: đăng ký global (dùng được ở mọi nơi trong ứng dụng) hoặc local (chỉ dùng được trong component cha đã đăng ký). Đăng ký local thường được ưu tiên hơn để tránh xung đột tên và giữ cho ứng dụng gọn gàng.</p> <p>Việc truyền dữ liệu giữa các component là một kỹ năng thiết yếu:</p> <ul> <li>`Props`: Đây là cách chính thống để truyền dữ liệu từ component cha xuống component con (parent to child). Props có tính chất "read-only" (chỉ đọc), nghĩa là component con không được phép trực tiếp sửa đổi giá trị của props mà nó nhận được từ cha. Điều này giúp đảm bảo luồng dữ liệu một chiều, dễ theo dõi và debug hơn. Nếu component con cần thay đổi dữ liệu đó, nó phải "yêu cầu" component cha làm điều đó thông qua sự kiện.</li> <li>`Emits` (hoặc custom events): Khi component con muốn "nói chuyện" với component cha, nó sẽ phát ra một sự kiện tùy chỉnh (custom event) thông qua `$emit('eventName', payload)`. Component cha sẽ lắng nghe sự kiện này bằng `v-on:eventName="handleEvent"` và xử lý dữ liệu (payload) được gửi kèm. Đây là cách truyền dữ liệu từ con lên cha (child to parent).</li> <li>`Slots`: Slots cho phép bạn "phân phối" nội dung linh hoạt vào bên trong một component. Thay vì component con tự định nghĩa nội dung bên trong, component cha có thể truyền các khối HTML hoặc component khác vào "slot" của con, giúp component con trở nên linh hoạt và tái sử dụng tốt hơn cho nhiều trường hợp.</li> </ul> <p>Một cặp API khác cũng hữu ích cho việc truyền dữ liệu giữa các component không liền kề là `provide/inject`. `provide` cho phép một component cha "cung cấp" dữ liệu, và bất kỳ component con nào (kể cả con của con) nằm trong cây component đó đều có thể `inject` (tiêm) dữ liệu đó vào mà không cần truyền qua từng cấp props.</p> <h2>3. Quản Lý Dữ Liệu Và Trạng Thái Hiệu Quả</h2> <p>Sau khi nắm vững những khái niệm cơ bản, chúng ta sẽ đi sâu hơn vào cách VueJS xử lý dữ liệu động và các chiến lược quản lý trạng thái, đây là những <strong>câu hỏi phỏng vấn VueJS</strong> nâng cao hơn một chút.</p> <h3>Props: Giao Tiếp Giữa Các Thành Phần</h3> <p>Như đã đề cập, Props là kênh giao tiếp chính từ cha xuống con. Để đảm bảo tính rõ ràng và tránh lỗi, việc định nghĩa Props một cách chi tiết là rất quan trọng.</p> <ul> <li>Mỗi prop có thể được định nghĩa với kiểu dữ liệu mong muốn (String, Number, Boolean, Array, Object, Function, Symbol).</li> <li>Bạn có thể đánh dấu một prop là `required: true` nếu nó bắt buộc phải có.</li> <li>Cũng có thể gán giá trị mặc định (`default`) cho prop nếu nó không được truyền từ cha.</li> <li>Vue còn cho phép bạn thêm `validator` cho props. Đây là một hàm nhận giá trị của prop làm đối số và trả về `true` nếu giá trị hợp lệ, `false` nếu không. Rất hữu ích để kiểm tra dữ liệu đầu vào.</li> </ul> <p>Ví dụ, bạn có một component `UserProfile` nhận vào `user` object và `showDetails` boolean:</p> <pre><code> // Trong component con UserProfile.vue export default { props: { user: { type: Object, required: true, validator: (value) => { return value.name && value.email; // Đảm bảo có name và email } }, showDetails: { type: Boolean, default: false } } } </code></pre> <h3>Các Phương Thức Xử Lý Mảng: Mutation Và Non-Mutation</h3> <p>Khi làm việc với mảng trong Vue, việc hiểu rõ sự khác biệt giữa các phương thức đột biến (mutation) và không đột biến (non-mutation) là rất quan trọng để đảm bảo tính phản ứng của ứng dụng.</p> <ul> <li>Phương thức đột biến (mutation methods): Đây là những phương thức làm thay đổi trực tiếp mảng gốc. Vue đã "patch" các phương thức này để chúng có thể kích hoạt cập nhật giao diện một cách tự động. <ul> <li>Ví dụ: `push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `sort()`, `reverse()`.</li> <li>Khi bạn gọi `items.push(newItem)`, Vue sẽ phát hiện sự thay đổi và cập nhật DOM tương ứng.</li> </ul> </li> <li>Phương thức không đột biến (non-mutation methods): Những phương thức này không thay đổi mảng gốc mà trả về một mảng mới. Để kích hoạt tính phản ứng của Vue, bạn cần gán mảng mới này trở lại một thuộc tính dữ liệu. <ul> <li>Ví dụ: `filter()`, `concat()`, `slice()`.</li> <li>Nếu bạn có `this.myArray = this.myArray.filter(item => item.isActive)`, Vue sẽ thấy `myArray` đã được gán một giá trị mới và kích hoạt cập nhật. Nếu chỉ gọi `this.myArray.filter(...)` mà không gán lại, Vue sẽ không biết mảng đã thay đổi.</li> </ul> </li> </ul> <p>Lý do chúng ta cần phân biệt điều này là vì Vue 2 có một số hạn chế trong việc phát hiện sự thay đổi của mảng khi bạn trực tiếp gán giá trị cho một index (ví dụ: `arr[index] = newValue`) hoặc thay đổi độ dài mảng (ví dụ: `arr.length = newLength`). Để khắc phục, Vue cung cấp `Vue.set(array, index, value)` hoặc `this.$set(array, index, value)` (trong Vue 2) để đảm bảo tính phản ứng. Với Vue 3 và Proxy API, những hạn chế này đã được loại bỏ, giúp việc làm việc với mảng trở nên tự nhiên hơn.</p> <h3>`Computed Properties` vs. `Watchers`: Khi Nào Sử Dụng Cái Nào?</h3> <p>Đây là một trong những <strong>câu hỏi phỏng vấn VueJS</strong> kinh điển và rất quan trọng để thể hiện bạn hiểu sâu về Vue.</p> <ul> <li>`Computed Properties`: <ul> <li>Định nghĩa: Là các thuộc tính được tính toán dựa trên dữ liệu hiện có (data hoặc props).</li> <li>Mục đích: Dùng khi bạn cần tính toán một giá trị mới từ các giá trị đã có, và giá trị này chỉ cần được tính lại khi các "dependencies" (phụ thuộc) của nó thay đổi.</li> <li>Tính năng caching: Đây là điểm mạnh lớn nhất của `computed`. Nó chỉ chạy lại hàm tính toán khi các biến mà nó phụ thuộc vào thay đổi. Nếu các dependencies không thay đổi, nó sẽ trả về giá trị đã cache, giúp tối ưu hiệu suất.</li> </ul> </li> <li>`Watchers`: <ul> <li>Định nghĩa: Là một cách để theo dõi sự thay đổi của một thuộc tính dữ liệu cụ thể (data hoặc props) và thực hiện một tác vụ bất đồng bộ hoặc phức tạp khi thuộc tính đó thay đổi.</li> <li>Mục đích: Thích hợp khi bạn cần thực hiện các tác vụ phụ thuộc vào sự thay đổi của một biến, như gọi API, thực hiện các thao tác DOM phức tạp, hoặc đặt hẹn giờ.</li> <li>Options: `deep: true` để theo dõi sự thay đổi bên trong các đối tượng hoặc mảng lồng nhau. `immediate: true` để chạy watcher ngay lập tức khi component được tạo.</li> </ul> </li> </ul> <p>Tóm lại, hãy dùng `computed` khi bạn cần một giá trị được tính toán và có thể cache, và dùng `watchers` khi bạn cần thực hiện các tác vụ phụ bất đồng bộ hoặc phức tạp mỗi khi một biến thay đổi. Sử dụng đúng loại sẽ giúp code của bạn rõ ràng, hiệu quả và dễ bảo trì hơn.</p> <p>Trong Vue 3 với Composition API, `ref` và `reactive` là cách mới để khai báo dữ liệu phản ứng. `computed` vẫn hoạt động tương tự, nhưng `watch` giờ đây có các biến thể như `watch` và `watchEffect` cho các trường hợp sử dụng linh hoạt hơn.</p> <div style="text-align: center; margin: 30px 0;"> <figure class="wp-block-image size-large"> <img decoding="async" src="https://truongcaodangsupham.com/wp-content/uploads/2026/03/image_05-79.png" alt="Hệ thống quản lý trạng thái kỹ thuật số với lõi phát sáng và các module liên kết, minh họa kiến trúc phức tạp cho các câu hỏi phỏng vấn VueJS." title="Hệ thống quản lý trạng thái kỹ thuật số với lõi phát sáng và các module liên kết, minh họa kiến trúc phức tạp cho các câu hỏi phỏng vấn VueJS." style="border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); width: 100%; height: auto;"/><figcaption style="font-style: italic; font-size: 14px; color: #555; margin-top: 10px;">Hệ thống quản lý trạng thái kỹ thuật số với lõi phát sáng và các module liên kết, minh họa kiến trúc phức tạp cho các câu hỏi phỏng vấn VueJS.</figcaption></figure> </p></div> <h3>Quản Lý Trạng Thái Toàn Cục Với Thư Viện Chuyên Biệt (Vuex / Pinia)</h3> <p>Khi ứng dụng của bạn trở nên lớn hơn, việc truyền dữ liệu qua lại giữa các component xa nhau bằng props/emits sẽ rất rắc rối (prop drilling). Lúc này, chúng ta cần một giải pháp quản lý trạng thái toàn cục.</p> <ul> <li>Tại sao cần quản lý trạng thái toàn cục? Nó giúp tập trung tất cả trạng thái chia sẻ của ứng dụng vào một nơi duy nhất (store), làm cho việc quản lý, truy cập và thay đổi trạng thái trở nên dự đoán được và dễ debug hơn.</li> <li>Vuex (cho Vue 2 và Vue 3): <ul> <li>Là một thư viện quản lý trạng thái cho VueJS, dựa trên kiến trúc Flux/Redux.</li> <li>Các thành phần chính: <ul> <li>`State`: Trạng thái thực tế của ứng dụng, là nguồn dữ liệu duy nhất.</li> <li>`Getters`: Dùng để truy cập các giá trị đã qua xử lý từ `state`. Giống như `computed properties` cho `state`.</li> <li>`Mutations`: Là cách duy nhất để thay đổi `state` một cách đồng bộ. Mỗi mutation có một type (tên) và một handler function.</li> <li>`Actions`: Chứa logic bất đồng bộ (gọi API) và sau đó commit các `mutations` để thay đổi `state`.</li> </ul> </li> <li>Luồng dữ liệu trong Vuex là một chiều và rất rõ ràng: View -> Actions -> Mutations -> State -> View.</li> </ul> </li> <li>Pinia (cho Vue 3): <ul> <li>Pinia được coi là "người kế nhiệm" chính thức của Vuex cho Vue 3.</li> <li>Ưu điểm nổi bật: Nhẹ hơn, sử dụng Composition API thân thiện, hỗ trợ typing tốt hơn với TypeScript (điều mà Vuex 4 còn hạn chế), và không có khái niệm `mutations` phức tạp.</li> <li>Cấu trúc cơ bản của Pinia store: Rất giống với Options API hoặc Composition API của Vue component, với `state`, `getters`, và `actions`. Mọi thứ đơn giản và trực quan hơn.</li> </ul> </li> </ul> <p>Ví dụ ngắn gọn: để truy cập trạng thái, bạn có thể dùng `$store.state.count` (Vuex) hoặc `store.count` (Pinia). Để thay đổi, bạn gọi `this.$store.dispatch('increment')` (Vuex action) hoặc `store.increment()` (Pinia action). Việc hiểu rõ và biết cách áp dụng các thư viện này là một điểm cộng lớn trong các buổi <strong>phỏng vấn VueJS</strong> nâng cao.</p> <h2>4. Vòng Đời Component Và Xử Lý Sự Kiện</h2> <p>Một lập trình viên <strong>lập trình VueJS</strong> chuyên nghiệp cần phải hiểu rõ các giai đoạn mà một component trải qua (lifecycle) và cách tương tác với người dùng qua sự kiện. Đây là những kiến thức cơ bản nhưng rất quan trọng.</p> <h3>Các Giai Đoạn Vòng Đời Của Component (Lifecycle Hooks)</h3> <p>Mỗi component VueJS đều trải qua một chu trình sống từ khi được tạo ra đến khi bị hủy bỏ. Vue cung cấp các "hooks" (điểm móc) để chúng ta có thể can thiệp và thực hiện các tác vụ ở những giai đoạn cụ thể. Hãy cùng xem xét các hook chính, cả trong Options API (Vue 2/3) và Composition API (Vue 3).</p> <ul> <li>**Initialization (Khởi tạo):** <ul> <li>`beforeCreate()` (Options API): Được gọi ngay sau khi instance được khởi tạo, nhưng `data` và `events` chưa được thiết lập. Bạn không thể truy cập `data` hoặc `methods` ở đây.</li> <li>`created()` (Options API): `data` và `events` đã được thiết lập, nhưng component chưa được gắn vào DOM. Đây là nơi lý tưởng để gọi các API hoặc thực hiện các tác vụ khởi tạo dữ liệu.</li> <li>`setup()` (Composition API): Hàm chính trong Composition API, được gọi trước `beforeCreate` và `created`. Mọi logic (data, methods, computed, watchers) đều được khai báo ở đây.</li> </ul> </li> <li>**Mounting (Gắn kết vào DOM):** <ul> <li>`beforeMount()` (Options API): Template đã được biên dịch, nhưng component chưa được gắn vào DOM. Bạn không thể truy cập DOM thật ở đây.</li> <li>`mounted()` (Options API): Component đã được gắn hoàn toàn vào DOM. Bạn có thể truy cập các phần tử DOM thông qua `$refs` ở đây. Đây là nơi thích hợp để thực hiện các thao tác DOM trực tiếp hoặc tích hợp các thư viện bên thứ ba cần DOM.</li> <li>`onBeforeMount()` (Composition API): Tương đương `beforeMount`.</li> <li>`onMounted()` (Composition API): Tương đương `mounted`.</li> </ul> </li> <li>**Updating (Cập nhật):** <ul> <li>`beforeUpdate()` (Options API): Được gọi khi dữ liệu phản ứng thay đổi và Vue chuẩn bị cập nhật DOM. Bạn có thể thay đổi dữ liệu ở đây trước khi DOM được render lại.</li> <li>`updated()` (Options API): DOM đã được cập nhật do dữ liệu thay đổi. Bạn có thể thực hiện các thao tác DOM sau khi cập nhật ở đây. Cẩn thận không thay đổi dữ liệu phản ứng trực tiếp trong hook này để tránh vòng lặp vô hạn.</li> <li>`onBeforeUpdate()` (Composition API): Tương đương `beforeUpdate`.</li> <li>`onUpdated()` (Composition API): Tương đương `updated`.</li> </ul> </li> <li>**Unmounting (Hủy bỏ):** <ul> <li>`beforeUnmount()` (Options API - Vue 3) / `beforeDestroy()` (Options API - Vue 2): Component sắp bị hủy bỏ. Đây là nơi để dọn dẹp các tài nguyên như bộ hẹn giờ (timers), lắng nghe sự kiện DOM thủ công hoặc hủy đăng ký các listener.</li> <li>`unmounted()` (Options API - Vue 3) / `destroyed()` (Options API - Vue 2): Component đã bị hủy hoàn toàn khỏi DOM. Mọi sự kiện lắng nghe, directives, component con đều đã bị gỡ bỏ.</li> <li>`onBeforeUnmount()` (Composition API): Tương đương `beforeUnmount`.</li> <li>`onUnmounted()` (Composition API): Tương đương `unmounted`.</li> </ul> </li> </ul> <p>Hiểu rõ vòng đời giúp bạn đặt đúng logic vào đúng chỗ, tránh các lỗi về hiệu suất và rò rỉ bộ nhớ.</p> <h3>Xử Lý Sự Kiện Với `v-on` Và Modifier Keys</h3> <p>`v-on` (hoặc cú pháp rút gọn `@`) là chỉ thị dùng để lắng nghe các sự kiện DOM và chạy một phương thức khi sự kiện xảy ra. Đây là cách chính để tương tác với người dùng trong ứng dụng Vue.</p> <ul> <li>Cú pháp `v-on`: Bạn có thể liên kết một phương thức hoặc một biểu thức JavaScript. Ví dụ: `<button @click="incrementCount">` hoặc `<button @click="count++">`.</li> <li>Các tham số sự kiện đặc biệt (`$event`): Khi một sự kiện được kích hoạt, trình duyệt sẽ cung cấp một đối tượng sự kiện. Bạn có thể truy cập nó bằng `$event` nếu muốn. Ví dụ: `<input @input="handleInput($event.target.value)">`.</li> <li>Các System Modifier Keys: Vue cung cấp các modifier để chỉ kích hoạt trình xử lý sự kiện khi một phím hệ thống cụ thể được giữ. <ul> <li>`.ctrl`, `.shift`, `.alt`, `.meta` (phím Command trên macOS).</li> <li>`.exact`: Chỉ kích hoạt khi không có bất kỳ phím hệ thống nào khác được giữ.</li> <li>Ví dụ: ` <div @click.ctrl="doSomething">` sẽ chỉ chạy khi bạn click trong khi giữ phím Ctrl.</li> </ul> </li> <li>Các Event Modifier: Đây là những "điểm dừng" hoặc "bộ lọc" cho sự kiện, giúp bạn kiểm soát hành vi mặc định của trình duyệt hoặc quá trình lan truyền sự kiện. <ul> <li>`.stop`: Gọi `event.stopPropagation()`, ngăn sự kiện nổi bọt lên các phần tử cha.</li> <li>`.prevent`: Gọi `event.preventDefault()`, ngăn hành vi mặc định của trình duyệt (ví dụ: gửi form, reload trang khi click link).</li> <li>`.capture`: Sử dụng chế độ capture (giai đoạn bắt sự kiện) thay vì chế độ bubbling (nổi bọt).</li> <li>`.self`: Chỉ kích hoạt trình xử lý nếu sự kiện được phát ra từ chính phần tử đó, không phải từ phần tử con của nó.</li> <div style="text-align: center; margin: 30px 0;"> <figure class="wp-block-image size-large"> <img decoding="async" src="https://truongcaodangsupham.com/wp-content/uploads/2026/03/image_04-80.png" alt="Cấu trúc ánh sáng tinh thể phát triển từ hình cầu đơn giản đến mạng lưới phức tạp trên nền tối, minh họa hành trình phát triển và làm chủ kiến thức. Lý tưởng cho việc học và ôn tập câu hỏi phỏng vấn VueJS chuyên sâu." title="Cấu trúc ánh sáng tinh thể phát triển từ hình cầu đơn giản đến mạng lưới phức tạp trên nền tối, minh họa hành trình phát triển và làm chủ kiến thức. Lý tưởng cho việc học và ôn tập câu hỏi phỏng vấn VueJS chuyên sâu." style="border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); width: 100%; height: auto;"/><figcaption style="font-style: italic; font-size: 14px; color: #555; margin-top: 10px;">Cấu trúc ánh sáng tinh thể phát triển từ hình cầu đơn giản đến mạng lưới phức tạp trên nền tối, minh họa hành trình phát triển và làm chủ kiến thức. Lý tưởng cho việc học và ôn tập câu hỏi phỏng vấn VueJS chuyên sâu.</figcaption></figure> </p></div> <li>`.once`: Trình xử lý sự kiện chỉ được gọi một lần duy nhất.</li> <li>`.passive`: Cho biết trình xử lý sự kiện sẽ không gọi `preventDefault()`, giúp cải thiện hiệu suất cuộn trang.</li> </ul> </li> </ul> <p>Một kỹ năng quan trọng khác là cách xử lý sự kiện tùy chỉnh (custom events) và `emit` giữa các component con và cha, như đã nói ở mục Component. Nó giúp tạo ra luồng dữ liệu rõ ràng hơn, rất cần thiết cho việc <strong>phỏng vấn VueJS</strong> cấp độ Senior.</p> <h2>5. Các Công Cụ Và Tính Năng Nâng Cao Trong VueJS</h2> <p>Để xây dựng và triển khai những ứng dụng <strong>lập trình VueJS</strong> mạnh mẽ, chúng ta cần nắm rõ các công cụ và tính năng nâng cao này. Chúng giúp bạn tối ưu hóa quy trình phát triển và mở rộng ứng dụng.</p> <h3>Cài Đặt Và Triển Khai Ứng Dụng VueJS</h3> <p>Việc bắt đầu một dự án VueJS có nhiều cách, tùy thuộc vào quy mô và yêu cầu:</p> <ul> <li>Node Package Manager (NPM / Yarn): Đây là phương pháp phổ biến nhất. Bạn cài đặt VueJS và các thư viện liên quan thông qua `npm install vue` hoặc `yarn add vue`.</li> <li>CDN (Content Delivery Network): Cách nhanh nhất để nhúng Vue vào một dự án HTML/JavaScript nhỏ. Bạn chỉ cần thêm một thẻ `<script>` trỏ đến CDN của Vue. Thường dùng cho các prototyping hoặc ứng dụng rất đơn giản.</li> <li>Vue CLI (hoặc Vite): Đây là những công cụ dòng lệnh chính thức để tạo các dự án VueJS từ đầu. <ul> <li>Vue CLI cung cấp một hệ sinh thái đầy đủ với cấu hình Webpack mặc định, khả năng thêm plugin và cấu hình tùy chỉnh dễ dàng.</li> <li>Vite là một build tool thế hệ mới, tập trung vào tốc độ phát triển. Nó sử dụng ES native modules để cung cấp hot module replacement (HMR) cực nhanh, giúp thời gian khởi động server và cập nhật code gần như tức thì. Đối với Vue 3, Vite là lựa chọn được khuyến khích.</li> </ul> </li> </ul> <p>Khi triển khai ứng dụng, bạn sẽ cần các lệnh như `npm run build` hoặc `yarn build`. Lệnh này sẽ biên dịch code của bạn thành các tệp tĩnh tối ưu hóa (HTML, CSS, JS) sẵn sàng cho môi trường production. Việc tối ưu hóa bao gồm minification (nén code), tree-shaking (loại bỏ code không dùng), code splitting (chia nhỏ các file JS), giúp ứng dụng tải nhanh hơn rất nhiều.</p> <p>Plugin là cách để thêm chức năng toàn cục vào ứng dụng VueJS. Chúng thường là các đối tượng hoặc hàm cung cấp một số tính năng `install()`.</p> <ul> <li>Khái niệm: Một plugin có thể thêm methods vào Vue Instance, thêm components toàn cục, thêm directives, hoặc thêm một bộ chức năng khác.</li> <li>Lợi ích: Giúp đóng gói các chức năng tái sử dụng, dễ dàng tích hợp vào nhiều dự án khác nhau và quản lý dependency tốt hơn.</li> <li>Cách sử dụng: Để sử dụng một plugin, bạn gọi `Vue.use(MyPlugin)` (Vue 2) hoặc `app.use(MyPlugin)` (Vue 3).</li> </ul> <p>Ví dụ về các plugin phổ biến: Vue Router (quản lý định tuyến), Vuex/Pinia (quản lý trạng thái), VeeValidate (xác thực form). Bạn cũng hoàn toàn có thể tự tạo plugin của riêng mình để đóng gói một tập hợp các hàm tiện ích hoặc một bộ component dùng chung cho nhiều dự án.</p> <h3>Mixins: Tái Sử Dụng Logic Component</h3> <p>Mixins là một cách truyền thống (trong Options API) để tái sử dụng logic trong các component Vue. Một mixin là một đối tượng chứa các tùy chọn component (như `data`, `methods`, `computed`, `lifecycle hooks`) mà bạn có thể "trộn" vào một component khác.</p> <ul> <li>Lợi ích: Giúp chia sẻ logic và chức năng giữa nhiều component mà không cần lặp lại code.</li> <li>Cách sử dụng: Bạn định nghĩa một mixin object, sau đó thêm nó vào tùy chọn `mixins` của component.</li> </ul> <pre><code> // myMixin.js export const myMixin = { data() { return { message: 'Hello from mixin!' } }, methods: { logMessage() { console.log(this.message); } }, created() { console.log('Mixin created hook called.'); } } // MyComponent.vue import { myMixin } from './myMixin'; export default { mixins: [myMixin], data() { return { componentMessage: 'Hello from component!' } }, created() { console.log('Component created hook called.'); this.logMessage(); // Gọi method từ mixin } } </code></pre> <p>Về xung đột mixin: Nếu một mixin và component có cùng tên thuộc tính (`data`, `methods`), component sẽ ưu tiên giá trị của nó. Đối với các hook vòng đời, cả hai sẽ được gọi. Nhược điểm chính của mixins là khó theo dõi nguồn gốc của một thuộc tính hoặc method, và có thể dẫn đến xung đột tên không mong muốn. Trong Vue 3, Composition API được khuyến khích hơn để tái sử dụng logic vì nó giải quyết các vấn đề này tốt hơn, mang lại khả năng tái sử dụng rõ ràng và ít gây xung đột hơn thông qua các "composable functions". Khi đi sâu vào <strong>câu hỏi phỏng vấn VueJS</strong> về kiến trúc, đây là điểm bạn nên biết để so sánh.</p> <h3>Vue Router: Quản Lý Định Tuyến Trong Ứng Dụng Đa Trang</h3> <p>Đối với các ứng dụng một trang (SPA), chúng ta cần một thư viện để quản lý việc chuyển đổi giữa các "trang" mà không cần tải lại toàn bộ trình duyệt. Đó chính là vai trò của Vue Router.</p> <ul> <li>Tại sao cần Vue Router: SPA tải toàn bộ ứng dụng một lần, và Vue Router giúp chúng ta ánh xạ các URL khác nhau đến các component Vue khác nhau, tạo cảm giác như đang điều hướng giữa các trang truyền thống.</li> <li>Khái niệm: <ul> <li>`Routes`: Các đối tượng định nghĩa đường dẫn URL và component tương ứng.</li> <li>`Router Link`: Component dùng để tạo các liên kết điều hướng trong ứng dụng (thay thế thẻ `<a>`).</li> <li>`Router View`: Component dùng để hiển thị component tương ứng với route hiện tại.</li> </ul> </li> <li>Cấu hình định tuyến cơ bản: Bạn định nghĩa một mảng các route, mỗi route có `path` và `component`.</li> <li>Dynamic Routing (định tuyến động): Cho phép bạn tạo các route với các tham số động (ví dụ: `/users/:id`), giúp hiển thị nội dung khác nhau dựa trên ID.</li> <li>Nested Routing (định tuyến lồng): Cho phép bạn có các route con bên trong một route cha, tạo ra các layout phức tạp hơn.</li> <li>Navigation Guards (các bộ bảo vệ điều hướng): Các hàm có thể được gọi trước khi một route được vào, rời khỏi, hoặc được cập nhật. Rất hữu ích cho việc kiểm tra quyền truy cập, xác thực người dùng.</li> </ul> <div style="text-align: center; margin: 30px 0;"> <figure class="wp-block-image size-large"> <img decoding="async" src="https://truongcaodangsupham.com/wp-content/uploads/2026/03/image_03-80.png" alt="Mạch kỹ thuật số trừu tượng phát sáng minh họa luồng dữ liệu mượt mà và hệ thống phản ứng, gợi nhớ đến cấu trúc phức tạp cần nắm vững khi đối mặt với các câu hỏi phỏng vấn VueJS." title="Mạch kỹ thuật số trừu tượng phát sáng minh họa luồng dữ liệu mượt mà và hệ thống phản ứng, gợi nhớ đến cấu trúc phức tạp cần nắm vững khi đối mặt với các câu hỏi phỏng vấn VueJS." style="border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); width: 100%; height: auto;"/><figcaption style="font-style: italic; font-size: 14px; color: #555; margin-top: 10px;">Mạch kỹ thuật số trừu tượng phát sáng minh họa luồng dữ liệu mượt mà và hệ thống phản ứng, gợi nhớ đến cấu trúc phức tạp cần nắm vững khi đối mặt với các câu hỏi phỏng vấn VueJS.</figcaption></figure> </p></div> <p>Một tính năng tối ưu hiệu suất quan trọng là Lazy Loading Routes. Thay vì tải tất cả các component của tất cả các route ngay từ đầu, bạn có thể cấu hình để chỉ tải một component khi route của nó được truy cập, giúp giảm kích thước bundle ban đầu và cải thiện thời gian tải trang.</p> <h3>Composition API (Vue 3): Cách Tiếp Cận Mới Để Tổ Chức Code</h3> <p>Composition API là một trong những thay đổi lớn nhất và quan trọng nhất trong Vue 3, mang đến một cách tiếp cận hoàn toàn mới để tổ chức và tái sử dụng code trong các component.</p> <ul> <li>Giới thiệu: Composition API giải quyết các vấn đề về tổ chức code trong các component lớn (đặc biệt là Options API gặp vấn đề với "logic Options dispersion") và cải thiện khả năng tái sử dụng logic. Thay vì nhóm code theo các tùy chọn (`data`, `methods`, `computed`), bạn nhóm code theo tính năng logic.</li> <li>Các hàm chính: <ul> <li>`setup()`: Hàm chính để sử dụng Composition API. Mọi logic phản ứng và hàm đều được khai báo và trả về từ hàm này.</li> <li>`ref()`: Tạo một biến phản ứng có thể chứa bất kỳ kiểu giá trị nào (kiểu nguyên thủy hoặc đối tượng). Khi truy cập trong `setup()`, cần `.value`.</li> <li>`reactive()`: Tạo một đối tượng phản ứng chỉ chứa các đối tượng (không dùng cho kiểu nguyên thủy).</li> <li>`computed()`: Tương tự như computed trong Options API, nhưng được sử dụng như một hàm.</li> <li>`watch()`: Tương tự như watcher trong Options API, dùng để theo dõi sự thay đổi của một hoặc nhiều ref/reactive.</li> <li>`watchEffect()`: Tự động theo dõi các phụ thuộc và chạy lại khi chúng thay đổi.</li> </ul> </li> <li>So sánh với Options API truyền thống: Options API dễ học hơn cho người mới bắt đầu với các component nhỏ. Nhưng với các component phức tạp, code có thể bị phân tán qua nhiều tùy chọn. Composition API cho phép bạn nhóm tất cả logic liên quan đến một tính năng cụ thể (ví dụ: authentication, form handling) lại với nhau, cải thiện khả năng đọc, bảo trì và tái sử dụng.</li> </ul> <p>Việc nắm vững Composition API sẽ giúp bạn có một lợi thế lớn trong các buổi <strong>phỏng vấn VueJS</strong> hiện tại, vì nó đang trở thành tiêu chuẩn cho các dự án Vue 3.</p> <h2>6. So Sánh, Tối Ưu Hóa Và Bảo Mật Với VueJS</h2> <p>Để trở thành một chuyên gia thực thụ, bạn không chỉ cần biết cách <strong>lập trình VueJS</strong> mà còn phải hiểu sâu về vị thế của nó trong hệ sinh thái frontend, cách tối ưu hiệu suất và đảm bảo an toàn cho ứng dụng của mình.</p> <h3>So Sánh VueJS Với Các Framework Frontend Phổ Biến Khác (Đặc Biệt Là ReactJS)</h3> <p>Đây là một câu hỏi thường gặp trong các buổi phỏng vấn. Bạn cần nắm được điểm mạnh, yếu của Vue khi đặt cạnh những đối thủ lớn.</p> <ul> <li>Những điểm tương đồng giữa VueJS và ReactJS: <ul> <li>Cả hai đều dựa trên kiến trúc component-based, giúp chia nhỏ giao diện thành các phần có thể tái sử dụng.</li> <li>Cả hai đều sử dụng Virtual DOM để tối ưu hóa việc cập nhật giao diện.</li> <li>Đều tập trung vào phát triển giao diện người dùng và cần các thư viện ngoài (như Vue Router/React Router, Vuex/Redux) cho việc quản lý định tuyến và trạng thái.</li> </ul> </li> <li>Ưu điểm của VueJS so với ReactJS: <ul> <li>Kích thước nhẹ hơn, tốc độ render nhanh hơn: Mặc dù React cũng rất nhanh, Vue thường được biết đến với kích thước bundle nhỏ hơn và trong một số trường hợp cụ thể, có thể có hiệu suất render tốt hơn.</li> <li>Templates thân thiện với HTML truyền thống: Vue sử dụng các file `.vue` với `<template>` quen thuộc với HTML, giúp những lập trình viên quen với HTML/CSS dễ tiếp cận hơn. React sử dụng JSX, đòi hỏi một tư duy lập trình khác, pha trộn HTML vào JavaScript.</li> <li>Cú pháp JavaScript đơn giản, dễ học hơn: Đường cong học tập của Vue thường được đánh giá là thoải hơn React.</li> <li>Hệ thống reactivity tích hợp: Vue có hệ thống reactivity "out-of-the-box" mạnh mẽ, tự động theo dõi và cập nhật giao diện khi dữ liệu thay đổi. React yêu cầu bạn quản lý trạng thái thủ công hơn với `useState`, `useEffect`.</li> </ul> </li> </ul> <p>Thực tế, không có framework nào là "tốt nhất" cho mọi trường hợp. Angular, một framework khác từ Google, là một framework "toàn diện" (opinionated) hơn, cung cấp nhiều tính năng tích hợp sẵn (routing, state management, http client) nhưng cũng có đường cong học tập dốc hơn. Việc lựa chọn VueJS, ReactJS hay Angular thường phụ thuộc vào yêu cầu dự án, kinh nghiệm của đội ngũ và hệ sinh thái công cụ mà bạn muốn sử dụng.</p> <h3>Đảm Bảo Ứng Dụng VueJS Tuân Thủ Chính Sách Bảo Mật Nội Dung (CSP)</h3> <p>Bảo mật luôn là yếu tố hàng đầu. Chính sách Bảo mật Nội dung (Content Security Policy - CSP) là một lớp bảo mật giúp ngăn chặn các cuộc tấn công chèn mã độc cross-site scripting (XSS) và các cuộc tấn công chèn dữ liệu khác.</p> <ul> <li>CSP là gì và tại sao nó quan trọng: CSP cho phép bạn xác định các nguồn đáng tin cậy cho tài nguyên của ứng dụng (script, style, hình ảnh, v.v.). Trình duyệt sẽ chỉ thực thi hoặc tải tài nguyên từ các nguồn đó.</li> <li>Cách VueJS xử lý CSP: <ul> <li>Vue có hai phiên bản build: "full build" bao gồm trình biên dịch template runtime (cho phép bạn viết template trực tiếp trong HTML) và "runtime-only build" không bao gồm nó.</li> <li>Với CSP nghiêm ngặt, việc sử dụng "full build" thường bị cấm vì nó có thể yêu cầu `unsafe-eval` cho trình biên dịch JIT, điều này không an toàn.</li> <li>Giải pháp: Luôn sử dụng "runtime-only build" kết hợp với các công cụ build như Webpack + `vue-loader` hoặc Browserify + `vueify` để biên dịch template trước khi gửi đến trình duyệt.</li> </ul> </li> <li>Các phương pháp để đảm bảo ứng dụng VueJS tuân thủ CSP: <ul> <li>Thêm CSP policy vào HTML template của bạn thông qua thẻ `<meta http-equiv="Content-Security-Policy" content="...">` hoặc thông qua HTTP header.</li> <li>Đối với các script và style nội tuyến (inline), bạn cần sử dụng thuộc tính `nonce` (một giá trị ngẫu nhiên dùng một lần) hoặc hàm băm (hash) để CSP có thể xác minh chúng là an toàn.</li> </ul> </li> </ul> <p>Ngoài CSP, hãy luôn chú ý đến các biện pháp bảo mật frontend khác như phòng chống XSS (bằng cách luôn sanitize input và sử dụng `v-text` thay vì `v-html`), CSRF, và đảm bảo các API bạn gọi được bảo vệ đúng cách.</p> <h3>Tối Ưu Hiệu Suất Ứng Dụng VueJS</h3> <p>Hiệu suất là chìa khóa để giữ chân người dùng. Có nhiều kỹ thuật giúp bạn tối ưu hóa một ứng dụng VueJS.</p> <ul> <li>Kỹ thuật Lazy Loading (component, route): Thay vì tải tất cả code ngay từ đầu, bạn chỉ tải những gì cần thiết khi cần. Ví dụ, tải component hoặc toàn bộ route khi người dùng truy cập lần đầu.</li> <li>Tối ưu hóa hình ảnh và tài nguyên tĩnh: Nén hình ảnh, sử dụng các định dạng hiệu quả (WebP), lazy load hình ảnh, dùng CDN.</li> <li>Sử dụng `v-once` cho các phần tử không thay đổi: Nếu một phần tử HTML hoặc component con có nội dung không bao giờ thay đổi sau lần render đầu tiên, `v-once` sẽ giúp Vue bỏ qua việc theo dõi reactivity cho phần tử đó, tiết kiệm tài nguyên.</li> <li>Sử dụng `keep-alive` cho các component được dùng lại nhiều lần: `keep-alive` là một component tích hợp sẵn giúp cache các component động không hoạt động, giữ lại trạng thái của chúng khi chuyển đổi. Khi component đó được hiển thị lại, nó sẽ được render lại từ cache thay vì tạo mới, giúp tăng tốc độ chuyển đổi.</li> <li>Tối ưu hóa các vòng lặp `v-for` với `key` hiệu quả: Như đã đề cập, `key` giúp Vue theo dõi các phần tử trong danh sách và tối ưu hóa việc cập nhật DOM. Đảm bảo `key` là duy nhất và ổn định.</li> <li>Giảm thiểu số lượng Watchers và Computed không cần thiết: Mỗi watcher hoặc computed property đều có chi phí. Hãy đảm bảo bạn chỉ sử dụng chúng khi thực sự cần thiết.</li> </ul> <p>Bên cạnh đó, việc sử dụng công cụ Vue DevTools để phân tích hiệu suất (component rendering, reactivity) là rất quan trọng. Đối với các ứng dụng lớn cần SEO tốt và thời gian tải ban đầu nhanh, bạn có thể cân nhắc Server-Side Rendering (SSR) với Nuxt.js.</p> <h3>Testing (Kiểm Thử) Ứng Dụng VueJS</h3> <p>Testing là một phần không thể thiếu trong quy trình phát triển phần mềm chuyên nghiệp, giúp đảm bảo chất lượng và giảm thiểu lỗi.</p> <ul> <li>Tại sao cần testing: Giúp phát hiện lỗi sớm, đảm bảo các tính năng hoạt động như mong đợi, cung cấp tài liệu cho code, và tạo sự tự tin khi thay đổi hoặc refactor code.</li> <li>Các loại testing: <ul> <li>Unit Test: Kiểm thử các đơn vị code nhỏ nhất (hàm, component riêng lẻ) một cách độc lập.</li> <li>Integration Test: Kiểm thử sự tương tác giữa nhiều đơn vị code hoặc component với nhau.</li> <li>End-to-End Test (E2E): Kiểm thử toàn bộ luồng ứng dụng từ góc độ người dùng, mô phỏng cách người dùng tương tác với giao diện.</li> </ul> </li> <li>Giới thiệu các thư viện testing phổ biến: <ul> <div style="text-align: center; margin: 30px 0;"> <figure class="wp-block-image size-large"> <img decoding="async" src="https://truongcaodangsupham.com/wp-content/uploads/2026/03/image_02-80.png" alt="Cấu trúc phức tạp từ các khối hình học trong suốt màu xanh lam, xanh lục, minh họa nguyên tắc mô-đun và tái sử dụng – kiến thức cốt lõi cho các câu hỏi phỏng vấn VueJS." title="Cấu trúc phức tạp từ các khối hình học trong suốt màu xanh lam, xanh lục, minh họa nguyên tắc mô-đun và tái sử dụng – kiến thức cốt lõi cho các câu hỏi phỏng vấn VueJS." style="border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,0.1); width: 100%; height: auto;"/><figcaption style="font-style: italic; font-size: 14px; color: #555; margin-top: 10px;">Cấu trúc phức tạp từ các khối hình học trong suốt màu xanh lam, xanh lục, minh họa nguyên tắc mô-đun và tái sử dụng – kiến thức cốt lõi cho các câu hỏi phỏng vấn VueJS.</figcaption></figure> </p></div> <li>Vue Test Utils: Thư viện chính thức để kiểm thử các component Vue, cung cấp các tiện ích để mount component, tương tác với chúng và kiểm tra trạng thái.</li> <li>Jest: Một framework kiểm thử JavaScript phổ biến, thường được dùng cho unit testing.</li> <li>Cypress: Một công cụ E2E testing mạnh mẽ, cho phép bạn viết và chạy các bài kiểm thử tương tác với ứng dụng trong trình duyệt.</li> </ul> </li> </ul> <p>Ví dụ cơ bản về một unit test cho component Vue:</p> <pre><code> // Trong component ButtonCounter.vue <template> <button @click="count++">Bạn đã click {{ count }} lần</button> </template> <script> export default { data() { return { count: 0 } } } </script> // Trong ButtonCounter.spec.js (sử dụng Vue Test Utils và Jest) import { mount } from '@vue/test-utils'; import ButtonCounter from './ButtonCounter.vue'; describe('ButtonCounter', () => { it('increments count on click', async () => { const wrapper = mount(ButtonCounter); expect(wrapper.text()).toContain('Bạn đã click 0 lần'); await wrapper.find('button').trigger('click'); expect(wrapper.text()).toContain('Bạn đã click 1 lần'); }); }); </code></pre> <h2>7. Các Dự Án Tiêu Biểu Ứng Dụng VueJS Trong Thực Tế</h2> <p>Để thấy được sức mạnh và độ tin cậy của VueJS, bạn chỉ cần nhìn vào danh sách các tổ chức lớn đã và đang ứng dụng nó. Điều này cũng là một điểm cộng khi nói về <strong>kinh nghiệm phỏng vấn VueJS</strong>, cho thấy bạn có cái nhìn rộng hơn về thị trường.</p> <h3>Những Tổ Chức Hàng Đầu Đang Ứng Dụng VueJS</h3> <p>VueJS đã và đang được rất nhiều công ty, từ những startup nhỏ đến các tập đoàn công nghệ khổng lồ, tin tưởng sử dụng cho các sản phẩm của mình. Dưới đây là một vài loại hình tổ chức và cách họ ứng dụng VueJS:</p> <ul> <li>Các công ty công nghệ lớn: Nhiều nền tảng dịch vụ đám mây, các công ty phần mềm doanh nghiệp, hay những nhà cung cấp dịch vụ phân tích dữ liệu đã sử dụng VueJS để xây dựng giao diện quản trị phức tạp, dashboard dữ liệu hoặc các công cụ nội bộ. Vue giúp họ tạo ra những giao diện người dùng mạnh mẽ, dễ dàng tùy chỉnh và bảo trì.</li> <li>Các nền tảng thương mại điện tử: Một số trang web mua sắm trực tuyến toàn cầu, cả những nhà bán lẻ lớn lẫn các sàn giao dịch hàng hóa đặc thù, đã tích hợp VueJS vào các trang sản phẩm, giỏ hàng, hoặc trang thanh toán để cải thiện trải nghiệm người dùng, làm cho quá trình tương tác mượt mà và phản hồi nhanh chóng hơn.</li> <li>Ngành truyền thông và xuất bản: Một số nhà xuất bản kỹ thuật số hàng đầu hay các nền tảng tin tức trực tuyến đã dùng VueJS để phát triển các ứng dụng di động web (PWA), các trang marketing tương tác, hoặc những giao diện chỉnh sửa nội dung cho đội ngũ của họ.</li> <li>Các trình tạo trang web và công cụ thiết kế: Một vài nền tảng cho phép người dùng tự tạo website, hoặc các công cụ thiết kế giao diện trực tuyến, cũng lựa chọn VueJS làm nền tảng cho trình chỉnh sửa kéo-thả (drag-and-drop) của họ, nhờ vào tính linh hoạt và khả năng quản lý trạng thái hiệu quả của framework này.</li> <li>Dịch vụ phát trực tuyến và giải trí: Một nền tảng phát trực tuyến hàng đầu, cùng với một số công ty game hay ứng dụng giải trí khác, cũng đã áp dụng VueJS cho các giao diện người dùng của họ, mang lại trải nghiệm tương tác liền mạch và hiệu suất cao.</li> </ul> <p>Qua đó, bạn có thể thấy VueJS không chỉ là lựa chọn của các startup nhanh nhẹn mà còn được các "ông lớn" trong ngành tin cậy cho nhiều loại hình ứng dụng khác nhau, từ giao diện người dùng công cộng đến các hệ thống nội bộ phức tạp.</p> <h2>8. Bí Quyết Chinh Phục Buổi Phỏng Vấn VueJS Thành Công</h2> <p>Một buổi <strong>phỏng vấn VueJS</strong> không chỉ là nơi kiểm tra kiến thức kỹ thuật, mà còn là cơ hội để bạn thể hiện con người mình. Với kinh nghiệm của tôi, đây là vài bí quyết để bạn có sự chuẩn bị tốt nhất.</p> <h3>Chuẩn Bị Toàn Diện Cho Buổi Phỏng Vấn Kỹ Thuật VueJS</h3> <p>Kiến thức chuyên môn là xương sống của mọi buổi phỏng vấn. Bạn phải tự tin với những gì mình biết.</p> <ul> <li>Giữ tinh thần thư giãn, bình tĩnh: Áp lực là điều khó tránh, nhưng hãy nhớ rằng đây là một cuộc trò chuyện hai chiều. Hít thở sâu và cố gắng giữ bình tĩnh để thể hiện tốt nhất.</li> <li>Nghiên cứu kỹ về lĩnh vực công nghệ, xu hướng Frontend, và thông tin về đơn vị tuyển dụng: Việc hiểu rõ công ty, sản phẩm của họ, và cả văn hóa làm việc sẽ giúp bạn trả lời câu hỏi tự tin hơn và đặt câu hỏi phù hợp.</li> <li>Luyện tập trả lời câu hỏi phỏng vấn: Không chỉ những câu hỏi lý thuyết về VueJS, mà còn cả những câu hỏi tình huống (ví dụ: "Bạn sẽ làm gì khi gặp lỗi này?"). Hãy luyện tập giải thích các khái niệm một cách rõ ràng, dễ hiểu.</li> <li>Chuẩn bị sẵn sàng cho các câu hỏi thực hành lập trình VueJS: Nhà tuyển dụng có thể yêu cầu bạn viết code trực tiếp hoặc giải thích logic cho một bài toán cụ thể. Hãy đảm bảo bạn có thể viết clean code, giải thích từng bước logic và các lựa chọn thiết kế của mình.</li> </ul> <p>Đặc biệt, hãy chuẩn bị kể về các dự án cá nhân hoặc nhóm mà bạn đã thực hiện với VueJS. Hãy nói rõ vai trò của bạn, những thách thức bạn gặp phải và cách bạn giải quyết chúng. Nếu có thể, hãy tạo một danh sách các dự án thực tế hoặc những đóng góp mã nguồn mở liên quan đến VueJS trong portfolio của bạn.</p> <h3>Kỹ Năng Mềm Và Câu Hỏi Hành Vi Trong Phỏng Vấn</h3> <p>Kỹ năng mềm đôi khi còn quan trọng hơn kỹ năng cứng, đặc biệt là khi làm việc nhóm.</p> <ul> <li>Cách giới thiệu bản thân một cách ấn tượng: Không chỉ kể lại CV, hãy kể một câu chuyện về hành trình của bạn, những gì bạn đã học được và mục tiêu của bạn.</li> <li>Trả lời các câu hỏi về giải quyết vấn đề, làm việc nhóm, quản lý thời gian: Hãy dùng phương pháp STAR (Situation, Task, Action, Result) để kể về các tình huống thực tế mà bạn đã trải qua.</li> <li>Cách thể hiện thái độ cầu tiến và khả năng học hỏi: Luôn thể hiện rằng bạn sẵn sàng học những điều mới, không ngại thử thách và biết cách tiếp thu phản hồi.</li> <li>Chuẩn bị câu hỏi để đặt cho nhà tuyển dụng: Điều này thể hiện sự quan tâm của bạn đến vị trí và công ty. Hãy hỏi về công việc hàng ngày, định hướng công nghệ, văn hóa đội nhóm, hoặc các cơ hội phát triển.</li> </ul> <p>Một điều nhỏ nhưng tạo ấn tượng tốt là gửi thư cảm ơn (thank-you letter) sau phỏng vấn. Nó thể hiện sự chuyên nghiệp và thiện chí của bạn.</p> <h2>9. Định Hướng Sự Nghiệp Lập Trình Viên Frontend Với VueJS</h2> <p>Con đường trở thành một lập trình viên <strong>lập trình VueJS</strong> giỏi là một hành trình dài, cần sự kiên trì và định hướng rõ ràng. Đây là vài lời khuyên từ kinh nghiệm của tôi.</p> <h3>Tìm Kiếm Cơ Hội Việc Làm Lập Trình Viên VueJS Hiệu Quả</h3> <p>Việc tìm kiếm công việc cần một chiến lược cụ thể, không chỉ là rải CV.</p> <ul> <li>Sử dụng các nền tảng việc làm chuyên biệt cho ngành công nghệ: Ngoài những trang tìm việc chung, có rất nhiều nền tảng tập trung vào các vị trí kỹ thuật, giúp bạn tiếp cận đúng đối tượng nhà tuyển dụng.</li> <li>Tối ưu hóa hồ sơ (CV) và thư xin việc: Đảm bảo CV của bạn làm nổi bật kinh nghiệm và kỹ năng liên quan đến VueJS. Viết thư xin việc (cover letter) cá nhân hóa cho từng công ty, thể hiện sự nghiên cứu kỹ lưỡng của bạn về họ.</li> <li>Mạng lưới quan hệ (networking) trong cộng đồng lập trình: Tham gia các nhóm online, diễn đàn, hoặc các sự kiện offline. Bạn sẽ học hỏi được nhiều điều và cũng có thể tìm thấy cơ hội việc làm thông qua những mối quan hệ này.</li> <li>Tham gia các sự kiện, hội thảo công nghệ: Đây là nơi tuyệt vời để cập nhật xu hướng mới, gặp gỡ các chuyên gia và mở rộng mạng lưới của mình.</li> </ul> <h3>Phát Triển Kỹ Năng Liên Tục Để Nâng Tầm Sự Nghiệp</h3> <p>Công nghệ thay đổi không ngừng, đặc biệt là trong lĩnh vực frontend. Việc học hỏi liên tục là bắt buộc.</p> <ul> <li>Tầm quan trọng của việc cập nhật kiến thức VueJS: Luôn theo dõi các bản cập nhật của Vue (Vue 2, Vue 3) và các thư viện/framework đi kèm như Vue Router, Vuex/Pinia, Nuxt.js. Hiểu rõ sự khác biệt và khi nào nên sử dụng từng phiên bản.</li> <li>Học hỏi các công nghệ liên quan: Đừng chỉ giới hạn ở VueJS. Hãy mở rộng kiến thức sang TypeScript (giúp viết code an toàn hơn), các công cụ Testing (Jest, Cypress), và quy trình CI/CD (Continuous Integration/Continuous Deployment) để triển khai ứng dụng tự động.</li> <li>Tham gia vào cộng đồng VueJS, đóng góp mã nguồn mở: Đây là cách tuyệt vời để học hỏi từ người khác, nâng cao kỹ năng và xây dựng uy tín cá nhân.</li> <li>Xây dựng portfolio cá nhân với các dự án thực tế: Không gì thuyết phục hơn một portfolio mạnh mẽ. Hãy xây dựng những dự án cá nhân mà bạn đam mê, hoặc tham gia vào các dự án mã nguồn mở. Những dự án này sẽ là minh chứng sống động nhất cho khả năng của bạn khi đối mặt với <strong>câu hỏi phỏng vấn VueJS</strong>.</li> </ul> </div><!-- .entry-content .clear --> </div> </article><!-- #post-## --> <nav class="navigation post-navigation" aria-label="Bài viết"> <div class="nav-links"><div class="nav-previous"><a title="Câu hỏi phỏng vấn Angular Developer: Trọn bộ từ cơ bản đến nâng cao + mẹo ghi điểm" href="https://truongcaodangsupham.com/cau-hoi-phong-van-angular-developer-tron-bo-tu-co-ban-den-nang-cao-meo-ghi-diem/" rel="prev"><span class="ast-post-nav" aria-hidden="true"><span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M134.059 296H436c6.627 0 12-5.373 12-12v-56c0-6.627-5.373-12-12-12H134.059v-46.059c0-21.382-25.851-32.09-40.971-16.971L7.029 239.029c-9.373 9.373-9.373 24.569 0 33.941l86.059 86.059c15.119 15.119 40.971 4.411 40.971-16.971V296z'></path></svg></span> Trước đó</span> <p> Câu hỏi phỏng vấn Angular Developer: Trọn bộ từ cơ bản đến nâng cao + mẹo ghi điểm </p></a></div><div class="nav-next"><a title="Tập đoàn lớn nhất Việt Nam: 7 gã khổng lồ định hình kinh tế đất nước" href="https://truongcaodangsupham.com/tap-doan-lon-nhat-viet-nam-7-ga-khong-lo-dinh-hinh-kinh-te-dat-nuoc/" rel="next"><span class="ast-post-nav" aria-hidden="true">Kế tiếp <span aria-hidden="true" class="ahfb-svg-iconset ast-inline-flex svg-baseline"><svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'><path d='M313.941 216H12c-6.627 0-12 5.373-12 12v56c0 6.627 5.373 12 12 12h301.941v46.059c0 21.382 25.851 32.09 40.971 16.971l86.059-86.059c9.373-9.373 9.373-24.569 0-33.941l-86.059-86.059c-15.119-15.119-40.971-4.411-40.971 16.971V216z'></path></svg></span></span> <p> Tập đoàn lớn nhất Việt Nam: 7 gã khổng lồ định hình kinh tế đất nước </p></a></div></div> </nav><div class="ast-single-related-posts-container ast-container--"><div class="ast-related-posts-title-section"> <h2 class="ast-related-posts-title"> Bài viết liên quan </h2> </div><div class="ast-related-posts-wrapper"> <article class="ast-related-post post-544 post type-post status-publish format-standard hentry category-ho-tro-hoc-tap tag-cac-buoc-dinh-huong-nghe-nghiep tag-chon-nghe tag-dinh-huong-nghe-nghiep tag-nen-chon-nghe-theo-dam-me tag-tim-nganh-nghe-phu-hop"> <div class="ast-related-posts-inner-section"> <div class="ast-related-post-content"> <div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header"> <h3 class="ast-related-post-title entry-title"> <a href="https://truongcaodangsupham.com/dinh-huong-nghe-nghiep-can-bang-dam-me-va-thuc-te-cho-tuong-lai-vung-vang/" target="_self" rel="bookmark noopener noreferrer">Định hướng nghề nghiệp: Cân bằng Đam mê và Thực tế cho tương lai vững vàng</a> </h3> <div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://truongcaodangsupham.com/category/ho-tro-hoc-tap/" rel="category tag">Hỗ trợ học tập</a></span> / Bởi <span class="posted-by vcard author" itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author"> <a title="Xem tất cả bài viết bởi tanphucdemaco@gmail.com" href="https://truongcaodangsupham.com/author/tanphucdemacogmail-com/" rel="author" class="url fn n" itemprop="url" > <span class="author-name" itemprop="name" > tanphucdemaco@gmail.com </span> </a> </span> </div> </header> <div class="entry-content clear"> <p class="ast-related-post-excerpt entry-content clear"> Ai trong chúng ta cũng từng đứng trước ngã ba đường lớn của cuộc đời, băn khoăn không biết nên rẽ lối nào cho tương… </p> <p class="ast-related-post-cta read-more"> <a class="ast-related-post-link " href="https://truongcaodangsupham.com/dinh-huong-nghe-nghiep-can-bang-dam-me-va-thuc-te-cho-tuong-lai-vung-vang/" aria-label="Liên kết bài liên quan" target="_self" rel="bookmark noopener noreferrer"></a> </p> </div> </div> </div> </article> <article class="ast-related-post post-546 post type-post status-publish format-standard hentry category-ho-tro-hoc-tap tag-cach-tim-diem-manh-diem-yeu tag-cach-tra-loi-phong-van-so-truong-so-doan tag-cach-trinh-bay-so-truong-so-doan-trong-cv tag-diem-manh-diem-yeu-ban-than tag-so-truong-so-doan-la-gi"> <div class="ast-related-posts-inner-section"> <div class="ast-related-post-content"> <div class="ast-related-post-featured-section ast-no-thumb"></div> <header class="entry-header related-entry-header"> <h3 class="ast-related-post-title entry-title"> <a href="https://truongcaodangsupham.com/so-truong-so-doan-la-gi-kham-pha-phat-trien-ban-than-va-dinh-huong-su-nghiep/" target="_self" rel="bookmark noopener noreferrer">Sở trường sở đoản là gì? Khám phá, phát triển bản thân và định hướng sự nghiệp</a> </h3> <div class="entry-meta ast-related-cat-style--none ast-related-tag-style--none"><span class="ast-taxonomy-container cat-links default"><a href="https://truongcaodangsupham.com/category/ho-tro-hoc-tap/" rel="category tag">Hỗ trợ học tập</a></span> / Bởi <span class="posted-by vcard author" itemtype="https://schema.org/Person" itemscope="itemscope" itemprop="author"> <a title="Xem tất cả bài viết bởi tanphucdemaco@gmail.com" href="https://truongcaodangsupham.com/author/tanphucdemacogmail-com/" rel="author" class="url fn n" itemprop="url" > <span class="author-name" itemprop="name" > tanphucdemaco@gmail.com </span> </a> </span> </div> </header> <div class="entry-content clear"> <p class="ast-related-post-excerpt entry-content clear"> Chắc hẳn bạn từng nghe nhiều về tầm quan trọng của việc hiểu rõ bản thân, đặc biệt là khi bước vào một buổi phỏng… </p> <p class="ast-related-post-cta read-more"> <a class="ast-related-post-link " href="https://truongcaodangsupham.com/so-truong-so-doan-la-gi-kham-pha-phat-trien-ban-than-va-dinh-huong-su-nghiep/" aria-label="Liên kết bài liên quan" target="_self" rel="bookmark noopener noreferrer"></a> </p> </div> </div> </div> </article> </div> </div> </main><!-- #main --> </div><!-- #primary --> </div> <!-- ast-container --> </div><!-- #content --> <footer class="site-footer" id="colophon" itemtype="https://schema.org/WPFooter" itemscope="itemscope" itemid="#colophon"> <div class="site-below-footer-wrap ast-builder-grid-row-container site-footer-focus-item ast-builder-grid-row-full ast-builder-grid-row-tablet-full ast-builder-grid-row-mobile-full ast-footer-row-stack ast-footer-row-tablet-stack ast-footer-row-mobile-stack" data-section="section-below-footer-builder"> <div class="ast-builder-grid-row-container-inner"> <div class="ast-builder-footer-grid-columns site-below-footer-inner-wrap ast-builder-grid-row"> <div class="site-footer-below-section-1 site-footer-section site-footer-section-1"> <div class="ast-builder-layout-element ast-flex site-footer-focus-item ast-footer-copyright" data-section="section-footer-builder"> <div class="ast-footer-copyright"><p>Copyright © 2026 truongcaodangsupham.com | Powered by <a href="https://wpastra.com" rel="nofollow noopener" target="_blank">Astra WordPress Theme</a></p> </div> </div> </div> </div> </div> </div> </footer><!-- #colophon --> </div><!-- #page --> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/astra/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <div id="ast-scroll-top" tabindex="0" class="ast-scroll-top-icon ast-scroll-to-top-right" data-on-devices="both"> <span class="ast-icon icon-arrow"><svg class="ast-arrow-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="26px" height="16.043px" viewBox="57 35.171 26 16.043" enable-background="new 57 35.171 26 16.043" xml:space="preserve"> <path d="M57.5,38.193l12.5,12.5l12.5-12.5l-2.5-2.5l-10,10l-10-10L57.5,38.193z" /> </svg></span> <span class="screen-reader-text">Lên đầu trang</span> </div> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <script id="astra-theme-js-js-extra"> var astra = {"break_point":"921","isRtl":"","is_scroll_to_id":"1","is_scroll_to_top":"1","is_header_footer_builder_active":"1","responsive_cart_click":"flyout","is_dark_palette":""}; //# sourceURL=astra-theme-js-js-extra </script> <script src="https://truongcaodangsupham.com/wp-content/themes/astra/assets/js/minified/frontend.min.js?ver=4.12.3" id="astra-theme-js-js"></script> <script id="wp-emoji-settings" type="application/json"> {"baseUrl":"https://s.w.org/images/core/emoji/17.0.2/72x72/","ext":".png","svgUrl":"https://s.w.org/images/core/emoji/17.0.2/svg/","svgExt":".svg","source":{"concatemoji":"https://truongcaodangsupham.com/wp-includes/js/wp-emoji-release.min.js?ver=6.9.1"}} </script> <script type="module"> /*! This file is auto-generated */ const a=JSON.parse(document.getElementById("wp-emoji-settings").textContent),o=(window._wpemojiSettings=a,"wpEmojiSettingsSupports"),s=["flag","emoji"];function i(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function c(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0);const a=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data);return t.every((e,t)=>e===a[t])}function p(e,t){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var n=e.getImageData(16,16,1,1);for(let e=0;e<n.data.length;e++)if(0!==n.data[e])return!1;return!0}function u(e,t,n,a){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\udde8\ud83c\uddf6","\ud83c\udde8\u200b\ud83c\uddf6")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!a(e,"\ud83e\u1fac8")}return!1}function f(e,t,n,a){let r;const o=(r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):document.createElement("canvas")).getContext("2d",{willReadFrequently:!0}),s=(o.textBaseline="top",o.font="600 32px Arial",{});return e.forEach(e=>{s[e]=t(o,e,n,a)}),s}function r(e){var t=document.createElement("script");t.src=e,t.defer=!0,document.head.appendChild(t)}a.supports={everything:!0,everythingExceptFlag:!0},new Promise(t=>{let n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),c.toString(),p.toString()].join(",")+"));",a=new Blob([e],{type:"text/javascript"});const r=new Worker(URL.createObjectURL(a),{name:"wpTestEmojiSupports"});return void(r.onmessage=e=>{i(n=e.data),r.terminate(),t(n)})}catch(e){}i(n=f(s,u,c,p))}t(n)}).then(e=>{for(const n in e)a.supports[n]=e[n],a.supports.everything=a.supports.everything&&a.supports[n],"flag"!==n&&(a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&a.supports[n]);var t;a.supports.everythingExceptFlag=a.supports.everythingExceptFlag&&!a.supports.flag,a.supports.everything||((t=a.source||{}).concatemoji?r(t.concatemoji):t.wpemoji&&t.twemoji&&(r(t.twemoji),r(t.wpemoji)))}); //# sourceURL=https://truongcaodangsupham.com/wp-includes/js/wp-emoji-loader.min.js </script> </body> </html> <!-- Page cached by LiteSpeed Cache 7.8 on 2026-03-06 19:46:08 -->