VUE front-end frequently asked interview questions

---

1. VUE front-end frequently asked interview questions

1. The difference between MVC and MVVM

MVC: The full name of MVC is Model View Controller, which is the abbreviation of Model-View-Controller, a model of software design.
Model (model): is used to process the logic part of the application data. Usually model objects are responsible for accessing data in the database.
View (view): It is the duty of processing data display in the application. Usually views are created from model data.
Controller (controller): is the part of the application that handles user interaction. Typically the controller is responsible for reading data from the view, controlling user input, and sending data to the model.

The idea of ​​MVC: One sentence description is that the Controller is responsible for displaying the data of the Model with the View, in other words, assigning the data of the Model to the View in the Controller.
MVVM: MVVM adds the VM class.
ViewModel layer: Two things are done to achieve the two-way binding of data. One is to convert the model into a view, that is, to convert the data passed by the back end into the page you see. The way to achieve it is "data binding". The second is to convert the view into a model, that is, convert the viewed page into back-end data. The way to achieve it is "DOM event monitoring".

The biggest difference between MVVM and MVC is the automatic synchronization of View and Model, that is, when the properties of Model change, we no longer need to manually manipulate Dom elements to change the display of View. Instead, the View layer display corresponding to the attribute will automatically change after the attribute is changed (corresponding to the Vue data-driven idea). On the whole, MVVM is much simpler than MVC, which not only simplifies the dependence of business and interface, but also solves the problem of frequent data updates. , no need to use selectors to manipulate DOM elements. Because in MVVM, the View does not know the existence of the Model, and the Model and ViewModel are not aware of the View. This low coupling mode improves the reusability of the code.

2. Why data is a function

The data of the component is written as a function, and the data is defined in the form of the return value of the function, so that every time the component is reused, a new piece of data will be returned, similar to creating a private data space for each component instance, allowing each component instance to maintain respective data. However, simply writing it in the form of an object makes all component instances share a piece of data, which will result in a result that everything will change if it changes.

3. What are the communication methods of Vue components?

(1) props and $emit.The\; parent\; component\; transmits\; data\; to\; the\; child\; component\; throughprops\; ,\; and\; the\; child\; componenttransmitsdata\; to\; the\; parent\; component\; through$ emit triggering events$.$
(2) $parent and$childrenGet\; the\; parent\; component\; of\; the\; single\; sign\; component\; and\; the\; child\; component\; of\; the\; current\; component.\left(3\right)$ attrs and$listenersA->B->C.\_Vue2.4began\; to\; provide$ attrs and$listenerstosolvethisproblem.\_\_(4\; )Variables\; areprovided\; throughprovidein\; the\; parent\; component,\; and\; thenvariablesare\; injected\; throughinjecttin\; the\; childcomponent.(Officially\; not\; recommended\; for\; use\; in\; actual\; business,\; but\; it\; is\; commonly\; used\; when\; writing\; component\; libraries.)\; (5)$ refs Get component instances.
(6) The envetBus brother component data transfer, in this case, the event bus can be used.
(7) vuex state management.

4. What are the life cycle methods of Vue? At what step is the request usually sent?

beforeCreate: Called after instance initialization, before data observe and event/watcher event configuration. Data and methods on data, methods, computed, and watch cannot be accessed at the current stage.
created: Called after the instance has been created. In this step, the instance has completed the following configurations: data observe, operation of attributes and methods, and watch/event event callback. There is no el here $el,\; if\; you\; want\; tointeract\; withtheDOM$ , you can access the DOM$through\; v$$m$$.\; nextTick.$
beforeMoun: called before the mount starts: the related render function is called for the first time.
Mounted: Occurs after the mount is completed. At the current stage, the real Dom is mounted, the data is bound two-way, and the Dom node can be accessed.
beforeUpdate: Called when the data is updated, before the virtual DOM is re-rendered and patched. Further state changes can be made in this hook without triggering an additional re-render pass.
updated: Occurs after the update is completed, and the component Dom in the current stage has been updated. Be careful to avoid updating data during this time, because this may cause an infinite loop of updates, this hook is not called during server rendering.
beforeDestroy: Called before the instance is destroyed. At this step, the strength is still fully available. We can do finishing touches at this point, such as clearing the timer.
destroy: Called after the Vue instance is destroyed. After calling, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and the left and right sub-instances will also be destroyed. This hook will not be called during server-side rendering.
Activated: Exclusive to keep-alive, called when the component is activated.
Deactivated: Exclusive to keep-alive, called when the component is destroyed.
At which step is the asynchronous request initiated:
Asynchronous requests can be made in the hook functions created, beforeMount, and mounted, because in these three hook functions, data has already been created, and the data returned by the server can be assigned.
If the asynchronous request does not need to rely on DOM, it is recommended to call the asynchronous request in the created hook function, because calling the asynchronous request in the created hook function has the following advantages:
it can get the server data faster and reduce the page loading time. ssr does not support beforeMount and mounted hook functions, so putting them in created will help consistency.

5. The difference between v-if and v-show

v-if will be converted into a ternary expression during compilation, and this node will not be rendered when the condition is not met.
v-show will be compiled into instructions. When the condition is not met, the control style will hide this node (display:none).
Usage scenario
v-if is suitable for scenarios where conditions are rarely changed at runtime and do not need to switch conditions frequently.
v-show is suitable for scenarios that require very frequent switching conditions.

6. Talk about vue built-in instructions

v-once: The element or component that defines it is rendered only once, including all nodes of the element or component. After the first rendering, it will no longer be re-rendered as the data changes, and will be regarded as static content.
v-cloak: This directive stays on the element until the associated instance finishes compiling – a best practice to solve the slow initialization to page flickering.
v-bind: bind attributes, dynamically update attributes on HTML elements. For example v-bind: class.
v-on: used to monitor DOM events. For example, v-on:click v-on:keyup
v-html: the assignment is the innerHTML of the variable - pay attention to prevent xss attacks
v-text: update the textContent of the element
v-model: become syntactic sugar for value and input on ordinary tags, And it will deal with the problem of pinyin input method. The component also handles value and input syntactic sugar.
v-if, v-else, v-else-if: can be used with template; in the render function, it is a ternary expression.
v-show, implemented using instructions – will eventually be displayed and hidden through display.
The result compiled by v-for and loop instructions is that -L represents the rendering list. It is best not to use it with a higher priority than v-if, and try to use computed properties to solve it. Pay attention to increase the unique key value, do not use index as the key.
v-pre, skip the compilation process of this element and sub-elements, so as to speed up the compilation speed of the entire project.

7. How to understand the single item data flow of Vue

Data is always passed from the parent component to the child component. The child component has no right to modify the data passed from the parent component, but can only request the parent component to modify the original data. This prevents accidental changes to the state of the parent component from child components, which can make your app's data flow difficult to understand.
Note: It is an irregular way to directly use v-model to bind the props passed from the parent component in the child component, and the development environment will report a warning. If you really want to change the props value of the parent component, you can define a variable in data, initialize it with the value of prop, and then use $emit to notify the parent component to modify it.

8. The difference between computed and watch and the application scenarios.

Computed is a computed attribute, which relies on other attributes to calculate values, and the value of computed is cached. When the computed value changes, the content will be returned. It can set getters and setters.
When the watch monitors the value change, it will execute the callback, and a series of operations can be performed in the callback.
Computed properties are generally used in template rendering. A certain value depends on other response objects or even calculated properties. Listening properties are suitable for observing changes in a certain value to complete a complex business logic.

9. Why v-if and v-for are not recommended to be used together

Do not use v-for and v-if in the same tag, because v-for is parsed first and then v-if is parsed. If you need to use it at the same time, you can consider writing it as a computed property.

10. The principle of Vue 2.0 responsive data

The overall idea is data hijacking + observer mode. The object internally uses the defineReactive method to hijack properties using Object.defineProperty (only existing properties will be hijacked), and the array is realized by rewriting the array. When the page uses the corresponding attribute, each attribute has its own dep attribute, and there is a watcher (dependency collection) get on which it depends. When the attribute changes, it will notify the corresponding watcher to update (distribute update) set.

11. How does Vue detect array changes

For performance reasons, the array did not use defineProperty to intercept each item of the array, but chose to rewrite the methods of 7 arrays (push, shift, pop, splice, unshift, sort, reverse) (AOP slicing idea). So modifying the index and length of the array in Vue cannot be monitored. It is necessary to modify the array through the above 7 mutation methods to trigger the watcher corresponding to the array to update.

12. Have you ever used Vue3.0? How much do you know?

The change of responsive principle Vue3.x uses Proxy to replace Object.defineProperty of Vue2.x version.
Component option declaration method Vue3.x uses Composition API setup is a new option in Vue3.x, which is the entry point for using Composition API in components.
Template syntax changes slot named slot syntax, custom instruction v-model upgrade.
Other changes Suspense supports Fragment (multiple root nodes) and Portal (rendering component content in other parts of the dom) components, and handles some special scenarios. Based on treeShaking optimization, it provides more built-in functions.

13. The difference between the responsive principle of Vue3.0 and 2.0

Vue3.x uses Proxy instead of Object.defineProperty. Because Proxy can directly monitor the changes of objects and arrays, and there are as many as 13 interception methods.
The execution order of Vue's parent-child component lifecycle hook functions is as follows:
Loading rendering process:
parent beforeCreate -> parent created -> parent beforeMount -> child beforeCreate -> child created -> child beforeMount -> child mounted -> parent mounted
child component update process :
parent beforeUpdate -> child beforeUpdate -> child updated -> parent updated
parent component update process:
parent beforeUpdate -> parent updated
destruction process:
parent beforeDestroy -> child beforeDestroy -> child destroyed -> parent destroyed

14. What is virtual DOM? What are the pros and cons?

Since manipulating the DOM in the browser is expensive. Frequent operation of DOM will cause certain performance problems. This is the reason for the virtual Dom. Vue2's Virtual DOM draws on the implementation of the open source library snabbdom. The essence of Virtual DOM is to use a native JS object to describe a DOM node, which is an abstraction of the real DOM.
Advantages:
(1) Guarantee the lower limit of performance: the virtual DOM of the framework needs to adapt to any operations that may be generated by the upper-layer API, and the implementation of some DOM operations must be universal, so its performance is not optimal; but compared to Rough DOM operation performance is much better, so the virtual DOM of the framework can at least guarantee that you can still provide good performance without manual optimization, which not only guarantees the lower limit of performance.
(2) There is no need to manually operate the DOM: we do not need to manually operate the DOM, we only need to write the code logic of the View-Model, and the framework will bind the virtual DOM and data bidirectionally to help us update the view in a predictable way, greatly Improve our development efficiency.
(3) Cross-platform: Virtual DOM is essentially a JavaScript object, and DOM is strongly related to the platform. In contrast, virtual DOM can perform cross-platform operations more conveniently, such as server-side rendering, weex development, etc.
Disadvantages:
(1) Unable to perform extreme optimization: Although reasonable optimization of virtual DOM+ is sufficient to meet the performance needs of most applications, virtual DOM cannot be targeted for extreme optimization in some applications with extremely high performance requirements.
(2) When rendering a large amount of DOM for the first time, due to an additional layer of DOM calculation, it will be slower than innerHTML insertion.

15. Principle of v-model

v-model is just syntactic sugar. v-model internally uses different properties and throws different events for different input elements.
text and textarea elements use value property and input event;
checkbox and radio use checked property and change event;
select field has value as prop and change as event.
Note: For languages ​​that require an input method, you will find that the v-model will not be updated during the process of combining text in the input method.

16. Why does v-for need to add key

If no key is used, Vue will use an algorithm that minimizes dynamic elements and tries to modify and reuse elements of the same type as much as possible. key is the unique identifier of Vnode in Vue. With this key, our diff operation can be more accurate and faster.
More accurate: because the key is not in-place multiplexing, in-place multiplexing can be avoided in the sameNode function a.key === b.key comparison. So more accurate.
Faster: Use the uniqueness of the key to generate a map object to obtain the corresponding node, compared with the traversal block.

17. The principle of Vue event binding

Native event binding is bound to real elements through addEventListener, and component event binding is realized through Vue's custom $on. If you want to use native events on components, you need to add the .native modifier, which is equivalent to treating child components as ordinary HTML tags in the parent component, and then adding native events.
$on,$ emit is based on the publish-subscribe model, maintains an event center, and stores the event in the event center by name when it is on, which is called a subscriber, and then emit publishes the corresponding event to execute the corresponding event in the event center of the listener.

18. What is the vue-router routing hook function? What is the order of execution?

The execution process of the routing hook. The types of hook functions include: global guard, routing guard, and component guard.
Complete navigation analysis process:
(1) Navigation is triggered.
(2) Call the beforeRouterLeave guard in the deactivated component.
(3) Call the global beforeEach guard.
(4) Call the beforeRouterUpdate guard (2.2+) in the reused component.
(5) BeforeEnter in the routing configuration.
(6) Parsing asynchronous routing components.
(7) Call beforeRouterEnter in the activated component.
(8) Call the global beforeResolve guard (2.5+).
(9) Navigation is confirmed.
(10) Call the global afterEach hook.
(11) Trigger DOM update.
(12) Call the callback function passed to next in the beforeRouterEnter guard, and the created component instance will be passed in as a parameter of the callback function.

19. What is vue-router dynamic routing? What is the problem.

We often need to map all routes matched by a certain pattern to the same component. For example, we have a User component, which is used to render all users with different IDs. Well, we can use "dynamic segment" in the routing path of vue-router to achieve this effect.

20. Talk about your personal understanding of vuex

Vuex is a global state management system specially provided for Vue, which is used for data sharing, data caching, etc. in multiple components. (It cannot be persisted, the internal inner principle is to create a global instance new Vue)

It mainly includes the following modules:
State: defines the data structure of the application state, where the default initialization state can be set.
Getter: Allows components to get data from the Store. The mapGetters helper function simply maps the getters in the store to local computed properties.
Mutation: is the only way to change the state in the store, and must be a synchronous function.
Action: It is used to submit a mutation instead of directly changing the state, and can contain any asynchronous request.
Module: Allows a single Store to be split into more stores and stored in a single state tree at the same time.

21. How to solve the data loss of Vuex page refresh?

Vuex data persistence needs to be done. Generally, local storage solutions are used to save data. You can design your own storage solutions or use third-party plug-ins. It is recommended to use the vuex-persist (preserved meat sester) plug-in, which is a plug-in for Vuex persistent storage. You don't need to manually access storage, but directly save the state to cookie or localStorage.

22. Why should Vuex be divided into modules and add namespaces?

Module: Due to the use of a single state tree, all the state of the application will be concentrated into a relatively large object. When the application becomes very complex, the store object can become quite bloated. To solve the above problems, Vuex allows us to split the store into modules. Each module has its own state, mutation, action, getter, and even nested submodules.
Namespace: By default, actions, mutations, and getters inside a module are registered in the global namespace—this enables multiple modules to respond to the same mutation or action. If you want your module to have higher encapsulation and reusability, you can make it a named module by adding namespaced:true. When a module is registered, all its getters, actions, and mutations will be automatically named according to the path of the module registration.

23. Have you ever used Vue SSR? Talk about SSR.

SSR is server-side rendering, that is, the work of Vue rendering tags into HTML on the client side is completed on the server side, and then the html is returned directly to the client.
Pros: SSR has better SEO and loads faster above the fold.
Disadvantages: The development conditions will be limited. Server-side rendering only supports beforeCreate and created hooks. When we need some external extension libraries, special processing is required. Server-side rendering applications also need to run in the Node.js operating environment.

24. What design patterns are used in Vue?

(1) Factory mode: pass in parameters to create an instance. Virtual DOM returns the Vnode of the base tag and the component Vnode according to different parameters.
(2) Singleton mode: The entire program has and only one instance. The plug-in registration method install of vuex and vue-router judges that if there is an instance in the system, it returns directly.
(3) Publish-subscribe model. (vue event mechanism)
(4) Observer mode. (Responsive data principle)
(5) Decorator pattern (usage of @decorator)
(6) Strategy pattern, strategy pattern means that an object has a certain behavior, but in different scenarios, the behavior has different implementations - for example Merge strategy for options.

25. What Vue performance optimizations have you done?

Only the performance optimization for Vue is listed here, and the performance optimization of the entire project is a big project.
(1) The object level should not be too deep, otherwise the performance will be poor.
(2) Do not put data that does not require responsiveness in data (you can use Object.freeze() to freeze the data).
(3) v-if and v-show distinguish usage scenarios.
(4) Computed and watch are used in different scenarios.
(5) v-for traversal must add a key, the key is preferably an id value, and avoid using v-if at the same time.
(6) Large data list and table performance optimization: virtual list/virtual table. To prevent internal leakage, global variables and time are destroyed after the component is destroyed.
(7) Image lazy loading, routing lazy loading, asynchronous routing.
(8) On-demand loading of third-party plug-ins
(9) Appropriate use of keep-alive cache components
(10) Application of anti-shake and throttling
(11) Server-side rendering SSR or pre-rendering

26. The usage scenarios and principles of Vue.mixin

In daily development, we often encounter some same or similar codes that are often used in different components. The functions of these codes are relatively independent, and the public business logic can be extracted through the mixin function of vue. The principle is similar to "object 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. When components and mixins contain options with the same name, those options will be "merged" in an appropriate manner.

27. nextTick usage scenarios and principles

The callback in nextTick is a deferred callback that executes after the next DOM update cycle ends. Use this method immediately after modifying the data to get the updated DOM. The main idea is to call the asynchronous method to execute the method wrapped by nextTick in a microtask-first manner.

28. Use scenarios and principles of keep-alive

keep-alive is a built-in component of Vue, which can implement component caching, and will not unload the current component when the component is switched.
The two commonly used attributes include/exclude allow components to be cached conditionally.
Two life cycles activated/deactivated are used to know whether the current component is active or not.
keep-alive uses the LRU algorithm to select the most recently unused components to be eliminated.

29. Principle of Vue.set method

Students who understand the principle of Vue responsiveness know that modifying Vue in both cases will not trigger view updates.
(1) Add new properties to the instance after the instance is created (add new properties to the responsive object).
(2) Directly change the array subscript to modify the value of the array.
The principle of Vue.set or $set is as follows:
because of the responsive data, we add the __ob__ attribute to the object and array itself, which represents the Observer instance. When adding a non-existing attribute to an object, the new attribute will first be tracked responsively and then the watcher collected by the dep of the object ob will be triggered to update. When modifying the array index, we call the splice method of the array itself to update the array.

30. Function and principle of Vue.extend

Official explanation: Vue.extend uses the base Vue constructor to create a "subclass". The argument is an object containing options for the component.
In fact, it is a subclass constructor, which is the core API of Vue components. The implementation idea is to use the method of prototype inheritance to return the subclass of vue, and use mergeOptions to merge the options of the incoming component with the options of the parent class.

31. Have you ever written a custom instruction? What is the principle?

Instructions are essentially decorators, which are vue's extensions to HTML elements, adding custom functions to HTML elements. When vue compiles the DOM, it will find the instruction object and execute the related methods of the instruction.
Custom directives have five life cycles (also called hook functions), namely bind, inserted, update, componentUpdated, and unbind
(1) bind: only called once, when the directive is bound to an element for the first time. One-time initialization settings can be performed here.
(2) inserted: Called when the bound element is inserted into the parent node.
(3) update: Called when the template where the bound element is located is updated, regardless of whether the bound value changes. By comparing the bound values ​​before and after.
(4) componentUpdated: Called when the template where the bound element is located completes an update cycle.
(5) unbind: Called only once, when the instruction is unbound from the element.
Principles:
(1) When generating the ast syntax tree, encountering a directive will add a directives attribute to the current element
(2) Generate the directive code through genDirectives
(3) Extract the hook of the directive into cbs before patching, and call it during the patching process corresponding hook.
(4) When the hook function corresponding to the instruction is executed, call the corresponding instruction definition method.

32. What are the Vue modifiers?

Event modifiers:
.stop prevents the event from continuing to propagate.
.prevent prevents the label from default behavior.
.capture uses the event capture mode, that is, events triggered by the element itself are processed here before being handed over to internal elements for processing.
.self Trigger the handler only if event.target is the current element itself.
The .once event will only fire once.
.passive tells the browser that you don't want to prevent the event's default behavior.
Modifier of v-model:
.lazy Through this modifier, it is transformed into resynchronization on change event.
.number automatically converts the user input value to a numeric type.
.trim automatically filters trailing spaces from user input.
Keyboard event modifiers:
.enter, .tab, .delete (captures "delete" and "backspace" keys), .esc, .space, .up, .down, .left, .right System
modifiers:
.ctrl, .alt, .shift, .metaMouse
button modifiers
.left, .right, .middle

33. Principle of Vue template compilation

The compilation process of Vue is the process of converting the template into a render function, which is divided into the following three steps:
The first step is to convert the template string into element ASTs (parser).
The second step: static node marking on AST, which is mainly used for rendering optimization of virtual DOM (optimizer). The third step: is to use element ASTs to generate render function code strings (code generator)

34. How is the lifecycle hook implemented?

The core implementation of Vue's lifecycle hook is to use the publish-subscribe model to first subscribe to the lifecycle hook passed in by the user (internal storage using an array method), and then execute the corresponding hook method once in the process of creating a component instance.

35. Functional components usage scenarios and principles

The difference between functional components and ordinary components:
(1) Functional components need to specify functional: true when declaring the component
(2) No instantiation is required, so there is no this, this is replaced by the second parameter context of the render function
(3) There is no lifecycle hook function, and computed properties cannot be used. Watch
(4) cannot $emitexposes\; events\; to\; the\; outside\; world,\; and\; calling\; events\; can\; onlycall\; external\; incoming\; eventsthroughcontext.listeners.clck(5\; )because\; the\; function\; component\; isnotinstantiated\; Yes,so\; whenthe\; component\; is\; referenced\; externally\; throughref\; ,\; the\; actualreferenceisHTMLElement(6)Thepropsof\; the\; functional\; componentdoesnot\; need\; to\; be\; explicitly\; declared,\; so\; it\; is\; notinthepropsThe\; declared\; attributes\; will\; be\; automatically\; and\; implicitly\; parsed\; asprop,\; and\; all\; undeclared\; attributes\; of\; ordinary\; components\; are\; parsed\; into$ attrs and automatically mounted on the root element of the component (can be disabled through the inheritAttrs attribute).
Advantages:
1. Since function components do not need to be instantiated, they are stateless and lifeless cycle, so the rendering performance is better than ordinary components.
2. The function component structure is relatively simple, and the code structure is clearer

36. Can you talk about the commonly used routing modes and implementation principles in vue-router?

Hash mode:
(1) The value of location.has is actually what follows # in the URL. Its characteristic is that although the hash appears in the URL, it will not be included in the HTTP request and has no effect on the backend at all, so changing the hash will not reload the page.
(2) You can add listener events for hash changes window.addEventListener("hashchange", funcRef, false)
every time you change the hash (window.location.hash), a record will be added to the browser's access history, using hash With the above characteristics, the front-end routing function of "updating the view without re-requesting the page" can be realized. Compatibility is good but not beautiful.
History mode:
Use the new pushState() and replaceState() methods in the HTML5 History Interface. These two methods are applied to the history record station of the browser. On the basis of the existing back, forward and go, they provide the function of modifying the history record. These two methods have one thing in common: when they are called to modify the browser history stack, although the current URL has changed, the browser will not refresh the page, which means "update the view but not re-request the page" for the single-page application front-end route ” provides the basis. Although it is beautiful, 404 will appear when refreshing, and the backend needs to be configured.

37. What is two-way binding?

Let's start with one-way binding. One-way binding is very simple, that is, bind the Model to the View, and when we update the Model with JavaScript code, the View will be updated automatically.
Two-way binding is easy to think of. On the basis of one-way binding, when the user updates the View, the data of the Model is automatically updated. The situation in the figure below is two-way binding.

When the user fills in the form, the state of the View is updated. If the state of the Model can be automatically updated at this time, it is equivalent to a two-way binding between the Model and the View.

38. What is the principle of two-way binding?

We all know that Vue is a framework for two-way binding of data. Two-way binding consists of three important parts:
Data layer (Model): application data and business logic
View layer (View): application display effect, various UI component
business logic Layer (ViewModel): The core
of framework encapsulation , it is responsible for associating data with views
. Certainly" . Naturally, we only need to understand what it is to learn more about the principles of data binding.
Understand ViewModel, its main responsibility is to update the view after the data changes, and update the data after the view changes. Of course, it also has two main parts:
Observer (Observer): monitor the attributes of all data.
Compiler (Compiler): scan and parse the instructions of each element node, replace data according to the instruction template, and bind Define the corresponding update function.

2. Document download address

Word document download address: VUE front-end frequently asked interview questions