Summary of Vue underlying implementation principles and vue underlying principles

Summary of Vue underlying implementation principles and vue underlying principles
Preface

I have recently studied and analyzed the Vue Principle and Implementation of two-way binding to MVVM. I will summarize my thoughts while learning.

Vue is a typical MVVM framework. A Model is just a common JavaScript Object. If you modify it, the View is automatically updated. This design makes state management very simple and intuitive. So how does Vue associate a model with a view?

Implementation principle Overview

This is the Code mentioned in the preface. A typical code that reflects the characteristics of Vue:

<Div id = "mvvm-app"> <input type = "text" v-model = "word"> <p >{{ word }}</p> <button v -on: click = "sayHi"> change model </button> // click this button, and the word value changes. </div> <script src = ". /js/observer. js "> </script> <script src = ". /js/watcher. js "> </script> <script src = ". /js/compile. js "> </script> <script src = ". /js/mvvm. js "> </script> <script> var vm = new MVVM ({el: '# mvvm-app', data: {word: 'Hello World! '}, Methods: {sayHi: function () {this. word = 'Hi, everybody! ';}}); </Script>

Three modules are required for ue to achieve this data bidirectional binding effect:

Observer: monitors all attributes of a data object. If there is any change, you can get the latest value and notify the subscriber.

Compile: scans and parses the commands of each element node, replaces the data according to the instruction template, and binds the corresponding update function.

Watcher: serves as a bridge between the Observer and Compile. It can subscribe to and receive notifications of changes to each attribute, and execute the corresponding callback function bound to the command to update the view.

Observer

The core of the Observer is to monitor data changes through Obeject. defineProperty (). This function can internally define setter and getter. setter is triggered whenever data changes. At this time, the Observer will notify the subscriber that the subscriber is Watcher.

Watcher

As a bridge between the Observer and Compile, Watcher subscriber mainly performs the following tasks:

1. Add yourself to the attribute subscriber (dep) during self-instantiation
2. You must have an update () method.
3. When the property changes to dep. notice () Notification, you can call your own update () method and trigger the bound callback in Compile.
   

Compile

Compile mainly resolves template commands, replaces the variables in the template with data, initializes the rendering page view, and binds the node corresponding to each instruction to the update function, add a subscriber to listen to the Data. Once the data changes, the view is updated after a notification is received.

Summary

The above is all the knowledge about the underlying implementation principles of Vue. If you have any questions, you can discuss them in the comment area below.