37 common Vue interview questions to enhance your Vue knowledge reserve!

This article summarizes and shares 37 common Vue interview questions with you, helping you consolidate the foundation and enhance your Vue knowledge reserve, just memorize it and you're done!

Related recommendations:2022 Big Front-End Interview Questions Summary (Collection)

1. Talk What is your understanding of MVVM?

Simplified mapping relationship, hidden controller Based on MVC, MVVM hides the control layer.

Vue is not an MVVM framework, it is a view layer framework. [Related recommendations:vue.js video tutorial]

ViewModal is a bridge that associates data with views.

2. Talk about your understanding of responsive data in Vue?

When the values of array and object types change, all properties are added withgetterandsetter. Users can perform some operations when obtaining and setting values.Defect: Only the outermost attributes can be monitored. If it is multi-layered, full recursion is required.Get will do dependency collection (dep[watcher, watcher]) Data updates will be done in the set (notify, notify the watcher to update)

3. How to detect changes in the array in Vue?

Vue does not defineProperty for the array, but rewrites the 7 methods of the array. They are:

push

shift

• pop
• splice
• unshift
• sort
• reverse
• Because these methods will change the array itself.
• The index and length in the array cannot be monitored.

4. How to collect dependencies in Vue?

#When Vue is initialized, it will be compiled after mounting. Generate renderFunction.

When the value is obtained, watchers will be collected and placed in dep.

When the user changes the value, the watcher will be notified to update the view.

5. How to understand the template compilation principle in Vue?

The core of this problem is how to convert template into render function.

Convert the template module into an ast grammar book - parserHTML

Mark the static grammar (some nodes do not change)

1. Regenerate the code-codeGen, use with syntax wraps the string
2. 6. How is the Vue life cycle hook implemented?
3. Vue’s life cycle hook is a callback function, which will be called when creating a component instance. hook method. The hook will be processed internally and the hook function will be maintained in the form of an array.

7. What are the life cycles of Vue components?

beforeCreate is called after the instance is initialized, before the data observation observer and event and watcher event configuration

created The instance has been created. At this step, the following configuration is completed

• Data observation
• Operation of properties and methods
  • watch/event time callback
  • $el has not been generated yet
  • ##beforeMount Called before mounting, render has not yet been called.
  • mounted el is replaced by the newly created vm.$el, and is called after mounting to the instance.
beforeUpdate is called when the data is updated. , occurs before the virtual Dom is re-rendered and patched
• update The virtual Dom is re-rendered and patched due to data changes, after which
• beforeDestroy is called before the instance is destroyed
• destroyed is called after the instance is destroyed. After the call, everything in the Vue instance will be unbound, all event listeners will be removed, and the sub-instance will be destroyed. This hook will not be called during server-side rendering
• keep-alive (activated & deactivated)
• 8. Usage scenarios and principles of vue.mixin?
• The function of Vue’s mixin is to abstract public business logic, and the principle is similar to objects Inheritance, when the component is initialized, the mergeOptions method will be called to merge, and the strategy mode will be used to merge different attributes. If the mixed data conflicts with the data of the own component, the own data shall prevail.

Disadvantages: Naming conflicts, unclear data sources

9. Why does Vue’s component data have to be a function?

new Vue

is a single In example mode, there will not be any merge operations, so the root instance does not need to verify that data must be a function. The data of the component must be a function to prevent the data of the two components from being contaminated. If they are all objects, they will point to the same address when merged. And if it is a function, two spaces will be generated when called during merging.

10. Please explain the principle of nextTick.

nextTick is a microtask.

• The callback in nextTick is a delayed callback executed after the next Dom update cycle ends
• Can be used to obtain the updated Dom
• The data update in Vue is asynchronous , using nextTick can ensure that user-defined logic is executed after the update

11. What is the difference between computed and watch?

• Computed and watch are both implemented based on watcher.
• Computed attributes are cached, and the dependent values do not change. When taking values, the calculated attribute method will not be executed repeatedly.
• watch is to monitor the change of the value. When the value changes When, the callback function will be called

12. How is the Vue.set method implemented?

• vue adds the dep attribute to both the object and the array itself
• When a non-existent attribute is added to the object, the watcher that the object depends on will be triggered to update
• When modifying the array index, call the splice method of the array itself to update the array

13. Why does Vue use virtual Dom

• Virtual dom is Using js objects to describe the real Dom is an abstraction of the real Dom
• Due to the low performance of direct operation of the Dom, the operation efficiency of the js layer is high, and the Dom operation can be converted into an object operation. Finally, the difference is updated through the diff algorithm. Dom
• Virtual Dom does not rely on the real platform environment and can achieve cross-platform

14. What is the principle of Vue's diff algorithm?

Vue’s diff algorithm is a flat comparison and does not consider cross-level comparisons. Deep recursion is used internally to compare using double pointers

• First compare whether two nodes are the same node
• Compare attributes of the same nodes and reuse old nodes
• First Compare son nodes, consider the situation of the old node and the son of the new node
• Optimize comparison: head-to-head, tail-to-tail, head-to-tail, tail-to-head
• Compare and search, reuse

15. Since Vue can accurately detect data changes through data hijacking, why do we need to perform diff to detect differences?

• Responsive data changes, Vue can indeed know when the data changes, the responsive system can immediately know. But if a watcher is added to each attribute, the performance will be very poor.
• Too fine granularity will lead to inaccurate updates

So the watcher Diff algorithm is used to detect differences.

16. Please explain the function and principle of key

• During the patch process, Vue can determine whether two virtual nodes are the same node through the key.
• Not having a key will cause problems during update
• Try not to use the index as the key

Seventeen, talk about it Understanding of components

• Component-based development can greatly improve application development efficiency, testability, and reusability
• Commonly used component-based technologies: attributes, custom events, slots
• Reduce the update scope and re-render the changed components
• High cohesion, low coupling, one-way data flow

18. Please describe the rendering process of the component

Generate virtual node of component-> Create real node of component-> Insert into page

19. Please describe the update process of the component

Attribute update will trigger the patchVnode method, and the virtual node of the component will call the prepatch hook, then update the properties and update the component.

##20. Principle of asynchronous components

Render the asynchronous placeholder node first -> After the component is loaded, call forceUpdate to force the update.

21. Advantages and principles of functional components

Characteristics of functional components: stateless, no life cycle, no this. So the performance will be a little higher.

A normal component is a class that inherits Vue.

Functional component is an ordinary function.

22. What are the methods of passing values in components?

1. props and $emit: The parent component passes data to the child component through prop. The child component passes data to the parent component through$
2. ##p $arent,\mathrm{parent,}$##p
3. at $rs\mathrm{and}attrs\; and\#\#a$teventBus level component data transfer
Vuex
5. 23. What problem does $attrs appear to solve?
6. The main function is to transfer data in batches.
7. provide/inject is more suitable for application in plug-ins, mainly to achieve cross-level data transfer.

Twenty-four, which one has higher priority, v-for or v-if?

First of all, v-for and v-if cannot be used in the same tag.

Process v-for first, then v-if.

If encountered at the same time, you should consider using calculated attributes to process the data first, and then perform v-for to reduce the number of loops.

25. How is v-mode implemented?

The v-model used on components is model and callback

When v-model is used on ordinary elements, instructions will be generated, and it may also be caused by Different elements:

• Generate value and input
• Generate change and radio
• Generate change and checked

When will the instruction be called?

Source code:

26. The difference between Vue’s normal Slot and scope Slot

Normal slot

Normal slot is the work of replacement after rendering. After the parent component is rendered, replace the content of the child component.

When compiling the template, process the child nodes and slot tags in the component

When creating the element , replace the contents of _v() with the _t() method.

Scope slot

The scope slot can get the properties in the subcomponent. Pass the properties in the child component and render it.

Compilation result of scope slot:

28. What does Vue.use do?

Vue.useis used to use plug-ins. We can extend global components, directives, prototype methods, etc. in plugins. Theinstallmethod will be called to pass in the Vue construction function by default. You can use vue in the plug-in without relying on the vue library

29. Components What are the benefits of writing name?

• Adding the name attribute will add the component itself to the components attribute to implement recursive calling of the component.
• can represent the specific name of the component to facilitate debugging and finding the corresponding component.

Thirty. What are the modifiers of vue?

• .stop
• .prevent
• .capture
• .self
• .once
• . passive
• .right
• .center
• .middle
• .alt

31. How to understand customization instruction?

• When generating the ast syntax tree, when encountering an instruction, the directives attribute will be added to the current element
• Generate instruction code through genDirectives
• Before patching, add the directive's The hook is extracted into cbs, and the corresponding hook is called during the patch process
• When the hook corresponding to cbs is executed, the corresponding instruction definition method is called

Thirty-two, keep-alive usually Where to use? What is the principle?

• When using keep-alive to wrap a dynamic component, the component will be cached to avoid component re-creation

There are two usage scenarios, one is a dynamic component and the other is router-view

#A whitelist and a blacklist are created here. Indicates what needs to be cached and what does not need to be cached. And the maximum number of caches.

#The cache is an instance of the component, which is saved with key and value objects.

When loading, monitor include and exclude.

If caching is not required, return the virtual node directly.

If you need to cache, use the component's id and tag name to generate a key, use the instance of the current vnode as the value, and save it as an object. This is the cache list

If the maximum number of caches is set, delete the 0th cache. Add the latest cache.

And add a keepAlive variable to the component to be true. When the component is initialized, it will no longer be initialized.

33. How many hook functions does vue-router have? How is the execution process?

There are three types of hook functions:

• Global Guard
• Routing Guard
• Component Guard

##34. The difference between the two modes of vuerouter

There are three modes in vue-router, namely hash, history, abstract
• Abstract is not Supports the use of browser APIs to change scenes
• hash mode has good compatibility, but is not beautiful and is not conducive to SEO
• history is beautiful, historyAPI popState, but refresh will cause 404

35. What are the performance optimizations of Vue?

Don’t have too deep data level, set responsive data reasonably
• When using data, cache the result of the value, and don’t take the value frequently
• Set key appropriately
• Rational use of v-show (high performance for frequent switching) and v-if
• Control the granularity of components-> Vue uses component-level updates
• Uses functional components- > Functional assembly has low overhead
• Use asynchronous components -> Use webpack’s subcontracting strategy
• Use keep-alive to cache components
• Virtual scrolling, time sharing Film and other strategies
• Packaging optimization

36. Talk about your understanding of Vuex?

Vuex is a global state management system specially provided for vue, used for data sharing and data caching in multiple components.

Problem: Unable to persist.

mutation mainly modifies the state and executes it synchronously
• action executes business code to facilitate reuse, and the logic can be asynchronous. The status cannot be modified directly.

37. What design patterns are used in vue?

Single case mode: new multiple times, only one instance

Factory mode: You can create it by passing in parameters Instance (creation of virtual node)
• Publish and subscribe mode: eventBus
• Observer mode: watch and dep
• Proxy mode: _data attribute, proxy, anti-shake, throttling
• Intermediary mode: vuex
• Strategy mode
• Appearance mode

Original address: https://juejin.cn/ post/7043074656047202334

Author: Hai Mingyue

(Learning video sharing:

web front-end)