In-depth understanding of the principles of Vue Computed computing properties

<div >
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

var vm = new Vue({
 el: '#example',
 data: {
  message: 'Hello'
 },
 computed: {
  // a computed getter
  reversedMessage: function () {
   // `this` points to the vm instance
   return ('').reverse().join('')
  }
 }
})

// src/observer/

// Here we start converting the getter setter of data, the original value has been saved in the __ob__ attribute(obj, key, {
 enumerable: true,
 configurable: true,
 get: function reactiveGetter () {
  const value = getter ? (obj) : val
  // Determine whether it is in a dependency collection state  if () {
   // Create dependencies   ()
   ...
  }
  return value
 },
 set: function reactiveSetter (newVal) {
  ...
  // Dependency changes, notification to the calculation attribute to recalculate  ()
 }
})

// src/core/instance/

// Initialize the calculation propertiesfunction initComputed (vm: Component, computed: Object) {
 ...
 // traversal computed properties for (const key in computed) {
  ...
  // Create a Watcher instance  // create internal watcher for the computed property.
  watchers[key] = new Watcher(vm, getter || noop, noop, computedWatcherOptions)

  // Create a property and use the provided function as a getter for the property,  // Finally, computed and data will be mixed together under vm, so a warning will be thrown when there is a duplicate attribute between computed and data.  defineComputed(vm, key, userDef)
  ...
 }
}

export function defineComputed (target: any, key: string, userDef: Object | Function) {
 ...
 // Create a get set method  = createComputedGetter(key)
  = noop
 ...
 // Create attributes and initialize getter setter (target, key, sharedPropertyDefinition)
}

function createComputedGetter (key) {
 return function computedGetter () {
  const watcher = this._computedWatchers && this._computedWatchers[key]
  if (watcher) {
   if () {
    // watcher exposes evaluation method for value operation    ()
   }
   // Same as step 1, determine whether it is in a dependency collection state   if () {
    ()
   }
   return 
  }
 }
}

// src/core/observer/

// When obtaining the computed attributes throughget () {
 // this refers to the watcher instance // Stories the current watcher instance to , which means that the dependency collection task is enabled pushTarget(this)
 let value
 const vm = 
 try {
  // When executing the function function, the getter of the attribute (step 1) and the calculated attribute (step 2) will be triggered  // During this execution process, you can collect the dependencies  value = (vm, vm)
 } catch (e) {
  if () {
   handleError(e, vm, `getter for watcher "${}"`)
  } else {
   throw e
  }
 } finally {
  if () {
   traverse(value)
  }
  // End the dependency collection task  popTarget()
  ()
 }
 return value
}

// src/core/observer/

export default class Dep {
 static target: ?Watcher;
 id: number;
 subs: Array<Watcher>;

 constructor () {
   = uid++
   = []
 }

 addSub (sub: Watcher) {
  (sub)
 }

 removeSub (sub: Watcher) {
  remove(, sub)
 }

 depend () {
  if () {
   (this)
  }
 }

 notify () {
  const subs = ()
  for (let i = 0, l = ; i < l; i++) {
   // Update the value of watcher, similar to (),   // But update is used when dependent changes, including processing of watch   subs[i].update()
  }
 }
}

// When the value of the computed attribute is first calculated, Dep will collect the dependencies during the calculation period = null
const targetStack = []

export function pushTarget (_target: Watcher) {
 // During a dependency collection period, if other dependency collection tasks start (for example: the current computed computed attribute is nested with other computed computed attributes), // Then the current target will be temporarily stored in the targetStack, and the dependency collection of other targets will be performed first. if () ()
  = _target
}

export function popTarget () {
 // After the nested dependency collection task is completed, restore the target to the previous layer of Watcher and continue to do dependency collection  = ()
}