Principle 1.

Changes to the View can make changes to the Model in real time, and changes to the Model can be updated to the View in real time.

Vue uses a data hock-published-subscribe mode. It uses ES5’s Object.defineProperty() method to hold (listen on) getters and setters of properties, notifies all subscribers (component objects that use this property) when data changes, and triggers corresponding listening callbacks. To implement bidirectional data binding in Vuex, there are roughly three modules: Observer, Compiler and Watcher, as shown in the figure below:

  • Observer A data listener that listens for all attributes of a data object (data hostage-taking) and notifies subscribers of changes to the data.
  • Compiler is an instruction parser that scans the template, parses the instructions on the template, and then binds the instruction events.
  • Watcher subscriber, associated Observer and Compiler. The ability to subscribe and receive notifications of property changes, perform instructions binding, and update views. The update() method is implemented internally to perform the callbacks bound in the Compiler to update the view.

When the template is parsed, Watcher responds to the binding instruction (one to one) by calling subscriber Watcher initialization (get() in Watcher) to trigger the getter for the corresponding property in the publisher Observer (Object.defineProperty). The Observer determines whether the invocation was initiated by Watcher, and if so, relies on the Dep class for dependency collection. You also call watcher.update () for the first time to initialize the view. Each subsequent data update triggers update callbacks in the dependencies collected through the Dep class via setters in the Observer, updating the state in the subscriber and updating the view.

When the Observer handles an object or array, if the object is an array and a method is called that changes the length of the array, it increments the array and updates the array for re-listening (because calling the array’s native API fires getters and setters multiple times without changing the index). If it is an object, it gets the value through the getter of the object and updates the value through the setter.

2. Version comparison

Vue is bidirectional binding based on mobile phone dependency;

Versions prior to 3.0 used Object.defineProperty, while new 3.0 uses Proxy.

1) Advantages of bidirectional binding based on data hostage/dependency collection

  • Without the need for a display call, Vue uses data hostage + publish subscribe to directly notify changes and drive views.
  • Get the exact change data directly, with the property setter, when the property value changes we can get the exact change without extra diff operation.

2) Disadvantages of Object.defineProperty

  • You cannot listen on arrays because if the length of the array is uncertain, listeners will frequently fire their getters and setters, which is too heavy a performance burden (the same problem with proxies).
  • Only properties can be listened on, not the entire object, and properties need to be traversed.
  • You can only listen for attribute changes, not for attribute deletions.

3) Advantages of Proxy

  • Listen to the entire object without traversing properties.
  • 13 interception methods, much more powerful.
  • It is more immutable to return a new object rather than modify the original.

4) Disadvantages of Prpxy

  • Poor compatibility and cannot be smoothed by polyfill.