Logo

101 câu hỏi phỏng vấn Vuejs có hướng dẫn trả lời chi tiết

Lượt xem: 1548
Ngày đăng: 15/03/2024

Tổng hợp những câu hỏi phỏng vấn Vuejs Fresher/Intern, Junior, Senior thường gặp và gợi ý trả lời ✓ Câu hỏi phỏng vấn Vuejs hay, khó không thể bỏ qua ✓ Tích luỹ kinh nghiệm dễ dàng với bộ câu hỏi phỏng vấn Vuejs, tự tin thuyết phục nhà tuyển dụng

Câu hỏi phỏng vấn Vuejs - ViecLamVui

➽➽➽ Có thể bạn quan tâm: 1001 câu hỏi phỏng vấn thường gặp và cách trả lời hay nhất thuyết phục nhà tuyển dụng

Câu hỏi phỏng vấn Vuejs kiến thức cơ bản

Một số câu hỏi phỏng vấn cơ bản liên quan đến kiến thức Vuejs mà các ứng viên cần phải nắm vững để có thể dễ dàng vượt qua sự tuyển chọn của các nhà tuyển dụng.

Câu hỏi phỏng vấn Vuejs cơ bản - ViecLamVui

Bạn hiểu thế nào về Vuejs?

Đây là câu hỏi phỏng vấn giúp nhà tuyển dụng có thể đánh giá được ứng viên có nắm vững kiến thức cơ bản định nghĩa về Vuejs, qua đó xác định ứng viên có phù hợp, có hiểu về công việc của vị trí ứng tuyển hay không. Để trả lời câu hỏi này, bạn chỉ cần trả lời ngắn gọn, đúng trọng tâm như sau:

"Vuejs là một JavaScript framework có mã nguồn mở và được tạo ra bởi Evan You. Vuejs giúp xây dựng giao diện người dùng và vô cùng thân thiện. Chúng được xây dựng từ các thư viện và thư viện cốt lõi của chúng sẽ chỉ tập trung vào lớp view và có thể tích hợp dễ dàng với các thư viện khác."

Bạn hãy nêu những tính năng chính của Vuejs?

Vuejs sẽ có rất nhiều tính năng cho người dùng. Để trả lời câu hỏi phỏng vấn này, bạn có thể kể một số tính năng chính, nổi bật của Vuejs như sau:

“Các tính năng nổi bật của Vuejs bao gồm: 

  • Template: Cung cấp các template dựa vào HTML liên kết dữ liệu với DOM.
  • Component: Tạo ra các phần tử tùy chỉnh có thể sử dụng lại trong các ứng dụng Vuejs.
  • Định tuyến: Dùng để điều hướng giữa các trang được thực hiện qua vue-router.
  • Lightweight: Vuejs có trọng lượng nhẹ hơn so với các loại framework khác.
  • Virtual Dom: Sử dụng Dom ảo tương tự như là các framework khác và là một đại diện cây trong bộ nhớ có dung lượng nhẹ Dom HTML gốc.”

Những phương thức vòng đời của Vuejs là gì?

Các phương thức vòng đời của Vuejs bao gồm như sau:

  • Vòng khởi tạo: Với vòng khởi tạo thì Creation Hooks cho phép người dùng thực hiện các hành động trước khi mà thành phần đã được thêm vào DOM. Người dùng sẽ phải cần sử dụng các hook này để thiết lập mọi thứ trong thành phần trong quá trình client rendering và server rendering.
  • Mounting: Những mounting hook là những hook được sử dụng phổ biến nhất và chúng cho phép truy cập thành phần ngay lập tức trong thời gian là trước và sau lần hiển thị đầu tiên.
  • Diff & Re-render: Trong đó thì Update hook được gọi bất kể thời gian khi mà một thuộc tính phản ứng sử dụng bởi thành phần thay đổi hoặc có thể là bất cứ một yếu tố nào đó hiển thị lại.
  • Teardown: Ở đây, Destruction hook cho phép thực hiện các hành động khi mà các thành phần của nó đã bị phá hủy.

Các lệnh điều kiện VueJS là gì?

VueJS cung cấp tập hợp các chỉ thị để hiển thị hoặc ẩn các phần tử dựa trên các điều kiện và các điều lệnh có sẵn là: v-if, v-else, v-else-if, v-show.

  • v-else: là chỉ thị dùng để hiển thị nội dung khi mà biểu thức liền kề v-if chuyển sang false.
  • V-if:  là chỉ thị dùng để xóa hoặc thêm những phần tử Dom dựa trên các biểu thức đã cho sẵn.
  • v-show: là chỉ thị cũng gần giống với v-if nhưng lại hiển thị tất cả phần tử tới Dom và sử dụng CSS để hiển thị hoặc ẩn các phần tử.
  • v-else-if: chỉ được sử dụng khi mà chúng ta kiểm tra nhiều hơn hai loại tùy chọn.

Sự khác nhau giữa computed và methods ?

Computed: biết các giá trị được sử dụng trong hàm có thay đổi không, để chúng không cần phải chạy mọi lúc để kiểm tra. Tức là nếu trong hàm có bất gì giá trị nào thay đổi thì cả cái hàm đó sẽ chạy để tính toán lại. Và đặc biệt là khi sử dụng các hàm trong computed thì sẽ không có dấu ngoặc như cách dùng hàm của methods.

Methods: không thể biết các giá trị trong hàm có thay đổi hay không nên hàm sẽ không chạy lại nếu các giá trị trong hàm đó thay đổi.

Sự khác nhau giữa created và mounted?

Created được chạy khi data, event đã thiết lập thành công nhưng các thẻ trong template và DOM ảo vẫn chưa được render ra. Nếu bạn cố gắng truy cập vào các phần tử DOM trong hàm này thì nó sẽ báo lỗi. Nên trong created thường được sử dụng để gọi API và gán kết với các giá trị trong data.

Mounted giai đoạn này, mounted hook sẽ cho phép chúng ta có thể truy cập vào phần tử trong DOM. Tức là khi này, DOM đã được gắn kết.

Lifecycle của một component là gì và gồm những giai đoạn nào?

Lifecycle là những phương thức được thực thi trong mỗi giai đoạn trong vòng đời của Vue.

Những giai đoạn của lifecycle bao gồm:

  • Giai đoạn khởi tạo: beforeCreate(), created()
  • Giai đoạn gắn kết vào DOM: beforeMounte(), mounted()
  • Giai đoạn cập nhật DOM khi dữ liệu thay đổi: beforeUpdate(), updated()
  • Giai đoạn hủy instance hay kết thúc vòng đời của component: beforeDestroy(), destroyed()

Câu hỏi phỏng vấn Vuejs nâng cao, hay và khó

Sau đây là một số câu hỏi phỏng vấn Vuejs nâng cao để bạn có thể tham khảo làm kinh nghiệm chuẩn bị cho cuộc phỏng vấn ứng tuyển vị trí lập trình viên Vuejs đòi hỏi nhiều kinh nghiệm.

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

Sự khác biệt giữa v-if và v-show?

Tham khảo gợi ý trả lời như sau:

"Dưới đây là một số điểm khác biệt chính giữa các lệnh v-show và v-if:

  • v-if chỉ kết xuất phần tử tới DOM nếu biểu thức chuyển, trong khi v-show kết xuất tất cả các phần tử tới DOM và sau đó sử dụng thuộc tính hiển thị CSS để hiển thị / ẩn các phần tử dựa trên biểu thức.
  • v-if hỗ trợ các chỉ thị v-else và v-else-if trong khi v-show không hỗ trợ các chỉ thị else.
  • v-if có chi phí chuyển đổi cao hơn trong khi v-show có chi phí hiển thị ban đầu cao hơn. Tức là v-show có lợi thế về hiệu suất nếu các phần tử được bật và tắt thường xuyên, trong khi v-if có lợi thế khi nói đến thời gian hiển thị ban đầu.
  • v-if hỗ trợ tab <template> còn v-show thì không hỗ trợ."

Tại sao khi sử dụng bind v-for cần phải mapping key

Vì v-if thì có còn v-else và v-show thì không.

Khái niệm Dynamic route matching là gì?

Dynamic route matching nó giúp chúng ta map tới các route với các pattern khác nhau.

Mục đích keep alive tag là gì?

Câu hỏi phỏng vấn VueJS về keep - alive thường không được hỏi nhiều. Nhưng khá dễ để ta có thể nắm bắt, bạn có đọc qua thì sẽ trả lời được.

"Keep - alive tag sử dụng để giữ trạng thái hiện có của component và nó tránh việc render lại component quá nhiều. Các đối tượng này đóng ở trong tag keep - alive sẽ giữ instances."

Directive trong vue là gì?

Directive là đoạn lệnh hay đoạn xử lý sự kiện có thể chèn vào các thẻ trong phần template của vue, có thể custom riêng hoặc sử dụng các directive có sẵn như v-if, v-show, v-modal …

Câu hỏi phỏng vấn Vuejs trả lời bằng tiếng Anh

Bạn có thể tham khảo những câu hỏi phỏng vấn và câu trả lời bằng tiếng Anh về Vuejs sau đây để có thêm những kiến thức hữu ích giúp bạn tự tin hơn khi tham gia phỏng vấn tại các công ty phần mềm nước ngoài.

Câu hỏi phỏng vấn Vuejs tiếng Anh - ViecLamVui

What is VueJS?

Vue.js is an open-source, progressive Javascript framework for building user interfaces that aim to be incrementally adoptable. The core library of VueJS is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects.

What are the major features of VueJS?

Below are the some of major features available with VueJS:

  • Virtual DOM: It uses virtual DOM similar to other existing frameworks such as ReactJS, Ember etc. Virtual DOM is a light-weight in-memory tree representation of the original HTML DOM and updated without affecting the original DOM.
  • Components: Used to create reusable custom elements in VueJS applications.
  • Templates: VueJS provides HTML based templates that bind the DOM with the Vue instance data
  • Routing: Navigation between pages is achieved through vue-router
  • Light weight: VueJS is light weight library compared to other frameworks.

How do you reuse elements with key attribute?

Vue always tries to render elements as efficient as possible. So it tries to reuse the elements instead of building them from scratch. But this behavior may cause problems in few scenarios.

What are the conditional directives?

VueJS provides set of directives to show or hide elements based on conditions. The available directives are: v-if, v-else, v-else-if and v-show

  • v-if: The v-if directive adds or removes DOM elements based on the given expression. For example, the below button will not show if isLoggedIn is set to false. You can also control multiple elements with a single v-if statement by wrapping all the elements in a <template> element with the condition.
  • v-else: This directive is used to display content only when the expression adjacent v-if resolves to false. This is similar to else block in any programming language to display alternative content and it is preceded by v-if or v-else-if block. You don’t need to pass any value to this. For example, v-else is used to display LogIn button if isLoggedIn is set to false(not logged in).
  • v-else-if: This directive is used when we need more than two options to be checked. For example, we want to display some text instead of LogIn button when ifLoginDisabled property is set to true. This can be achieved through v-else statement.
  •  v-show: This directive is similar to v-if but it renders all elements to the DOM and then uses the CSS display property to show/hide elements. This directive is recommended if the elements are switched on and off frequently.

What is the difference between v-show and v-if directives?

Below are some of the main differences between v-show and v-if directives:

  • v-if only renders the element to the DOM if the expression passes whereas v-show renders all elements to the DOM and then uses the CSS display property to show/hide elements based on expression.
  • v-if supports v-else and v-else-if directives whereas v-show doesn’t support else directives.
  • v-if has higher toggle costs while v-show has higher initial render costs. i.e, v-show has a performance advantage if the elements are switched on and off frequently, while the v-if has the advantage when it comes to initial render time.
  • v-if supports <template> tab but v-show doesn’t support.

How do you achieve conditional group of elements?

You can achieve conditional group of elements(toggle multiple elements at a time) by applying v-if directive on <template> element which works as invisible wrapper(no rendering) for group of elements.

How do you configure vuejs in webpack?

You can configure vueJS in webpack using alias as below:

```js

module.exports = {

  // ...

  resolve: {

    alias: {

      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1

    }

  }

}

```

What is the purpose of vuejs compiler?

The compiler is is responsible for compiling template strings into JavaScript render functions.

For example, the below code snippet shows the difference of templates which need compiler and not,

```js

// this requires the compiler

new Vue({

  template: '<div>{{ message }}</div>'

})

 

// this does not

new Vue({

  render (h) {

    return h('div', this.message)

  }

})

```

How do you access the root instance?

The root instance(new Vue()) can be accessed with the `$root` property.

Let's see the usage of root instance with an example.

First let's create a root instance with properties and methods as below,

```js

// The root Vue instance

new Vue({

  data: {

    age: 26

  },

  computed: {

    fullName: function () { /* ... */ }

  },

  methods: {

    interest: function () { /* ... */ }

  }

})

```

Now you can access root instance data and it's methods with in subcomponents as below,

```js

// Get root data

this.$root.age

// Set root data

this.$root.age = 29

// Access root computed properties

this.$root.fullName

// Call root methods

this.$root.interest()

```

It is recommend using Vuex to manage state instead of using root instance as a global store.

How to create functional components using vue loader?

You can create functional components by adding functional attribute to template block,

```js

<template functional>

  <div>{{ props.msg }}</div>

</template>

```

1001 CÂU HỎI PHỎNG VẤN

Tổng hợp những câu hỏi phỏng vấn Vuejs Fresher/Intern, Junior, Senior thường gặp và gợi ý trả lời ✓ Câu hỏi phỏng vấn Vuejs hay, khó không thể bỏ qua ✓ Tích luỹ kinh nghiệm dễ dàng với bộ câu hỏi phỏng vấn Vuejs, tự tin thuyết phục nhà tuyển dụng

Trên đây là 101 câu hỏi phỏng vấn Vuejs thường gặp và gợi ý trả lời, ViecLamVui - chuyên trang việc làm 24h miễn phí - gửi đến bạn. Hy vọng tài liệu trên có thể hỗ trợ các bạn thật hiệu quả.

#CauHoiPhongVanVuejs #ViecLamVui

Bạn có thể đăng tin tuyển dụng miễn phí, tìm việc làm miễn phí các vị trí công việcViệc Làm IT. Bài viết thuộc danh mụcBlog Việc Làm IT trên ViecLamVui