Interpret the two-way binding source code of vue instance

Vue is a progressive pure front-end JavaScript framework that performs data operations based on MVVM.

First, let's first understand what is MVVM?

The MVVM (Model—View—ViewModel) mode is divided into three blocks:

1. Model: Model data, the object that holds all the data of the instance ----- data, contains business logic.

2. View: View, the layout and appearance of the entire interface.

3. ViewModel: The view model, which acts as the "ambassador" of View and Model, binds the view and model, and implements the business logic of View.

Second, the principle of two-way binding of vue data

Principle: Mainly through the Object.defineProperty () method for data hijacking and cooperation with the publisher-subscription model.

1. Object.defineProperty()：

var vm = new Vue({
    data: {
        obj: {a: 1}
    },
    created() {
        console.log(this.obj);
    }
});

You can see that the attribute a has two corresponding get and set methods. Why are there two more methods? Because vue implements data hijacking through Object.defineProperty (). It can control some unique operations of an object attribute, such as read and write rights, whether it can be enumerated, here we mainly study the two description attributes get and set corresponding to it.

2. Data hijacking: When vue is instantiated, it will traverse all the attributes and add get and set methods to these attributes to perform data hijacking (override the get and set methods of data).

3. Publisher-subscription model: https://www.jianshu.com/p/2ec316ca0f8b

3. Specific implementation:

　　As mentioned earlier, two-way binding is achieved through data hijacking. Before performing data hijacking, you need to monitor whether the data has changed (observer listener) ; when you hear a change, you need to tell the subscriber whether you need to change it (watcher subscriber) , and when there is Many subscribers need a manager to manage a large number of subscribers (Dep subscription manager) ; next we need to have a command parser to scan and parse each node (parse node instructions such as v-on) , Initialize them into a Subscriber Watcher, and bind the corresponding function (compile instruction parser) , Watcher will compare the two values before and after changes, and then determine whether to notify the view to re-render.

This diagram should be clearer:

what need to do:

1. Implement a listener, Observer, to hijack and monitor all properties, and notify subscribers if there is a change.

2. Implement a subscriber Watcher to receive notifications of changes in the attributes of the listener and execute corresponding functions to update the view.

3. Implement a subscriber manager Dep, used to manage many subscribers.

4. Implement a parser Compile, which is used to scan and parse the relevant instructions of each node, initialize template data and subscribers.

Fourth, first come to know the Object.defineProperty () method to achieve data hijacking (overwrite method)

// Normal access to the properties of an object 
var Book = { 
  name: 'vue authoritative guide' 
}; 
console.log (Book.name);   // vue authoritative guide

If you want to directly add a title number to the title of the book while executing console.log (book.name), what should you do? In other words, what to listen to the property value of the Book object. At this time Object.defineProperty () comes in handy, the code is as follows:

let Book = {}; 
let name = '' ; 
Object.defineProperty (Book, 'name' , { 
    set (value) { 
        name = value; 
        console.log ( 'You named a book name:' + value); 
    } , 
    get () { 
        return '《' + name + '》' 
    } 
}); 
Book.name = 'vue authoritative guide' ; // You named a book title: vue authoritative guide 
console.log (Book.name); / / "The definitive guide to vue"

// To be continued

Reference: https://www.jianshu.com/p/5fe2664ff5f7

Reference: https://www.cnblogs.com/libin-1/p/6893712.html

Reference: https://segmentfault.com/a/1190000014274840#comment-area

Interpret the two-way binding source code of vue instance

Guess you like