Detailed explanation of VUE responsiveness principle

1. Responsive principle foundation

The basic principle of responsiveness is based on Object.defineProperty(obj, prop, descriptor) . Get and set methods can be defined in descriptor . The get method can be triggered when obtaining the property value (dependencies can be collected), and the set method can be triggered when setting the property value (dependencies can be updated).

Extension: The above is the basic responsiveness principle of vue2.0. The basic principle of vue3.0 is Proxy, which can monitor the get and set methods of attributes, monitor the addition and deletion of attributes, etc. It is more powerful than Object.defineProperty, but it is not compatible with IE11.

2. Core objects: Dep and Watcher

Dep : Each property declared by vue in data will generate an instance object of Dep, and Dep.subs stores the Watcher that needs to be updated when the property changes;

Watcher : There are three situations in which Watcher instance objects are generated:

1. Computed properties defined in computed;

2. The monitoring function written in watch;

3. Component rendering Watcher;

3. Collect and update dependencies

3.1 Collecting Dependencies

Distribute the Watcher instance object w to the Dep of the attribute it depends on. The process is as follows:

1. Set Dep.target = the instance object w of the current Watcer;

2.w executes the defined function (i.e. the function written in computed/watch);

3. If the attribute defined in data is used during the function execution process, the get method of the attribute will be triggered. In the get method, the Dep instance object dep will put the w stored in Dep.target into the dep.subs array to complete the dependency collection.

Note: Dep.target is the instance object of the current Watcer

3.2 Update Dependencies

When we modify a property we declared, the set method of the property will be triggered. The set method will update the Watcher instance objects collected in the dep.subs array, that is, trigger the functions we defined in computed and watch.

4. Source code debugging

4.1 Test page code

<template>
  <div>
    <div>a:<input v-model="a" /></div>
    <div>c:{{ c }}</div>
    <div>b:<input v-model="b" /></div>
  </div>
</template>
<script>
export default {
  data: () => {
    return {
      a: '',
      b: ''
    }
  },
  computed: {
    c() {
      return 'source from ' + this.a;
    }
  },
  watch:
    b() {
      console.log('b changed');
    }
  }
};
</script>

The above code will generate the following objects after Vue is initialized:

1. Object Description

Dep instance objects corresponding to attributes a and b (collecting Watchers that need to be updated when a and b change): depA , depB ;

The page rendering function generates the corresponding Watcher instance object updateWatcher ;

The computed property c generates the corresponding Watcher instance object: watcherC ;

The watch listener attribute b generates the corresponding Watcher instance object: watcherB ;

2. Relationship between Dep and Watcher

The page needs to be re-rendered when a and b change, so updateWatcher exists in subs of depA and depB ;

The calculated property c depends on the change of the property a, so watcherC exists in the subs of depA;

Changes in b will trigger the listening function of b in the definition of watch, so watcherB exists in subs of depB;

3. Final relationship outcome

Final property a collects dependencies depA.subs = [ updateWatcher, watcherC] ;

Final property b collects dependencies depB.subs = [ updateWatcher, watcherB] ;

4.2 Source code debugging

Find the source file: node_modules\vue\dist\vue.runtime.esm.js ;

It mainly involves the following functions:

1. Collection dependent entry function: initState (executed when the page is initialized);

The initialization order is data-->computed-->watch: the reason is that computed depends on data, and watch depends on data and watch, so the dependent ones need to be initialized first.

2. When initializing computed and watch, generate Watcher instantiation objects

First execute the Watcher.get function and set Dep.target = the current Watcher instantiation object

Triggering collection of dependencies

Execute the function in the calculated property. If a property in data is accessed, the get method of the data property will be triggered, triggering dependency collection:

When this property is modified, the set method will be triggered, which will trigger the update of the watcher object in dep.subs.

Finally, the update function of Watcher is triggered and the watcher to be updated is put into the queue:

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!