Summary of the Underlying Implementation Principle of Vue

Vue is a typical MVVM framework. The Model is just a normal JavaScript object. Modifying it will automatically update the View. This design makes state management very simple and intuitive. So how does Vue associate the model with the view?
Simple Application Server
USD1.00 New User Coupon
* Only 3,000 coupons available.
* Each new user can only get one coupon(except users from distributors).
* The coupon is valid for 30 days from the date of receipt.

Implementation principle overview

This is the code in the article mentioned in the preface, a typical code that embodies 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, the value of word will change
</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>

Front-end full-stack learning exchange circle: 866109386, for front-end developers with 1-3 years of experience, to help break through technical bottlenecks and improve thinking ability. There are a large number of PDFs in the group for self-collection, and there are more dry goods and actual project videos for free.

Ue needs three modules to achieve the effect of two-way data binding:

Observer: able to monitor all the attributes of the data object, if there is a change, get the latest value and notify the subscriber
Compile: Scan and parse the instructions of each element node, replace the data according to the instruction template, and bind the corresponding update function
Watcher: As a bridge connecting Observer and Compile, it can subscribe and receive notifications of each attribute change, execute the corresponding callback function bound by the instruction, and update the view

Observer
The core of Observer is to monitor data changes through Obeject.defineProperty(). Setters and getters can be defined inside this function. Whenever the data changes, the setter will be triggered. At this time, the Observer will notify the subscriber, and the subscriber is the Watcher.

Watcher

Watcher subscribers, as the communication bridge between Observer and Compile, mainly do:

Add yourself to the attribute subscriber (dep) when it is instantiated
It must have an update() method
When the property change dep.notice() is notified, it can call its own update() method and trigger the callback bound in Compile
Compile

The main thing Compile does is to parse the template instructions, replace the variables in the template with data, then initialize the rendering page view, bind the update function to the node corresponding to each instruction, and add subscribers who monitor the data. Once the data changes, Receive notification and update the view.

to sum up
The above is all the knowledge content about the underlying implementation principles of Vue this time. If you have any questions, you can discuss it in the message area below.