Get to know Vue again

One, the introduction

Write before :(the following is mainly for the Vue2 version)

When talking about Vue, people tend to talk about the MVVM pattern, data bidirectional binding, data hijacking, and so on. But do you really know Vue? Try to understand the following questions to help us better understand Vue:

  1. How does Vue differ from Rreact and Angular in the implementation of change detection?
  2. What are the drawbacks of Vue’s “push mode” detection of changes, and how can it be improved?
  3. What are the disadvantages of data hijacking of Object and Array in Vue2 in tracking changes?
  4. How to transfer Set and Get data in data, watcher and Dep?
  5. How does Vue Patch new and old nodes?
  6. What are the phases of Vue’s life cycle and what do they do?
  7. What happens to the new Vue call?
  8. How does the Vue framework deal with “increments” when designing? Or the idea of code structure

If the above questions, you have a certain understanding, then congratulations to you, your understanding of Vue is very deep. If you don’t understand it doesn’t matter, let’s discuss together, together with simple Vue.

Second, understand

1. How does Vue differ from Rreact and Angular in the implementation of change detection?

The process of generating the DOM from the state to the user interface is called rendering, and a responsive system gives the framework the ability to re-render the application as it runs. So when do I need to rerender? When the data changes, the state changes. Change detection does just that, and it comes in two main types: “pull” and “push.” Both Angular and React change detection is of the “pull” type, which means that when a state changes, it doesn’t know which state has changed, so the framework does a violent comparison of which nodes need to be rerendered. In Angular it’s a dirty detection mechanism, while in React it’s a virtual DOM comparison. The pull has the coarsest granularity because it does not know which nodes have changed, but the corresponding memory overhead is relatively small.

Vue’s change detection belongs to “push”. When the state changes, Vue knows which state has changed to a certain extent. It knows more information and can naturally update with finer granularity.

2. What are the shortcomings of Vue’s “push mode” detection of changes, and how can it be improved?

Vue can be updated at a finer granularity, but the more dependencies the state binding has, the higher the memory overhead associated with tracking becomes. Therefore, starting from Vue2.0, the granularity of dependence of state binding changes from specific DOM nodes to components, from notifying specific nodes to notifying components, and virtual DOM is introduced to find the changed nodes through the comparison of virtual DOM inside components. This greatly reduces the number of dependencies, thus reducing the memory overhead of dependency tracking.

3. In tracking changes, what are the shortcomings of data hijacking of Object and Array in Vue2?

For Object, object.defineProperty is an operation to add attributes to the Object. It can be used to track changes by adding set and GET methods to the Object to achieve the effect of data hijacking. But it can only track the current properties of an object, so it can’t track future property changes (that is, adding or deleting an object). Vue also provides set, set, set, and delete, whereas Vue3.0 uses Proxy objects instead of this API.

In the case of Array, Vue overwrites methods that may alter the Array data to achieve data hijacking. It also cannot detect assignment by data subscript, and array.length=0 to clear data. Object.defineproperty can detect this change, but Vue is not used, and for performance reasons it is not possible to hijack each array element.

4. How to transfer Set and Get data in data, watcher and Dep?

Get fires the getter when the outside world reads the data, adds the Watcher to the dependency’s Dep, and collects the dependency.

Outside -> watcher ->dataCopy the code

Set Triggers the setter to reassign when the data changes, notifting the watcher in the dependent Dep.

Data -> Dep. Notify -> watcher -> outsideCopy the code

Dep and Watcher have a many-to-many relationship. Watcher records who they subscribe to, and Dep also records who they subscribe to.

Note: The observation data can be eliminated by calling the watch.teardown method by removing the Watcher instance from its list of subscription dependencies.

5. How does Vue Patch old and new nodes in Diff?

Vue uses the same level comparison when using patch node, which can be roughly divided into three cases:

  1. If the old node does not exist, mount the new node directly
  2. Both new and old nodes exist, but their types are different: Delete the old node and mount the new node
  3. Both old and new nodes exist and are of the same type: Patch node, which can be reused to the maximum extent

In the case of Patch node, in order to improve the comparison efficiency, Vue2 adopts double-end comparison search, and violent comparison is adopted when the double-end comparison has not traversed the node. There are also certain methods for node movement: the node must be moved to the front of all unprocessed nodes, and the new node must be inserted in front of the unprocessed nodes. If inserted behind the processed nodes, certain patch conflicts will be caused, so as to avoid duplication. (Specific can see the source code or related books to understand, attached diff mind map)

6. What are the stages of Vue’s life cycle and what does each stage do?

The Vue life cycle includes initialization, template compilation, mounting, and unmounting.

  1. Initialization phase: Initializes life cycle, events, render functions, state, etc., by passing in Vue instances to mount a series of options. (beforeCreated, created hook)

  2. Template compilation phase: Template -> AST abstract syntax tree -> Render function to compile the template into a render function for execution in the browser, while handling static node optimization. (The runtimeonly version does not exist)

  3. Mount phase: Render Function -> Vnode -> View, mount the instance into the passed EL. (beforeMount, Mounted hook)

  4. Uninstall phase: When vm.$deStory is called, the component enters the uninstall phase, clearing the associated instance (beforeDestroy, Destroyed hook)

7. What happens to the new Vue call?

When new Vue () is called, the _init method on the prototype is first called to initialize data, event, etc. After initialization, the mount phase begins. It’s worth mentioning here that the initialization injections need to be used before the data is initialized, because the data has the range to the injected value, so it is initialized before the data. Below is Vue’s _init method

8. How does the Vue framework deal with “increments” when designing? Or the idea of code structure

A progressive framework is the idea that you use the features you want to use without having to accept them all at once. We can use Vue to do some form rendering without importing VueRouter routing, Vuex state management, etc. We can build the application layer by layer from the bottom up. (React has to understand functional programming, side effect handling, etc.) Whereas Both Angular and React are somewhat invasive. Angular forces template and dependency injection.

The design of the Vue framework starts with constructor initialization, mounts methods on the prototype, and declarations of global apis. Cross-platform through decoupled Node options.

9. About NextTick

As you know, Vue’s data updates are asynchronous, and if you want to use the DOM with the data updates, you need to use the nextTick callback, which includes macro and micro tasks, event polling, and so on (if you don’t know these concepts, check them out). So why does nextTick get the updated DOM? (Actually, the nextTick callback code must also be placed after the data update.) Since the callback to update the DOM uses vm.$nextTick to register with the microtask, the nextTick callback will automatically get the updated DOM after the DOM is updated. That leaves another question: will calling nextTick multiple times add multiple tasks to the task queue? The answer is no, and multiple calls will only add one task to the task queue. Because the tasks added to the task queue only need to be executed once, the callbacks registered with the nextTick method in this round of the event loop are executed in turn.

Three, the last

Some of the above summary, is I after watching the book Vue in a simple way combined with their own understanding of the summary of some points, if there are deficiencies, also hope to point out the communication. If you find this article helpful, please leave your mind ~~, which is my greatest support.