Dependency collection principle of Vue source code

This article mainly introduces the principle of dependency collection of Vue source code, which has certain reference value. Now I share it with everyone. Friends in need can refer to it

Vue is currently the third largest front-end web end in China. One of the best in the world, and it is also one of my main technology stacks. I know it in daily use and am curious about why. In addition, a large number of Vue source code reading articles have appeared in the community recently. I would like to take this opportunity to learn from everyone’s I gained some nutrition from the articles and discussions, and at the same time summarized some thoughts when reading the source code, and produced some articles as a summary of my own thinking. My level is limited, so please leave a message for discussion~

Target Vue version: 2.5.17-beta.0
vue source code comments: https://github.com/SHERlocked...
Statement: The syntax of the source code in the article uses Flow, and the source code is available as needed Abridged (in order not to be confused@_@), if you want to see the full version, please enter the github address above. This article is a series of articles, the article address is at the bottom~

1. Responsive system

Through the introduction on the official website, we know that Vue.js is an MVVM framework. It does not care about view changes, but drives view updates through data, which makes our state management very simple. How is this achieved? Stealing a picture from the official website

Each component instance has a corresponding Watcher instance object, which will record the properties as during the component rendering process Dependency, then when the dependency's setter is called, the watcher will be notified to recalculate, causing its associated components to be updated.

There are three important concepts here Observe, Dep, Watcher, respectively located in src/core/observer/index.js 、src/core/observer/dep.js、src/core/observer/watcher.js

• The Observe class mainly adds getter/setter to the properties of responsive objects for dependency collection and distribution updates

• Dep class is used Used to collect the dependencies of the current responsive object

• Watcher The class is a observer, and the instances are divided into three types: rendering watcher, calculated property watcher, and listener watcher

2. Code implementation

2.1 initState

The responsive entrance is located in initState# of src/core/instance/init.js ## Medium:

// src/core/instance/state.js

export function initState(vm: Component) {
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)              // 初始化props
  if (opts.methods) initMethods(vm, opts.methods)        // 初始化methods
  if (opts.data) initData(vm)                            // 初始化data
  if (opts.computed) initComputed(vm, opts.computed)     // 初始化computed
  if (opts.watch) initWatch(vm, opts.watch)              // 初始化watch
  }
}

props, methods, data, computed , wathcer, let’s take a look at the initData method to get a glimpse of the leopard

// src/core/instance/state.js

function initData(vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
                    ? getData(data, vm)
                    : data || {}
  observe(data, true /* asRootData */)             // 给data做响应式处理
}

observe method to process data. This method tries to create an Observer instance __ob__, and returns a new Observer if it is successfully created. Instance, if there is an Observer instance, return the existing Observer instance

// src/core/observer/index.js

export function observe (value: any, asRootData: ?boolean): Observer | void {
  let ob: Observer | void
  ob = new Observer(value)
  return ob
}

data as a parameter to instantiate an Observer object Instance, Observer is a Class, used for dependency collection and notify update. The constructor of Observer uses the defineReactive method to reactive the keys of the object and recursively add ## to the properties of the object. #getter/setter, when data is evaluated, getter is triggered and dependencies are collected. When the value is modified, getter is triggered first, and then setter## is triggered. # And collect dependencies when dispatching updates

// src/core/observer/index.js

export class Observer {
  value: any;
  dep: Dep;

  constructor (value: any) {
    value: any;
    this.dep = new Dep()
    def(value, '__ob__', this)    // def方法保证不可枚举
    this.walk(value)
  }

  // 遍历对象的每一个属性并将它们转换为getter/setter
  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i <code></code>getter. Note here that dependency collection will only be performed when there is a value in <p>Dep.target<code>. This </code>Dep.target<code> is when the </code>get<code> method of the Watcher instance is called. </code>pushTarget<code> will push the current value of the watcher into </code>Dep.target<code>, the original watcher is pushed onto the </code>targetStack<code> stack, the current value of the watcher is popped out of the stack and the original watcher value is assigned to </code>Dep.target<code>, </code> cleanupDeps<code> Finally, clear the watchers that no longer exist in the new </code>newDeps<code> to prevent useless watchers that are no longer needed on the view from triggering </code><code></code>setter</p> first<p>getter<code>, and return if there is no change compared to the old value. If there is a change, dep notifies all Watcher instances that rely on this data stored in subs </code>update<code> to update, here</code>update <code> Zhonghui</code>queueWatcher( )<code> Asynchronously push to the scheduler observer queue </code>queue<code>, at nextTick </code>flushSchedulerQueue( )<code> Take out the watcher in the queue Execute </code>watcher.run<code> and execute the relevant hook function </code><code>2.3 Dep</code></p>There is a keyword <h3>Dep</h3> mentioned many times above, which relies on collection The container, or <p>dependency collector<code>, records which Watchers depend on its own changes, or which Watchers subscribe to its own changes; here is a quote from a netizen: </code></p><blockquote>@liuhongyi0101 ：简单点说就是引用计数 ，谁借了我的钱，我就把那个人记下来，以后我的钱少了 我就通知他们说我没钱了</blockquote><p>而把借钱的人记下来的小本本就是这里 <code>Dep</code> 实例里的subs</p><pre class="brush:php;toolbar:false">// src/core/observer/dep.js

let uid = 0            // Dep实例的id，为了方便去重

export default class Dep {
  static target: ?Watcher           // 当前是谁在进行依赖的收集
  id: number
  subs: Array<watcher>              // 观察者集合
  
  constructor() {
    this.id = uid++                             // Dep实例的id，为了方便去重
    this.subs = []                              // 存储收集器中需要通知的Watcher
  }

  addSub(sub: Watcher) { ... }  /* 添加一个观察者对象 */
  removeSub(sub: Watcher) { ... }  /* 移除一个观察者对象 */
  depend() { ... }  /* 依赖收集，当存在Dep.target的时候把自己添加观察者的依赖中 */
  notify() { ... }  /* 通知所有订阅者 */
}

const targetStack = []           // watcher栈

export function pushTarget(_target: ?Watcher) { ... }  /* 将watcher观察者实例设置给Dep.target，用以依赖收集。同时将该实例存入target栈中 */
export function popTarget() { ... }  /* 将观察者实例从target栈中取出并设置给Dep.target */</watcher>

这里 Dep 的实例中的 subs 搜集的依赖就是 watcher 了，它是 Watcher 的实例，将来用来通知更新

2.4 Watcher

// src/core/observer/watcher.js

/* 一个解析表达式，进行依赖收集的观察者，同时在表达式数据变更时触发回调函数。它被用于$watch api以及指令 */
export default class Watcher {
  constructor(
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean      // 是否是渲染watcher的标志位
  ) {
    this.getter = expOrFn                // 在get方法中执行
    if (this.computed) {                   // 是否是 计算属性
      this.value = undefined
      this.dep = new Dep()                 // 计算属性创建过程中并未求值
    } else {                               // 不是计算属性会立刻求值
      this.value = this.get()
    }
  }

  /* 获得getter的值并且重新进行依赖收集 */
  get() {
    pushTarget(this)                // 设置Dep.target = this
    let value
    value = this.getter.call(vm, vm)
    popTarget()                      // 将观察者实例从target栈中取出并设置给Dep.target
    this.cleanupDeps()
    return value
  }

  addDep(dep: Dep) { ... }  /* 添加一个依赖关系到Deps集合中 */
  cleanupDeps() { ... }  /* 清理newDeps里没有的无用watcher依赖 */
  update() { ... }  /* 调度者接口，当依赖发生改变的时候进行回调 */
  run() { ... }  /* 调度者工作接口，将被调度者回调 */
  getAndInvoke(cb: Function) { ... }
  evaluate() { ... }  /* 收集该watcher的所有deps依赖 */
  depend() { ... }  /* 收集该watcher的所有deps依赖，只有计算属性使用 */
  teardown() { ... }  /* 将自身从所有依赖收集订阅列表删除 */
}

get 方法中执行的 getter 就是在一开始new渲染watcher时传入的 updateComponent = () => { vm._update(vm._render(), hydrating) }，这个方法首先 vm._render() 生成渲染VNode树，在这个过程中完成对当前Vue实例 vm 上的数据访问，触发相应一众响应式对象的 getter，然后 vm._update() 去 patch

注意这里的 get 方法最后执行了 getAndInvoke，这个方法首先遍历watcher中存的 deps，移除 newDep 中已经没有的订阅，然后 depIds = newDepIds; deps = newDeps ，把 newDepIds 和 newDeps 清空。每次添加完新的订阅后移除旧的已经不需要的订阅，这样在某些情况，比如 v-if 已不需要的模板依赖的数据发生变化时就不会通知watcher去 update 了

2.5 小结

整个收集的流程大约是这样的，可以对照着上面的流程看一下

watcher 有下面几种使用场景：

• render watcher 渲染 watcher，渲染视图用的 watcher

• computed watcher 计算属性 watcher，因为计算属性即依赖别人也被人依赖，因此也会持有一个 Dep 实例

• watch watcher 侦听器 watcher

只要会被别的观察者 (watchers) 依赖，比如data、data的属性、计算属性、props，就会在闭包里生成一个 Dep 的实例 dep 并在被调用 getter 的时候 dep.depend 收集它被谁依赖了，并把被依赖的watcher存放到自己的subs中 this.subs.push(sub)，以便在自身改变的时候通知 notify 存放在 dep.subs 数组中依赖自己的 watchers 自己改变了，请及时 update ~

只要依赖别的响应式化对象的对象，都会生成一个观察者 watcher ，用来统计这个 watcher 依赖了哪些响应式对象，在这个 watcher 求值前把当前 watcher 设置到全局 Dep.target，并在自己依赖的响应式对象发生改变的时候及时 update

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

jQuery源码之Callbacks的学习

浏览器与NodeJS的EventLoop异同以及部分机制

The above is the detailed content of Dependency collection principle of Vue source code. For more information, please follow other related articles on the PHP Chinese website!