Shulou(Shulou.com)06/03 Report--

Editor to share with you what the necessary Vue interview questions are, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Preface

In the Vue framework section, we will cover some high-frequency and valuable interview questions, but we will not cover some very rudimentary pure memory questions that can be viewed in official documents, such as:

What are the commonly used modifiers in vue?

What are the npm commands commonly used in vue-cli projects?

What is the role of keep-alive components in vue?

First of all, the above types of interview questions can be looked up in the document, and there is no more authoritative answer than the official document. secondly, this kind of question is of little value, except to examine the candidate's memory. Finally, anyone who has used vue knows that there is no need to take up our space.

We don't have many questions, but it may be more difficult. If you really understand these questions, you will have the effect of inference in most cases, and you can basically get all the important knowledge points related to Vue.

Your understanding of MVVM?

What is MVVM?

MVVM pattern, as its name implies, is Model-View-ViewModel pattern. It sprouted from WPF, a Windows-based user interface framework launched by Microsoft in 2005, and knockout, the earliest front-end MVVM framework, was released in 2010.

Model layer: the domain model corresponding to the data layer, which mainly synchronizes the domain model. The synchronization of client and server business Model is completed through API such as Ajax/fetch. In the inter-layer relationship, it is mainly used to abstract the Model of the view in ViewModel.

View layer: exists as a view template, and in MVVM, the entire View is a dynamic template. In addition to defining the structure and layout, it shows the data and state of the ViewModel layer. The View layer is not responsible for handling the state, while the View layer makes the declaration of data binding, instruction, and event binding.

ViewModel layer: expose the layer data needed by View and be responsible for the data binding declaration, instruction declaration and event binding declaration of the View layer, that is, dealing with the specific business logic of the View layer. The bottom layer of ViewModel will listen for binding attributes. When the data changes in the ViewModel, the View layer is updated, and when the two-way binding of the data (usually form elements) is declared in the View, the framework also listens for changes in the values of the View layer (form). Once the value changes, the data in the ViewModel bound by the View layer is also automatically updated.

What are the advantages and disadvantages of MVVM?

Advantages:

Separate views (View) from models (Model), reduce code coupling, and improve the reuse of views or logic: for example, views (View) can be changed and modified independently of Model, a ViewModel can be bound to different "View", Model can not be changed when View changes, and View can remain unchanged when Model changes. You can put some view logic in a ViewModel and let many view reuse this view logic.

Improve testability: the existence of ViewModel can help developers write test code better

Automatically update dom: using two-way binding, the view is updated automatically after data update, freeing developers from the tedious manual dom

Disadvantages:

Bug is difficult to debug: because using bi-directional binding mode, when you see an exception in the interface, it may be that your View code has Bug, or there may be a problem with Model code. Data binding allows the Bug of one location to be quickly transferred to another location, making it less easy to locate the original problem. In addition, the declaration of data binding is written in the template of View, and there is no way to break the debug.

The model in a large module can also be very large, although it is easy to use and it is easy to ensure the consistency of the data. at that time, it was held for a long time, and not releasing memory resulted in spending more memory.

For large graphics applications, there are more view states, and the cost of building and maintaining ViewModel will be high.

What is your understanding of the Vue life cycle?

What is the life cycle?

Vue instances have a complete life cycle, that is, a series of processes, such as creating, initializing data, compiling templates, mounting Dom-> rendering, updating-> rendering, unloading, and so on. We call this the life cycle of Vue.

The role of each life cycle

Lifecycle description beforeCreate component instance is created at the beginning, the created component instance is fully created and the properties are bound before the component properties take effect, but the real dom has not yet been generated, and the $el is not available beforeMount is called before the mount starts: the related render function is called for the first time mounted el is replaced by the newly created vm.$el, and after mounting to the instance, the hook beforeUpdate component data update is called It happens before the virtual DOM is patched, after the update component data is updated, the activited keep-alive is exclusive, when the component is activated, the deadctivated keep-alive exclusive is called, and when the component is destroyed, the beforeDestory component is called. Before the destoryed component is destroyed, the life cycle diagram is called after the destoryed component is destroyed.

In which life cycle is it appropriate for asynchronous requests to be invoked?

The asynchronous request for the official instance is invoked in the mounted life cycle, but it can actually be called in the created life cycle.

How do Vue components communicate?

Vue components communicate in the following ways:

Props/$emit+v-on: data is passed from top to bottom through props, and information is passed up through $emit and v-on.

EventBus: publish and subscribe information through EventBus

Vuex: a global data management library that allows you to manage global data flows through vuex

$attrs/$listeners: the $attrs/$listeners added to Vue2.4 allows cross-level component communication

Provide/inject: to allow an ancestral component to inject a dependency into all its descendants, no matter how deep the component level is, and always take effect when the upstream and downstream relationship is established, which becomes the basis of cross-component communication

There are others who use solt slots or ref instances to communicate, so the usage scenarios are too limited to elaborate.

What's the difference between computed and watch?

Computed:

Computed is a computational attribute, that is, a calculated value, and it is more used to calculate the value of the scene.

Computed is cached, and the value of computed will be cached after the execution of getter. Only after the value of the attribute it depends on has changed, the corresponding getter will be called again the next time the value of computed is obtained.

Computed is suitable for computing scenarios that consume more performance.

Watch:

It is more of an "observation" function, similar to the listening callback of some data, which is used to observe the value of props $emit or this component, and to perform callbacks for subsequent operations when the data changes.

Without caching, the page will be executed without changing the value when the page is re-rendered.

Summary:

When we want to do numerical calculations and rely on other data, then design this data as computed

If you need to do something when a data changes, use watch to observe the data change

How does Vue achieve two-way binding?

Using the accessor of the hijacked object by Object.defineProperty, we can get the change when the property value changes, and then respond to the change later, and do similar operations through the Proxy proxy object in vue3.0.

/ / this is the object to be hijacked const data = {name:',}; function say (name) {if (name = 'Gootianle') {console.log ('recommend a super fun game');} else if (name = = 'scum Hui') {console.log ('I have played a lot of plays, but I only play lazy months');} else {console.log ('come and be my brother') }} / / traverse the object and hijack Object.keys (data) .forEach (function (key) {Object.defineProperty (data, key, {enumerable: true, configurable: true, get: function () {console.log ('get');}, set: function (newVal) {/ / when the attribute value changes console.log (`Hello, I am ${newVal} `); say (newVal) },});}); data.name = 'dregs'; / / Hello, everyone, I have acted in a lot of dramas, but I only play lazy month to copy the code.

For detailed implementation, see the advantages and disadvantages of Proxy versus defineproperty?

What are the advantages and disadvantages of Proxy and Object.defineProperty?

The advantages of Proxy are:

Proxy can listen on objects instead of properties directly

Proxy can listen for changes in arrays directly.

Proxy has as many as 13 interception methods, which are not limited to apply, ownKeys, deleteProperty, has, etc., which Object.defineProperty does not have.

Proxy returns a new object. We can only manipulate the new object to achieve our goal, while Object.defineProperty can only traverse the object properties and modify them directly.

As a new standard, Proxy will be continuously optimized by browser vendors, which is the performance dividend of the legendary new standard.

The advantages of Object.defineProperty are:

Good compatibility and support for IE9

For detailed implementation, see the advantages and disadvantages of Proxy versus defineproperty?

How do you understand Vue's responsive system?

Brief introduction of responsive system:

Any Vue Component has a corresponding Watcher instance.

The getter and setter attributes are added to the data of the Vue.

When the Vue Component render function is executed, the data will be touch, that is, the getter method will be called, and Vue will record all the data on which the Vue component depends.

When the data is changed (mainly by the user), that is, the setter method is written, and the Vue will notify all components that depend on the data to call their render function to update.

What are the advantages and disadvantages of virtual DOM?

Advantages:

Guarantee the lower limit of performance: virtual DOM can find the minimum difference through diff, and then batch patch. Although this operation is not as good as manual optimization, it is much better than rough DOM operation, so virtual DOM can guarantee the lower limit of performance.

No need to manually operate DOM: both diff and patch of virtual DOM are carried out automatically in an update, so we do not need to operate DOM manually, which greatly improves the efficiency of development.

Cross-platform: virtual DOM is essentially a JavaScript object, while DOM is strongly related to the platform. Compared with virtual DOM, it is more convenient to operate across platforms, such as server rendering, mobile development, and so on.

Disadvantages:

Unable to perform extreme optimization: virtual DOM cannot perform targeted extreme optimization in some applications with extremely high performance requirements, for example, VScode uses direct manual operation of DOM for extreme performance optimization

The principle of virtual DOM implementation?

Virtual DOM is essentially a JavaScript object and an abstraction of real DOM.

Record the difference between the new tree and the old tree when the state changes

Finally, update the differences to the real dom.

See the principle of virtual DOM for detailed implementation.

Since Vue can accurately detect data changes through data hijacking, why do virtual DOM need diff to detect differences?

Test point: the change detection principle of Vue

Pre-knowledge: dependency collection, virtual DOM, responsive system

Modern front-end frameworks have two ways to detect change, one is pull and the other is push

Pull: it is represented by React, and we can recall how React detected the change. We usually explicitly update it with setStateAPI, and then React performs layers of Virtual Dom Diff operations to find out the differences, and then Patch to DOM, React does not know exactly where the change has taken place from the beginning, but only knows that "something has changed", and then carries out a more violent Diff operation to find "where it has changed." Another representative is the dirty check operation of Angular.

Push: the responsive system of Vue is the representative of push. When the Vue program is initialized, it collects the data data dependently. As soon as the data changes, the responsive system will know immediately, so Vue knows "where it has changed" from the very beginning, but this will give rise to a problem. If you are familiar with the responsive system of Vue, you usually need a Watcher to bind a data. Once our binding fine grain is too high, it will generate a lot of Watcher, which will bring memory and the overhead of relying on tracking, while if the fine particle is too low, it will not be able to accurately detect changes, so the design of Vue is to choose a medium-fine-grained solution to detect push at the component level, that is, the responsive system, which usually detects the changed components in the first place. Then Virtual Dom Diff is used inside the component to obtain more specific differences, while Virtual Dom Diff is a pull operation, and Vue is a combination of push+pull for change detection.

Why doesn't Vue have a life cycle similar to that of shouldComponentUpdate in React?

Test point: the change detection principle of Vue

Pre-knowledge: dependency collection, virtual DOM, responsive system

The root cause is that Vue and React have different change detection methods.

React is the way of pull to detect changes. When React knows that there is a change, it will use Virtual Dom Diff to detect differences, but many components will not change. At this time, manual operation with shouldComponentUpdate is needed to reduce diff, so as to improve the overall performance of the program.

Vue detects changes in the way pull+push does, and knows which component has changed from the very beginning, so it is not necessary to manually control diff in the push phase, and the diff method adopted within components can actually introduce a life cycle similar to that of shouldComponentUpdate, but usually reasonable-sized components will not have excessive diff, and the value of manual optimization is limited, so Vue does not consider the introduction of manual optimization life cycle such as shouldComponentUpdate.

What is the use of key in Vue?

Key is the only id marked for the vnode in Vue. Through this key, our diff operation can be more accurate and faster.

In the process of diff algorithm, the head-to-tail cross comparison of the new node and the old node will be carried out at first. When there is no match, the key of the new node will be compared with the old node, and then the difference will be exceeded.

The diffractive range can be summarized as follows: oldCh and newCh each have two head-to-tail variables StartIdx and EndIdx, and their two variables are compared with each other in a total of four ways. If the four comparisons do not match, if key is set, key will be used for comparison. In the process of comparison, variables will lean towards the middle. Once StartIdx > EndIdx indicates that at least one of oldCh and newCh has been traversed, it will end the comparison. These four comparison methods are head, tail, old tail, new head, old head and new tail.

Accurate: if you do not add key, then vue will choose to reuse the node (Vue's local update strategy), resulting in the state of the previous node is preserved, resulting in a series of bug.

Fast: the uniqueness of key can be fully utilized by Map data structures. Compared with the time complexity of traversal search O (n), the time complexity of Map is only O (1).

The above is all the contents of the article "what are the necessary interview questions for Vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.