preface

MVVM is a software architecture pattern that abstracts the state and behavior of views, allowing us to separate View UI from business logic. Vue. Js is a lightweight, high-performance, componentized MVVM library with very easy-to-use apis, which is a good practice for MVVM. Here to talk about Vue in data bidirectional binding of MVVM practice

Advantages of the MVVM architecture

  • Low coupling. Views can be changed and modified independently of Model. A ViewModel can be bound to different “views”. The Model can remain unchanged when the View changes, and the View can remain unchanged when the Model changes.
  • Reusability. You can put some View logic in a ViewModel and have many views reuse that View logic.
  • Independent development. Developers can focus on business logic and data development (ViewModel), and designers can focus on page design.
  • Easy to test. Interface elements are relatively difficult to test, and most of the bugs in development come from logic handling. Since the ViewModel separates a lot of logic, unit tests can be constructed on the ViewModel.

Vue focuses on MVVM to achieve bidirectional data binding. Bidirectional data binding connects the View layer with the Model layer. The synchronization between View and Model is completely automatic without human intervention, so developers only need to focus on business logic, without manual manipulation of DOM. There is no need to pay attention to the synchronization of data state, complex data state maintenance is completely managed by MVVM. It greatly facilitates the maintenance and management of data state

Vue practices for MVVM architecture

We know the advantages of MVVM above, so let’s analyze the practice of Vue. Js for MVVM, the principle of data bidirectional binding implementation, first look at the following figure

Vue.js uses getters and setters in Object.defineProperty to operate on properties in objects, and combines observer mode for data binding.

A quick look at the flow: When a JS Object is passed to a Vue instance as data, Vue iterates through its properties and converts them into getters/setters using Object.defineProperty. Vue listens for them internally and notifies when properties are accessed or modified

Before we look at Vue’s bidirectional data binding, let’s look at the role of each position in the figure above

  • Observer: a data listener that listens for all properties of a Vue data object and passes the latest value to the watcher if the property changes
  • Compile: An instruction compiler that scans and parses each DOM element node instruction, replaces the data according to the instruction template, and binds the corresponding update function
  • Dep: Message subscriber with a maintained array that collects the Watcher, fires notify if the data changes, and then calls the Update method of the Wacher subscriber
  • Watcher: subscriber, connects observer with compile, gets notification of property changes, and updates data to the view

Let’s walk through the steps of two-way data binding in Vue step by step. The process can be roughly divided into two stages

One is the initialization phase, the other is the data update phase

Initialization phase

Execute new Vue(), and the Vue enters the initialization phase. At this time, two operations begin, one is data listening, the other is page rendering.

On the one hand, Vue iterates over properties in the data option and converts them into getters/setters using Object.defineProperty to listen for data changes.

The instruction compiler Compile, on the other hand, scans and parses the instructions on element nodes, initializes the view, and subscribes to Watcher to update the view. At this point, Wacher adds itself to the message subscriber (Dep) and initialization is complete.

Data update stage

When a property in the data changes, setter methods in the Observer are fired. The setter immediately calls dep.notify (), and the Dep starts iterating through all the subscribers, notifting the subscriber Watcher, and calling the subscriber’s update method. Finally, Watcher receives notification of Dep data updates and updates the view accordingly.

At this point, two-way binding of the data is complete