Using Vue to implement the underlying principles (detailed tutorial)

I will give you a summary of the knowledge points on the underlying implementation principles of Vue. If you need this, you can learn from it and refer to it. I hope that the content we have compiled can help you.

Preface

I have recently been studying this article on analyzing the principles of Vue & implementing two-way binding MVVM. I will summarize my thoughts while studying.

Vue is a typical MVVM framework. The Model is just an ordinary JavaScript object. If you modify it, the View will automatically update. This design makes state management very simple and intuitive. So how does Vue associate the model and the view?

Overview of implementation principles

This is the code in the article mentioned in the preface, a typical code that reflects the characteristics of Vue:

<p id="mvvm-app">
  <input type="text" v-model="word">
  <p>{{word}}</p>
  <button v-on:click="sayHi">change model</button> //点击这个button，word的值会发生改变
</p>

<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: &#39;#mvvm-app&#39;,
    data: {
      word: &#39;Hello World!&#39;
    },
    methods: {
      sayHi: function() {
        this.word = &#39;Hi, everybody!&#39;;
      }
    }
  });
</script>

ue implements this two-way binding of data To achieve a certain effect, three major modules are required:

Observer: can monitor all attributes of the data object. If there is any change, it can get the latest value and notify subscribers.

Compile: For each Scan and parse the instructions of the 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 to and receive notifications of each attribute change. Execute the corresponding callback function bound by the instruction to update the view

Observer

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

Watcher

Watcher subscribers serve as a bridge of communication between Observer and Compile. The main things they do are:

1. When they are instantiated, they go to Add yourself in the attribute subscriber (dep)

2. It must have an update() method

3. to be notified by dep.notice() of attribute changes When, 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 and convert the template Replace the variables in with data, then initialize the rendering page view, bind the update function to the node corresponding to each instruction, add a subscriber to monitor the data, and once the data changes, receive a notification and update the view.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Bootstrap implements collapsible grouping side navigation menu

Instances of layui table checkbox selection select all styles and functions

layui select instance of dynamically adding option

The above is the detailed content of Using Vue to implement the underlying principles (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!