27+ Câu hỏi phỏng vấn VueJS được hỏi nhiều nhất

Các câu hỏi phỏng vấn vue.js fresher, junior

Phỏng vấn ứng viên chưa có kinh nghiệm hoặc mới chỉ ở level Fresher thường chỉ đánh giá với những câu hỏi phỏng vấn VueJS cơ bản, tập trung vào khái niệm, kiến thức tổng quát.

1. Vue.js là gì?

Vue.js là một framework mã nguồn mở dựa trên JavaScript, dùng để xây dựng one-page cho các ứng dụng và giao diện web. VueJS được các công ty lớn như Alibaba, Netflix và Google,... và nó còn được dùng để tạo các ứng dụng các web tương tác.

2. Lập trình Vue.js cần những kỹ năng nào?

Một số kỹ năng cần thiết mà dev cần có khi sử dụng VueJS bao gồm:

• Kiến ​​thức cơ bản về JavaScript và Git
• Kiến ​​thức về HTML và CSS vững chắc 
• Hiểu biết về command-line interface của Vue (hoặc CLI).

3. Các tính năng chính của Vue.js là gì?

Một số tính năng chính của VueJS gồm:

• Data binding: Cho phép developer gán giá trị cho các thuộc tính HTML khác nhau.
• Components (thành phần): Tạo và tái sử dụng lại các phần tử tùy chỉnh trong HTML.
• Transition features (Tính năng chuyển tiếp): Chuyển đổi sang các phần tử HTML sau khi chúng được cập nhật.
• HTML templates: Liên kết instance data với DOM.

4. Sử dụng Vue.js có những lợi ích gì?

Các lợi ích nổi bật khi sử dụng Vue.js bao gồm:

• Code trong Vue.js rất đơn giản với số dòng tối thiểu.
• Dễ dàng tích hợp framework Vue.js vào các framework khác.
• Vue.js đơn giản và dễ học, chỉ yêu cầu kiến ​​thức về HTML, CSS và JavaScript.
• Tùy biến ứng dụng của Vue.js

5. Directivesv-show và v-if là gì khác nhau ở điểm nào?

• v-show: Chỉ bật tắt thuộc tính display của phần tử DOM bằng CSS display: none;. Tức là nếu điều kiện sai thì phần tử không được hiển thị ra dù vẫn được render.
• v-if: Nếu điều kiện sai thì sẽ không render ra phần tử DOM và hỗ trợ các lệnh v-else và v-else-if, <template>tab.

6. Bạn hãy lấy một ví dụ về VueJS

Có thể tạo một vue instance như ví dụ dưới đây:

var vm = new Vue({

  // options

})

Mọi ứng dụng Vue đều hoạt động bằng cách tạo một Vue instance mới với hàm Vue. Biến vm (viết tắt của ViewModel) được sử dụng để chỉ đến Vue instance. Với đoạn code trên, bạn cần truyền đối tượng tùy chọn. Bạn có thể tìm thấy danh sách đầy đủ các tùy chọn trong tài liệu tham khảo API. 

7. Hãy lấy một ví dụ về system modifier key được Vue.js hỗ trợ.

system modifier key sẽ kích hoạt trình xử lý sự kiện (event listeners) và cung cấp một số ví dụ về hệ thống modifier key hỗ trợ VueJS. Một số key chính gồm:

• .ctrl
• .shift
• .alt

8. Props component trong Vue.js là gì?

Với câu hỏi phỏng vấn VueJS này, nhà tuyển dụng muốn ứng viên cần có kiến thức cơ bản về thuộc tính Vue.js component props và có thể giải thích việc có thể sử dụng các component để truyền dữ liệu xuống các component con không? Có thể tham khảo câu trả lời về props trong VueJS dưới đây:

Props component Vue.js là cách để truyền dữ liệu từ component cha (parent component) xuống các component con (child component) và cho phép chia sẻ dữ liệu từ các component con. Props là read-only.

9. Các cách cài đặt Vue.js để hoàn thành dự án của bạn.

4 cách cài đặt Vue.js để hoàn thành một dự án đó là:

• Dùng Node Package Manager (NPM).
• Sử dụng Bower.
• Sử dụng giao diện dòng lệnh Vue (Vue command-line interface - vue CLI).
• Dùng CDN với tag trong file HTML.

10. Bạn sẽ sử dụng lệnh (command) nào để deploy ứng dụng Vue.js?

Để triển khai ứng dụng Vue.js, ta có thể sử dụng các lệnh sau:

• Để tạo một dự án: vue init webpack myproject
• Để chạy một dự án: npm run build

11. Created VueJS là gì?

Created VueJS là giai đoạn đầu tiên trong component lifecycle. Trong giai đoạn này component được tạo và các dữ liệu được khởi tạo.

12. Mounted VueJS là gì?

Mounted VueJS là một giai đoạn trong vòng đời của một component, nó được gọi sau khi component được kết xuất và gắn kết vào DOM.

Câu hỏi phỏng vấn VueJS nâng cao

Nhóm câu hỏi phỏng vấn VueJS senior được nhà tuyển dụng sử dụng để đánh giá các ứng viên có từ 3 năm kinh nghiệm thực chiến với VueJS, JavaScript. Các câu hỏi phỏng vấn này thường tập trung vào quy trình cùng các kiến thức chuyên sâu về VueJS.

1. Tại sao bạn cần sử dụng thuộc tính `key` cho lệnh (directive)?

Chúng ta cần dùng thuộc tính key cho lệnh bởi vì để VueJS có thể theo dõi các phần tử DOM được liên kết với lệnh đó. Cụ thể, thuộc tính `key` là cách để quản lý, điều khiển việc kết xuất (render) lại phần tử trong list hoặc component khi có sự thay đổi trong dữ liệu.

Bạn cần cung cấp một thuộc tính key độc nhất cho mỗi mục trong vòng lặp v-for và nên cung cấp key với v-for bất cứ khi nào có thể, trừ khi nội dung DOM lặp lại quá đơn giản. Giá trị lý tưởng cho key sẽ là ID duy nhất của từng mục.

Hãy cho một ví dụ để có thể dễ hình dung về thuộc tính `key`:

<div v-for="item in items" :key="item.id">

  {{item.name}}

</div>

2. Các phương thức array detection mutation là gì?

Phương thức đột biến (mutation methods) sẽ sửa đổi array ban đầu.

Dưới đây là danh sách array mutation methods:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

3. Vậy thì các phương thức array detection non-mutation là gì?

Đây là các phương thức không làm thay đổi mảng ban đầu nhưng luôn trả về một mảng mới. Dưới đây là danh sách các phương thức không đột biến (non-mutation methods):

• filter()
• concat()
• slice()

Ví dụ: Lấy một danh sách câu hỏi phỏng vấn VueJS cần trả lời, trong đó, nó thay thế mảng cũ bằng mảng mới dựa trên bộ lọc status:

vm.todos = vm.todos.filter(function (todo) {

  return todo.status.match(/Completed/)

})

4. Cách để dùng v-for directive với một phạm vi?

Có thể dùng kiểu integer (ví dụ 'n') cho lệnh v-for lặp lại phần tử nhiều lần.

Ví dụ:

<div>

  <span v-for="n in 20">{{ n }} </span>

</div>

Nó sẽ hiển thị số từ 1 đến 20.

5. Cách bạn sử dụng trình xử lý event thế nào?

Có thể dùng event handlers trong VueJS tương tự như JavaScript.  similar to plain JavaScript. Các method calls cũng hỗ trợ biến $event đặc biệt.

Ta có thể xem ví dụ về event trong VueJS dưới đây:

<button v-on:click="show('Chào mừng đến với VueJS', $event)">

  Submit

</button>

methods: {

  show: function (message, event) {

    // Có thể truy cập vào native event

    if (event) event.preventDefault()

    console.log(message);

  }

}

6. System Modifier Keys là gì?

Vue hỗ trợ các công cụ sử đổi bên dưới để kích hoạt mouse or keyboard event listeners khi nhấn phím tương ứng. Một số System Modifier Keys phổ biến nhất đó là:

• Ctrl (Control)
• Alt (Option)
• Shift
• Windows (Command)
• Fn

Ví dụ về System Modifier Keys với click event: 

<!-- Ctrl + Click -->

<div @click.ctrl="doSomething">Do something</div>

7. Làm thế nào để bạn thực hiện ràng buộc hai chiều (two-way binding)?

Có thể dùng lệnh v-model để tạo các liên kết dữ liệu hai chiều (two-way data bindings) trên các form input, textarea và phần tử select.

Một điều quan trọng là, v-model sẽ bỏ qua các thuộc tính value, checked hoặc selected được tìm thấy trên bất kỳ phần tử form nào. Vì vậy, nó luôn sử dụng dữ liệu Vue instance làm nguồn đáng tin cậy.

Ví dụ về two-way binding bằng cách dùng input component:

<input v-model="message" placeholder="nhập đầu vào tại đây">

<p>The message is: {{ message }}</p>

8. Làm thế nào để xâu chuỗi các bộ lọc (filter)?

Có thể  xâu chuỗi các bộ lọc lần lượt để thực hiện nhiều thao tác trên expression. Cấu trúc chung của chuỗi bộ lọc như sau:

{{ message | filterA | filterB | filterB ... }}

Ví dụ: trong trường hợp muốn chuyển đổi biểu thức ngày với định dạng ngày đầy đủ và viết hoa thì có thể áp dụng các bộ lọc dateFormat và chữ hoa như bên dưới đây:

{{ birthday | dateFormat | uppercase }}

9. Làm thế nào để sử dụng một plugin trong Vue.js?

Bạn có thể dùng plugin bằng cách chuyển plugin của mình tới phương thức global `use` của Vue. Phương thức này cần được áp dụng trước khi ứng dụng khởi động bằng cách gọi new Vue().

Ví dụ:

// calls `MyPlugin.install(Vue, { someOption: true })`

Vue.use(MyPlugin)

new Vue({

  //... options

})

10. Mixin VueJS là gì?

Mixin trong VueJS là một đối tượng có thể chứa bất kỳ tùy chọn nào của component. Nó có thể tái sử dụng code và logic trong các Vue component, cho phép chia sẻ logic và chức năng giữa các component mà không cần kế thừa từ parent component.

Hãy lấy ví dụ về mixin với `created` lifecycle có thể được chia sẻ giữa các component:

const myMixin = {

  created(){

    console.log("Mixins chào!")

  }

}

var app = new Vue({

  el: '#root',

  mixins: [myMixin]

})

Câu hỏi phỏng vấn kỹ năng vue.js

Ngoài các câu hỏi về định nghĩa, khái niệm, các câu hỏi phỏng vấn vue.js về kỹ năng, ứng dụng được người phỏng vấn chuyên môn (Dev lead, PM,...) sử dụng để sàng lọc các ứng viên tiềm năng, có tư duy linh hoạt và phù hợp nhất với vị trí VueJS developer.

1. Bạn sử dụng mixin trong CLI như thế nào?

Sử dụng Vue CLI, mixins có thể được chỉ định ở bất kỳ vị trí nào trong project folder nhưng tốt nhất là ở trong /src/mixins để dễ dàng truy cập.

Khi các mixin này được tạo trong file .js và được hiển thị bằng từ khoá `export`, chúng có thể được import vào bất kỳ component nào có từ khoá import và đường dẫn file của chúng.

2. Làm thế nào để đăng ký lệnh cục bộ?

Có thể đăng ký lệnh (directives) cục bộ (ngoại trừ globally) bằng cách sử dụng tùy chọn directives trong thành phần như bên dưới:

directives: {

  focus: {

    // directive definition

    inserted: function (el) {

      el.focus()

    }

  }

}

Bây giờ có thể sử dụng lệnh v-focus trên bất kỳ phần tử nào như bên dưới:

<input v-focus>

3. Điểm giống nhau giữa VueJS và ReactJS là gì?

ReactJS và VueJS là hai framework khác nhau, có rất ít điểm tương đồng. Có thể kể đến một số điểm giống nhau giữa framework ReactJS và VueJS như:

• Đều dùng trong thiết kế giao diện (interface).
• Dựa trên mô hình Virtual DOM.
• Đều cung cấp các tính năng như cấu trúc và khả năng phản ứng Component-based.
• Đều nhằm mục đích làm việc với thư viện root, trong khi tất cả các tác vụ bổ sung được chuyển sang các thư viện khác (routing, state management,...).

4. Ưu điểm của VueJS so với ReactJS là gì?

VueJS có những lợi thế hơn so với Reactjs đó là:

• VueJS nhẹ hơn và nhanh hơn.
• Các templates thuận tiện cho quá trình phát triển.
• VueJS có cú pháp JavaScript đơn giản hơn với hệ thống data binding mà không cần biết JSX.

5. Làm thế nào để chắc chắn rằng ứng dụng vue tuân thủ CSP?

Một số môi trường (Ứng dụng Google Chrome) cấm sử dụng new Function() để đánh giá expressions và toàn bộ bản build của ứng dụng Vue phụ thuộc vào tính năng này để biên dịch templates. Chính vì thế mà các bản build đầy đủ của ứng dụng VueJS không bị khiếu nại CSP.

Trong trường hợp này, bạn có thể sử dụng các bản dựng runtime-only với Webpack + vue-loader hoặc Browserify + vueify mà qua đó các template sẽ được biên dịch trước thành các hàm kết xuất (render functions). Bằng cách này, bạn có thể đảm bảo các ứng dụng VueJS 100% tuân thủ CSP.

Để chắc chắn ứng dụng VueJS không bị vi phạm CSP thì có thể dùng một số cách khác như:

• Thêm CSP policy vào ứng dụng bằng thẻ meta trong phần tử head của HTML template.
• Thêm CSP policy vào component bằng thuộc tính csp.
• Kiểm tra CSP policy bằng công cụ CSP Evaluator.
• Sử dụng CSP nonce bằng thuộc tính nonce trong component.

6. Bạn hãy liệt kê các tổ chức hàng đầu sử dụng VueJS

Các công ty, tổ chức hàng đầu sử dụng VueJS cho các ứng dụng hoặc sản phẩm gồm:

• Facebook - Dùng ở marketing site trên Newsfeed.
• Netflix - Dùng trong hai ứng dụng nội bộ để xây dựng giao diện movie streaming.
• Adobe - Dùng cho Portfolio - một trình tạo trang web tùy chỉnh được thiết kế để giúp người dùng thể hiện công việc của họ.
• Xiaomi - Dùng cho sản phẩm điện tử và software.
• Alibaba
• WizzAir
• EuroNews
• Laracast
• GitLab
• …

Cần chuẩn bị gì cho buổi phỏng vấn vue.js

Chúng ta không thể tiến đến thành trì của nhà tuyển dụng mà chỉ đem theo một tâm hồn đầy kiến thức về VueJS, framework front-end. Điều đó chưa đủ để chúng ta hạ gục nhà tuyển dụng. Chúng ta cần chuẩn bị nhiều “vũ khí” hơn, để chắc chắn, cuộc chiến này chúng ta luôn nắm thế thượng phong.

Dưới đây là các kinh nghiệm chuẩn bị thật kỹ cho buổi phỏng vấn VueJS:

• Một tinh thần thư giãn, bình tĩnh để tạo không khí thoải mái cho cả hai bên.
• Tìm hiểu thông tin về thị trường công nghệ, xu hướng lập trình front-end, thông tin về công ty và vị trí công việc.
• Luyện tập phỏng vấn trước gương hoặc trao đổi với bạn bè
• Tham khảo trước các câu hỏi tình huống VueJS mà nhà tuyển dụng có thể hỏi.
• Sẵn sàng cho các câu hỏi thực hành lập trình VueJS, chú ý vào phần “clean code”. Nếu được, bạn có thể giải thích về logic hoặc tư duy xử lý các đề bài.
• Chuẩn bị một số câu hỏi dành cho nhà tuyển dụng IT. Chú ý các câu hỏi cần phù hợp với hoàn cảnh, công việc.
• Đừng quên bút và sổ cho buổi phỏng vấn.

Kinh nghiệm tìm việc lập trình Front-end VueJS “một phát ăn ngay”

Không quá khó để bạn có thể tìm được công việc lập trình viên VueJS front-end chất lượng, hợp gu, chuẩn yêu cầu khi có ITNavi - nền tảng kết nối việc làm IT, kết nối nhân sự và HR IT từ các công ty công nghệ hàng đầu khắp Việt Nam và trên toàn thế giới.

Chỉ cần truy cập nền tảng ITNavi và tìm kiếm theo key “lập trình VueJS tại Hà Nội”, “lập trình viên VueJS TPHCM”, “lập trình front-end”,... bạn có thể dễ dàng tìm được các vị trí tuyển dụng công việc liên quan đến VueJS từ intern, fresher, middle, senior cho đến các level cấp cao như lead, manager,...

Các buổi phỏng vấn luôn sẽ có HR và nhân sự chuyên môn (dev lead, PM,...) thực hiện phỏng vấn. Vì vậy, việc chuẩn bị kỹ về câu hỏi phỏng vấn VueJS và tham khảo kinh nghiệm trả lời câu hỏi chính là cách bạn tự tạo phao cứu sinh cho mình trong những tình huống khó. Các câu hỏi về VueJS trên đây sẽ được chúng tôi cập nhật liên tục để hỗ trợ bạn tốt nhất.