Source code analysis

initComputed

InitComputed this code does a few things

  1. Each computed distribution watcher;
  2. DefineComputed processing;
  3. Collect all computed Watcher;

What did Watcher do

Take a look at the Watcher source constructor

  1. With computed new watcher, lazy is used to cache the results instead of recalculating them each time it is used.
  2. Save the configured getter, and store the computed-getter set by the user in watcher. Getter for later calculation.
  3. Watcher. Value stores the result, but with the condition that, because of lazy, the new instance is not created and the value is read immediately. So this is kind of an optimization of Vue, if you read computed again, and you start computing, instead of initializing, you start computing, and you don’t start computing, but you still compute value using the same method called watcher.get;

DefineComputed processing

  1. The set function defaults to an empty function. If it is set by the user, the user setting is used.
  2. If caching is used, the get method is wrapped in createComputedGetter, otherwise in createGetterInvoker;
  3. The set method and get method are encapsulated in sharedPropertyDefinition and monitored.

createComputedGetter

  1. Cache control is controlled by watcher.dirty, which watcher.evaluate uses to recalculate, update the cache value, and reset dirty to false to indicate that the cache has been updated
watcher.depend()
if (Dep.target) {
   watcher.depend();
}
Copy the code
Watcher.prototype.depend = function() {    

    var i = this.deps.length;    

    while (i--) {        

        // this.deps[i].depend();

        dep.addSub(Dep.target)
    }
};
Copy the code

The above code has a matchmaking function:

  1. P refers to C, C refers to D;
  2. In theory, when D changes, C changes, and C notifies P to update;
  3. In fact, C allows D to establish a connection with P, so that D directly notifies P when it changes;
Dep. What is the target

Dep.target is the page watcher

createGetterInvoker

Execute the getter function for computed directly if there is no cache

Related interview questions

  1. If the value of the calculated attribute c is c = a+b, if a=1, b=2; After ab is updated to a=2 and b=1, c is recalculated or retrieved from the cache?

Vue series of courses

Vue source code analysis will be conducted in succession recently, a series of courses are as follows:

The state series

  1. Principle of props
  2. Principle of the methods
  3. Principle of the data
  4. Principles of the computed
  5. Watch the principle

Lifecycle series

  1. Life cycle principle

The event series

  1. Principle of the event

Render series

  1. Render principle

Inject/dojo.provide series

  1. Inject/dojo.provide principle

The plugins series

  1. Vue – principle of the router
  2. Vue Router stuff
  3. Vuex something you should know
  4. Vue source code analysis of vuex principle
  5. Vue custom plug-in

Component series

  1. Keep alive – principle
  2. Vue single file component
  3. Communication between Vue components
  4. Vue virtual list

Series of instructions

  1. Vue custom command
  2. Caching principles for vue source code parsing

The algorithm series

  1. Principle of diff
  2. Vue compiler source code analysis

Asynchronous tasks

  1. NextTick principle of vUE source code parsing

other

  1. Vue unit tests
  2. Vue multicast components
  3. Things you didn’t know about Vue
  4. Vue skills big decryption
  5. Interview – VUE data responsive implementation of advanced front-end