preface

Himself a small white front end, because the company bosses are busy, interview, it falls to me this small white body, call I go to for the first time I am every possible way refuse, because he still have self-knowledge, but others don, time had no choice but to go to, they joked by you this level to go, Just ask him for a second interview whenever you get tired of asking questions. I also met some people before and after, plus some questions I sorted out during the interview, and wrote this article. Thank you for taking the time to read my book.

Here are some typical interview questions and answers, and what I expect to hear when ASKED:

Vue lifecycle (hook functions)

The problem

Talk about vUE’s lifecycle functions (hook functions).

Problem description

First of all, my first question about life cycle functions is this one, which I think everyone who uses VUE should be aware of, and I don’t really want to go any further if it’s too big a question to answer. Even if The English is not standard (and I am not a standard person, I am not saying this is a problem), it is important to clarify the key points. It is also important to write down the first four points by hand, because created and Mounted are commonly used. The last four are fine without going into detail. In which cycle can I get data for the first time and in which cycle can I get DOM elements in Mounted for the first time? If this question is not mentioned, I will ask the following questions until he says the two answers.

Hope the answer

BeforeMount, Mounted beforeCreate, Created (You can retrieve data defined in data for the first time in created), beforeMount, mounted (dom tree rendering is complete) Accessible DOM structure), beforeUpdate, updated, beforeDestroy, destroyed

Getters and setters in computed

The problem

Say a little bit about getters and setters in computed.

Problem description

A lot of times, when I ask this question, I get the answer about vue getters and setters, subscriber patterns, and so on, and I say, well, I’m not asking for that, I’m asking for computed, and I’m asking for computed, A lot of times the answer that you get for computed by default, if you just use the getter in it, will go on asking what you need to do if you want to set this value back up again, and of course it’s going to make it impossible for him to answer the question to that extent.

Hope the answer

<! Computed: {fullName: {// getter get:function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}
Copy the code

Watch Monitor object

The problem

How to watch for changes within an object.

Problem description

However, most of the people I met did not give me the answer I expected. Some people would say “directly monitor obj”, and some people would say “directly monitor obj. Key”, but few people answered “deep”. So I only asked people who I was listening to, and only those who answered “deep” were asked the role of immediate.

Hope the answer

If you only want to listen for a property change in obj, you can directly listen for obj.key.

watch: {
    'obj.question': function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing... '
      this.debouncedGetAnswer()
    }
  }
Copy the code

If you listen deeply for the entire OBJ

watch: {
    obj: {
        handler: function (newQuestion, oldQuestion) {
          this.answer = 'Waiting for you to stop typing... '
          this.debouncedGetAnswer()
        },
        deep: true,
        immediate: true}}Copy the code

The watch listener is not triggered when the value is first bound with immediate. If you use immediate, the watch listener is executed when the value is first bound.

The role of the V-for loop key

The problem

Why do we put a key in a V-for loop?

Problem description

When asking this question, many people will first answer that the page has a warning and the editor has a prompt. I will directly say that I do not consider the error and prompt problem, or I will ask if there will be any abnormal situation on the page if there is no key. Some people would say it’s a sign, a sign of its uniqueness, and I would continue to ask why it’s unique, what if it doesn’t?

Hope the answer

The DOM rendering of a Vue is a virtual DOM, and when the data changes, the DIff algorithm will only compare the changed parts. If the order of the data items changes, instead of moving the DOM elements to match the changed data items, Vue will simply reuse each element here and make sure that it displays every element that has been rendered under a specific index. For example: there is a list we are now in the middle by inserting an element, the diff algorithm will be the list of default before reuse and increase a at the end, if the list is selected a state will appear as reuse binding errors rather than follow the original elements, the key role can give him a logo, let the state with data rendering. (This is a general understanding of my own, the expression is not clear, you can refer to the document, this paper will not specifically describe this problem.)

$nextTick

The problem

Have you used $nextTick before? What does it do?

Problem description

When asked this question, many people say they can handle asynchrony, but when asked why nextTick is used, what problem it solves, and what it would do otherwise, many people are not sure.

Hope the answer

A deferred callback is performed after the next DOM update loop ends. Use this method immediately after modifying the data to get the updated DOM. Problem solved: In some cases, dom operations need to be performed immediately after data changes. In this case, the DOM obtained is still the DOM obtained before data refresh, which cannot meet the requirements. In this case, $nextTick is used.

// Modify data vm. MSG ='Hello'// DOM has not been updated with vue.nexttick (function() {// DOM updated}) // Used as a Promise (new since 2.1.0, see hints below) vue.nexttick ().then()function() {// DOM updated})Copy the code

$set

The problem

Is $set used in vue, why is it used, and what problem does it solve

Problem description

People who know this question can basically say it, but do not know is a little do not understand, some will also talk about es6 set structure

Hope the answer

Add a property to a reactive object and make sure the new property is also reactive and triggers view updates. It must be used for object type to add new attributes to response, because the Vue cannot detect common new properties (such as this. MyObject. NewProperty = ‘hi’) official (sample)

$set = $set = $set = $set = $set = $set = $set = $set = $set = $set = $set = $set = $set

Value transfer between components

The problem

Talk about how components pass values, all the ways you know

Problem description

In fact, this question is to see whether the official documents have seen the details, because many methods of value transfer are described in the official documents, but relatively few are used in the project.

Basically, props, props; $emit; Brother: Eventbus; Vuex; Some of them talk about sessionStorage and localStorage, routing parameter (that’s not really what I’m asking, but it can be done)

This article does not describe the specific usage of the following value passing methods. This link is a detailed introduction to the value passing of these components.

You don’t know how vUE components pass values

Hope the answer

  1. Provide/inject This pair of options needs to be used together to allow an ancestor component to inject a dependency to all of its descendants, no matter how deep the component hierarchy is, and remain in effect as long as the upstream/downstream relationship is established.
  2. Vue.observable makes an object responsive. It is used internally by Vue to process objects returned by the data function. The returned object can be used directly in rendering functions and computed properties, and will trigger an update if it changes. Can also be used as a minimal cross-component state store for simple scenarios:
const state = Vue.observable({ count: 0 })

const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)}}Copy the code
  1. $attrs contains feature bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and internal components can be passed in via V-bind =”$attrs” — useful when creating higher-level components.
  2. The $Listeners contain V-ON event listeners in the parent scope (without the.native modifier). Internal components can be passed in via V-on =”$Listeners “– useful for creating higher-level components.
  3. props
  4. $emit
  5. eventbus
  6. vuex
  7. $parent / $children / ref