Vue’s Template rendering process

Vue recommends using templates to create your HTML in most cases. But a template is a template, not a real DOM node. There are a few steps to go from the template to the actual DOM node

  1. Compile the template into the render function
  2. Instance mount, according to the root node render function call, recursive generation of virtual DOM
  3. Compare virtual DOM with diff algorithm and render to real DOM (similar to react virtual DOM rendering process)
  4. When the data inside the component changes, the component and its child components invoke the Render function again using data as props to generate the virtual DOM, and return to Step 3.

Principle of two-way data binding

In vue2. Xx, object.defineProperty () is used to monitor the data of this Object by recursion + traversal

1. Vue two-way data binding is realized through data hijacking combined with publish and subscribe mode, that is to say, data and view are synchronized, data changes, view changes, data changes;

2. Core: For VUE two-way data binding, the core is the Object.defineProperty() method;

Object. DefineProperty (obj, prop, descriptor) Object. DefineProperty (obj, prop, descriptor) Descriptor obj (objects on which attributes are to be defined) prop (properties to be defined or modified) descriptor (2) When we call it, we use the get method, and when we assign the property, we use the set method;

Disadvantages: 1. Methods that listen for arrays cannot trigger the set operation in object.defineProperty (you need to rewrite the array methods if you want to listen for arrays). 2. Each property of each object must be traversed, using recursive calls if the object is deeply nested.

Vue3 mentions Proxy instead of defineProperty. Compared with the way of defineProperty hijacking object attributes, Proxy makes an interception before object operation and returns a Proxy object to operate the object indirectly