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

Đâ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."

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.”

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.

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.

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.

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 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()

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ợ."

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

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

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 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 …

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.

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.

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.

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.

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.

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.

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

    }

  }

}

```

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)

  }

})

```

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.

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

```js

<template functional>

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

</template>

```