Jin SAN Yin Si, the domestic Internet recruitment market continues to develop, the fierce competition. Asked a few HR friends and found several sounds:

“We get a lot of applications, but very few suitable ones.”

“I tried hard to recruit people, but as a result, the two rounds of interviews were canceled, and now the workers of big factories are uneven…”

“In recruit front end, either academic degree is not enough, or will only be an armchair strategist, or ability is general, also lion big open mouth….”

There is no shortage of good jobs, but few matches.

Big factory, high salary, high class everyone wants, but the threshold is higher than the next.

But then again, there are a lot of people who make it, and the benefits are pretty good. Not long ago, my friend Superman passed three rounds of interviews and jumped into Ali, continuing to do the front end.

Therefore, blacksmith also need their own hard. He has done three years of front-end work, pragmatic, capable, job-hopping big factory is also reasonable!

Speaking of interviews, I asked about him. “There are a lot of questions about how Vue works and how it optimizes,” he says. Then there is the business logic……. “

According to this view, for today’s front-end job seekers, it is not enough to only use Vue, but also to dig into its internal framework and implementation principles.

Next, super full front-end Vue learning materials here, need friends quickly collect ~

Vue knowledge points

Why can’t Vuex mutation do asynchronous operation?

  • The only way for any state update in Vuex is mutation, and the asynchronous operation is implemented by submitting mutation via Action. This allows us to easily track each state change, which allows us to implement tools that help us better understand our application.
  • Each mutation was updated with a new state change so devTools could take a snapshot and then implement time-travel. If mutation supported asynchronous operations, there was no way to know when the state was updated, and no tracking of the state was possible, making debugging difficult.

Why are v-for and V-if not recommended together

  • When v-for and V-IF are on the same node, V-for has a higher priority than V-if, which means that V-IF will run separately in each V-for loop. This can be a significant performance waste if the array to be traversed is large and the actual data to be displayed is small
  • In this scenario, it is recommended to use computed data filtering first

Why is data in a component a function?

  • When a component is reused multiple times, multiple instances are created. Essentially, these instances all use the same constructor.
  • If data is an object, the object is a reference type that affects all instances. So to ensure that data does not conflict between different instances of the component, data must be a function.

How does nextTick work?

  • A deferred callback is performed after the end of the next DOM update loop, and nextTick is used to retrieve the updated DOM immediately after the data is modified.
  • NextTick mainly uses macro and micro tasks.
  • Promise, MutationObserver, and setImmediate are used depending on the execution environment. If none of the above fails, setTimeout defines an asynchronous method, through which multiple calls to nextTick are queued to clear the current queue.

What changes to an array cannot Vue detect? Vue uses vm.$set() to respond to new attributes.

  • Vue cannot detect changes to the following arrays:
    • The first kind of question

Vue. Set Vue. Set (vm.items, indexOfItem, newValue) Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)

  • Splice: vm.items.splice(newLength)
  • When you set an array item directly using an index, for example, vm.items[indexOfItem] = newValue
  • When you modify the length of an array, for example, vm.items. Length = newLength

Solutions:

  • The implementation principle of vm. $set is:
    • If the target is an array, use the array splice method directly to trigger the corresponding expression.
    • If the target is an object, the presence of the attribute and whether the object is reactive are first read. Finally, if the attribute is to be processed responsively, it is processed responsively by calling the defineReactive method (the defineReactive method is when Vue initializes the object, Method called to dynamically add getters and setters to Object properties using Object.defineProperty)

What is the component lifecycle call sequence in Vue?

  • Components are called in the order of parent after child, rendering is completed in the order of child after parent.
  • The destruction of a component is parent before child, and the destruction is completed in the order of child after parent.

Vue hot interview questions

  1. Vue – cli project
  2. Vue core knowledge points
  3. vue-router
  4. vuex
  5. The HTTP request
  6. The UI style
  7. Commonly used functions
  8. MVVM design pattern