An interview form about Vue.JS

I had a text-based interview weeks ago which is for Vue.JS developers. The whole interview costs me two hours while the interviewer expects only in ten minutes. I don't passed anyway.

I don't remember what exactly questions are. I only have answers. Therefore, the question may not exactly what the interviewer asks.

Questions

Question 1: How do you communicate two components in Vue.JS?

We will firstly consider the prop/emit way, which is usually used in Vue.

For the case (a), we will use something called "props" to pass data in component 1, which received data from its parent component 2. For the case (b), we will use [the "$emit" event](https://vuejs.org/v2/api/#vm-emit to pass datas in component 1, which will sent datas to its parent component 2. For the case (c), we can still use the prop/emit system -- Emit data from component 1 to component 3, then pass datas to component 2 by using props.

However, in the case (c), the prop/emit system will become tricky when developing, and making the app harder to mintor and debug. In such cases, we want to use a centralised mechanism to make data sharing more easier when more shared datas existed in more components. Therefore, using Vues would helpl sharing data in components.

The mechanism is that: when component 1 -- doesn't matter which the case is -- changes data, it will trigger "action" to Vuex, then the "action" will trigger "mutations", which set "state". Finally, component 2 can get data from Vuex either using "state" or "getter".

Question 2: How do you assign an event to capture mutiple DOMs?

(Example code the question provides)

<div id="parent">
    <div id="children"></div>
    <div id="children"></div>
    <div id="children"></div>
</div>

document.querySelector("#parent").addEventListener("click", () => { /* some actions */ });

Reference:

Question 3: How do you assign different delays to different elements?

  1. I will use window.setTimeout with different delays in both Vue and JavaScript.
  2. I will use different animation-duration in a pure CSS.

Question 4: How Vuex works? What's the difference between action and mutation ?

In Vuex, actions will commit mutations, which sets state. In addition, actions can do asynchronous operations, which means we call AJAX call in actions instead of mutations.

In best practice, we dispatch actions, do asynchronous operations like AJAX call in it. Then, we commit mutations with data from actions, and set the state in mutations. It doesn't matter where to handle data, but always do asynchronous operations in actions.

Question 5: How do you get APIs when Nuxt rendering SSR?

We mostly use the fetch property in SSR Nuxt.

Reference:

Question 6: How do you implement your authentication process? Token? Cookie? Why?

I perfer using access token. In particular, JWT token. I will use localStorage to store a JWT token, which stores essential data for a server. Then, I will attach the token to the Authorization header in requests.

The reason I perfer such process is that:

  1. API sites I used are mostly crossed-domain, which is not suitable for cookies.
  2. Access token is more acceptable solution in modern web development.
  3. JWT token is more familiar for server side developers.

Here's a good article worth to read:

Question 7: What's the difference between computed and watch in Vue.JS?

Both computed and watch are something can watch states changing, but is better to use the computed property if I want to get handeled data(For example, get user's age when birth year given has changed) since it's more easy to understand. However, I will to use the watch property if I need to do actions when the state has been changed like calling an AJAX.

Reference:

Question 8: How many components do you see?

(I miss the image, so you can bypass the answer)

I see at least 8 major components.

  1. The navbar on the top. 1.1. The title on the left of the navbar. 1.2. The menu options on the right of the navbar.
  2. The main content with a container on the rest of the page. 2.1. The title(The TasteWP Blog) on the main content. 2.2. There are two parts under the title on the main content. 2.2.1. Two content introduction components on the left. With some minor components picture, subtitle, contnt, and tags in it. 2.2.2. Some infomation component on the right.