My GitHub homepage ~ welcome to Star⭐⭐⭐

Why do interviews test principles?

  • I knew why before
  • If you understand the principle, you can apply it better
  • Dailang makes wheels

How to investigate in the interview? In what way?

  • Look for the point, not the details. Master the 2/8 principle
  • And use associated principles such as VDOM, template rendering
  • Is the overall process comprehensive? Does hot technology have depth?

What are the principles of Vue?

Componentization and MVVM

Concept introduction: Fundamentals of componentization

The interviewer will not ask you directly, he will ask you what is the MVVM model?

The answer to this question is:

First: historical origins: componentization has existed “a long time ago”

Componentization has existed since the earliest days of asp, JSP and PHP front-end, and it also exists in Node.js. Here is an example of a project using NodeJS (layout above, code below).

Import a bunch of data (or components) one piece at a time

Second: Vue and React made an innovative data-driven view (MVVM setState)

  1. In the previous point, when the front-end was 1.0 or even 2.0, jQuery was very popular because of the traditional componentization, static rendering, and DOM dependent update.
  2. After Vue and React introduced the concept of data-driven view, efficiency was greatly improved.

Vue 2 uses MVVM, React uses setState

The concept of a data-driven view is not overstated here. If we want to change any data, we don’t need to operate the DOM, but directly change the data in Vue or React. The framework will automatically render the data to the page! Because of this, we have more time to focus on business data and business logic when we are developing!

Third: what is MVVM then started?

Draw a picture, explain a full mark!

  • First, M is Model, V is View, and VM is ViewModel
  • Through the middle VM layer, we immediately execute to the View layer when the Model changes
  • Similarly, when we trigger events in the View layer, we can modify the data directly from the VM layer

Two, the response principle

In the above question, there is a question:

When a component’s data changes, it triggers an update of the view.

Here is a link to answer this question in three points

First: the core API- object.defineProperty

This method is to define a new property on an object, or change an existing property on an object, and return the object. There are two fields set and get. As the name implies, set is to set the value of the property, and get is to get the value of the property.

Here’s an example:

// Add an example of properties and access descriptors to an object

var bValue; var o = {}; Object.defineproperty (o, "b", {get: function(){console.log(' listening to get b') return bValue; }, set: function(newValue){console.log(' listening is setting b') bValue = newValue; }, enumerable : true, configurable : true }); o.b = 38; console.log(o.b)Copy the code

Final print

Listening is setting B Listening is obtaining B 38Copy the code

From the above example, we can see that when we assign 38 to o.b, we call the set function, which assigns a value to bValue, and then we can get the value from o.b. At this point, the get function is called.

Second: how to achieve responsive, code demonstration

① Listening Object (depth)

This is easy to do if you just listen for attributes at the first level (such as name and age in data below),

But if the property is an object (such as info in data), how do you listen for info.address? Can you tell if it’s an object?

The observer() function in Figure 2 does just that. If the target(which represents the element to be listened to) is passed to this function as an object, then it returns the property of that object.

If he finds that the info in Figure 1 is an object, he returns the object or property address!!

In Figure 3, object defineReactive (Target,key,value) is just the target we are listening to, not the inner properties of the object.

If it’s not an object or an array, return the object itself, and then return what it points to.

If you pass in the name attribute from the data in Figure 1, you will return the name attribute

If you pass in the info object from the data, then it is convenient for the object to find all of its properties, and then find the adress, and then go through such a check on it, and finally get all the properties.

② Listen to arrays

Data () {nums: [10, 30]}Copy the code

Listen to the array we tried to listen to the above object, but it did not succeed!

Here we need to redefine the array prototype: I’ll explain it roughly here!

Third: some disadvantages of object.defineProperty (vue3.o enabled Proxy) this is good to know

  1. Deep monitoring, need to recurse to the end, one-time calculation is large

If the info in the data is a simple object, wouldn’t we recurse all the time?

  1. Unable to listen for new/deleted properties (vue.set vue.delete)
  2. Cannot listen to arrays natively, requires special treatment (needs to modify array prototype)

Fourth: Proxy compatibility problem

  • Proxy compatibility is poor and polyfill is not possible (IE11, many Android browser kernels do not support it)
  • Vue2.x will be around for a while, so guide
  • Vue3.O will be mentioned in the next chapter

Virtual DOM and Diff

First: background understanding

  1. DOM manipulation is performance intensive and time consuming
  2. Relatively speaking, the execution of JS is relatively fast, before using the framework, is using jQuery to control the DOM operation of the timing of manual adjustment
  3. Vue React is a data-driven view. How to effectively control DOM operations?

They use the virtual DOM

  1. Virtual DOM was proposed by React and gained a lot of popularity in the years after it was proposed. For example, Vue has used virtual DOM since 2.0
  2. Using control variables,Service complexity + execution speed = FINAL SPEED of DOM operation
  3. We have no control over the business complexity. There are so many requirements that it is not appropriate to keep and delete any of them.
  4. Can we speed up DOM operations?
  5. We are transferring more computation to JS computation, JS computation is fast ah (especially after Chrome V8 release), and DOM speed is not the same order of magnitude!

So what does the virtual DOM do?

Second: the principle of the virtual DOM

It first uses JS to simulate the DOM structure, and then to carry out a series of calculations, calculate the smallest changes, and then to operate the DOM (so that the maximum extent to avoid some useless operation), this is the principle of virtual DOM!

Third: principle whole understand, arrive you how to do?

1. Using JS to simulate the DOM structure (temporarily whole a JS to imitate the DOM structure: left DOM structure, right JS DOM structure)

A large factory will probably ask: Can the following DOM bodies be represented in JS? For reference only, in fact, the way of expression varies from person to person

2.Vue and React refer to snabbDOM and learn virtual DOM through SNabbDOM

Virtual DOM uses the DIff algorithm. First, let’s briefly understand the DIff algorithm

  1. Similarly, the Diff algorithm is not original to the virtual DOM,
  2. Diff means contrast and is a broad concept, such as the Linux diff command, git diff, and so on
  3. Two JS objects can also be diff, introducing a GitHub jIFF library
  4. Diff can be done by two trees. The DIff of ru virtual DOM is to compare the DOM tree with the JS tree

The diff time of the two treesO (n ^ 3)

  1. Traverse treel
  2. Traverse tree2
  3. The sorting

1000 nodes, 100 million times, the algorithm is not working

React thought: That won’t work, and optimized the diff time of the tree to O (n).

  1. Only compare the same level, not across levels
  2. If the tag is not the same, delete the rebuild directly
  3. If the tag and key are the same, the node is considered to be the same and no depth comparison is performed

Component rendering and update process

Interviewers will not ask directly what is a template edge, but will look through the “component rendering and update process”?

  1. Vue template complierCompile the template to the render function
  2. performrenderThe function productionvnode(vnodeIs actuallyVirtual DOM source codeAs the total node of the virtual DOM)

① Preposition knowledge: with grammar (just need to understand good)

  1. Normally we access a property of an object
console.log(obj.a)
Copy the code
  1. But the use ofwithgrammar
with(obj){
console.log(a)  
}
Copy the code

The result is the same, except that when we use the with syntax, we need to pass in the object, and then we can use one of its properties directly in {}.

Why should Vue template be compiled?

This is because what we write inside the

Do you think about it. Normal HTML can write instructions, interpolation, JS expressions, can realize the judgment and loop?

But JS can ah, thus, Vue template must be converted to some KIND of JS code, even if compiled template!

③ Component render/update process

First rendering process

  1. Parse templates to render functions (either in the development environment or in the browser, vue-loader)
  2. Trigger response, listening for the getter setter for the data property
  3. Render vnode, patch(elem,vnode)

The update process

  1. Modify data, triggering the setter (to determine that it was previously listened on in the getter)

  2. Re-execute the render function to generate newVnode

  3. The DIff algorithm of Patch (vnode,newVnode),path will help me calculate the minimum difference between the old and new DOM nodes

5. Rendering process

Introduction to the whole process

  1. The yellow area is our render function, this time the template has been compiled (Vue template => render)
  2. The render function produces the virtual DOM tree (the green tree), while the Render function touches (triggers) the Data(the getter in the purple area);
  3. It also collects dependencies when it is triggered (I will Watch (blue) the getters of the variables that I have triggered in the template).
  4. If so, Notify the setters and trigger re-render. If so, Notify the setters. If so, trigger re-render.

Asynchronous rendering

  • First review the way $nextTick and Vue render
  • (2) Summarize the data changes, and then update the view ata time to reduce the number of DOM operations and improve performance

6. Front-end routing

The principle of front-end routing is not a specific framework, but a general principle of front-end routing.

Vue-router: indicates the H5 history and hash modes

Hash Mode Features

throughwindow.onhashchangeThe event(Code display)Click the button and use JS to change the URL value

  1. A hash change triggers a web page jump, which is a forward or backward move of the browser
  2. Hash changes do not refresh the page, a required feature of SPA
  3. The hash is never committed to the server.

H5 History mode features

(Code display) History. PushState and window. Onpopstate Conclusion:

  • Hash pattern –window.onhashchange
  • H5 history pattern –History. PushState and window. Onpopstate

Summary of Vue principle

Big factory interview must test principle: So I feel the need to explain all the principles of the key, and then hot technology to dig a depth!

First, the Vue principle consists of three main components: reactive, virtual DOM and template compilation

  1. The rendering process is a summary of the above three
  2. Componentization is a general explanation of Vue’s whole event concept
  3. Front-end routing is an explanation of the Vue router

As my level is limited, if there is an inaccurate description of the place please give me a message, welcome to exchange ~

My GitHub homepage ~ welcome to Star⭐⭐⭐