1. Describe the responsivity principle of VUE

A: Vue.js uses data hijacking combined with publiser-subscriber mode. It hijacks the setter and getter of each attribute through Object.defineProperty(), and publishes messages to subscribers when data changes, triggering corresponding listening callback.

The specific process

1. Implement a listener Observer that hijacks and listens to all attributes and notifies subscribers of any changes.

2. Implement a subscriber Watcher that can receive notification of property changes and execute corresponding functions to update the view.

3. Implement a parser Compile, which can scan and parse the relevant instructions of each node, and initialize the corresponding subscriber according to the initialization template data

2. The difference between vuE3 and VUE2

A: Vue3’s responsiveness is different in that instead of adding attributes through Object.defineProperty(), it adds a layer of proxies

Differences:

1.Proxy is a Proxy for the entire Object, while Object.defineProperty can only be a Proxy for a property. 2. If a new attribute is added to an Object, Proxy can listen to it but Object.defineProperty cannot. 3. Array modification is added, Proxy can listen, Object. DefineProperty can't. 4. If all internal properties of an Object need to be recursively Proxy, Proxy can recurse only when called, whereas Object.definePropery needs to do all recursion at once, which is worse than Proxy. 5.Proxy is incompatible with Internet ExplorerCopy the code

3. Bidirectional binding of VUE

The two directions in VUE are typically v-model, view change, data change — data change, view change.

V-bind: value, v-ON :click, v-bind: value, V-BIND :click, v-bind: value, V-bind :click, V-bind: value, V-bind :click, V-bind: value, V-bind :click, V-bind: value, V-bind :click

  1. Input Updates data after the input value:

First, during page initialization, the VUE compiler compiles the HTML template file, traversing the DOM elements on the page to generate a virtual DOM tree. Recursively traverses each node of the virtual DOM. When it matches that it is an element rather than plain text, it continues through each attribute. If traversed through the V-model property, an input event is added to the node to update the corresponding property value of data in the VUE instance when listening for input values from the page.

  1. Update the input value after assigning the data property:

Similarly, when initializing the Vue instance, each attribute of data is recursively traversed, and the get and set methods of each attribute are monitored through defineProperty, so that once a attribute is reassigned, the corresponding page control can be monitored for changes.