Writing an article is not easy, click a like brother focus on Vue source code sharing, the article is divided into vernacular version and source version, vernacular version to help understand the working principle, source version to help understand internal details, let us study together based on Vue version [2.5.17]

If you think the layout is ugly, please click the link below or pull to the following public account can also be

[Vue principle] Dependency update – source version

For those of you who have no concept of dependency collection, you can read my vernacular version first

Responsive Principles – Vernacular version

We’ve already talked about dependency collection

Vue principle dependency collection – source code version of the basic data type

Vue principle Dependency collection – source code version of the reference data type

Now you have to look at dependency updates hahaha, after all, after the collection is to update

In fact, relying on updates is quite simple, just two steps

DefineProperty (object.defineProperty) is a set function set by object.defineProperty. When assigning a new value to the data, the set function will be triggered to complete the dependency update

function defineReactive(obj, key, val) {   

    var dep = new Dep(); 
    var childOb = observe(val);   

    Object.defineProperty(obj, key, {

       get() {... Property is read, completing the dependency collection // return closure valuereturn val
       },

       set(newVal) {// The value does not changeif (newVal ===val) return// Change closure value val = newVal; ChildOb = observe(newVal); childOb = observe(newVal); // Trigger update dep.notify(); }}); }Copy the code

Rely on update focus on notification update

Dep. Notify

So, we focus on understanding this sentence, how to notify, how to update

Okay, DEP talked about that in the first paper

Vue principle dependency collection – source code version of the basic data type

As we know, DEP is mainly storage dependent, look again at the source code

var Dep = function Dep() { this.subs = []; // dependent memory}; // Call watcher.update dep.prototype. notify = one by onefunction() {    

    var subs = this.subs.slice();    

    for(var i = 0, l = subs.length; i < l; i++) { subs[i].update(); }};Copy the code

Update notification: update notification: update notification: update notification: update notification: update notification

Update subs[0]. Update subs[0]

How can watcher.update be updated?

functionWatcher(vm, expOrFn) { this.vm = vm; // Save the incoming update function this.getter = expOrFn; // When creating a new watcher, execute the update function this.get() immediately; }; Watcher.prototype.get =function() {// execute the update function this.getter.call(this.vm,this.vm); }; Watcher.prototype.update =function() {    
    this.get()
}
Copy the code

See the source code above

1Watcher saves the function passed in when creating a new instance (this function is used as an update)

The 2Watcher instance has the update method, which executes the update function saved in the previous step

So when did Watcher start building?

Using the page Watcher as an example, explore the basic process of building an entire instance

function Vue(options) {    

    this._init(options);

}

Vue.prototype._init = function(options) { // ... Handle component options such as this.$mount()
}

Vue.prototype.$mount = function() {/ /... /** New watcher (this, // this function is an update function, pass it to Watcher and save it. For later page initialization or page updatefunction() {/ * *... Call the saved render function to generate the VNode and generate the DOM to insert into the page **/}); };Copy the code

Look at the above source code and comments can probably be very clear

From [new Vue] to [vm._init] initialization to [vm.$mount] mount to the page, the whole process is complete

The key is to be clear about watcher’s update function

Update function

We can see the page update function, which calls the render function and then generates a DOM node to insert into the page.

The update function is passed to Watcher and saved to an instance of Watcher

“There is a lot of source code involved in the whole function, but I will skip it here.”

So, notification updates do that

1. Call watcher. Update directly, i.e. re-call the update function saved to Watcher

The update function performs the render function, reads the latest value of the instance (which has been modified), and regenerates the DOM node

3. DOM nodes are inserted or replaced to complete the update

Draw a notification flow chart