zoukankan      html  css  js  c++  java
  • Vue源码学习之双向绑定

    首发地址:CJWbiu's Blog

    原理:

      当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。

      上面那段话是Vue官方文档中截取的,可以看到是使用Object.defineProperty实现对数据改变的监听。Vue主要使用了观察者模式来实现数据与视图的双向绑定。

    function initData(vm) { //将data上数据复制到_data并遍历所有属性添加代理
      vm._data = vm.$options.data;
      const keys = Object.keys(vm._data); 
      let i = keys.length;
      while(i--) {  
        const key = keys[i];
        proxy(vm, `_data`, key);
      }
      observe(data, true /* asRootData */) //对data进行监听
    }

      在第一篇数据初始化中,执行new Vue()操作后会执行initData()去初始化用户传入的data,最后一步操作就是为data添加响应式。

    实现:

      在Vue内部存在三个对象:Observer、Dep、Watcher,这也是实现响应式的核心。

    Observer:

      Observer对象将data中所有的属性转为getter/setter形式,以下是简化版代码,详细代码请看这里

    export function observe (value) {
      //递归子属性时的判断
      if (!isObject(value) || value instanceof VNode) {
        return
      }
      ...
      ob = new Observer(value)
    }
    export class Observer {
      constructor (value) {
        ... //此处省略对数组的处理
        this.walk(value)
      }
    
      walk (obj: Object) {
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
          defineReactive(obj, keys[i]) //为每个属性创建setter/getter
        }
      }
      ...
    }
    
    //设置set/get
    export function defineReactive (
      obj: Object,
      key: string,
      val: any
    ) {
      //利用闭包存储每个属性关联的watcher队列,当setter触发时依然能访问到
      const dep = new Dep()
      ...
      //如果属性为对象也创建相应observer
      let childOb = observe(val)
      Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function reactiveGetter () {
          if (Dep.target) {
            dep.depend() //将当前dep传到对应watcher中再执行watcher.addDep将watcher添加到当前dep.subs中
            if (childOb) {  //如果属性是对象则继续收集依赖
              childOb.dep.depend()
              ...
            }
          }
          return value
        },
        set: function reactiveSetter (newVal) {
          ...
          childOb = observe(newVal) //如果设置的新值是对象,则为其创建observe
          dep.notify() //通知队列中的watcher进行更新
        }
      })
    }

      创建Observer对象时,为data的每个属性都执行了一遍defineReactive方法,如果当前属性为对象,则通过递归进行深度遍历。该方法中创建了一个Dep实例,每一个属性都有一个与之对应的dep,存储所有的依赖。然后为属性设置setter/getter,在getter时收集依赖,setter时派发更新。这里收集依赖不直接使用addSub是为了能让Watcher创建时自动将自己添加到dep.subs中,这样只有当数据被访问时才会进行依赖收集,可以避免一些不必要的依赖收集。

    Dep:

      Dep就是一个发布者,负责收集依赖,当数据更新是去通知订阅者(watcher)。源码地址

    export default class Dep {
      static target: ?Watcher; //指向当前watcher
      constructor () {
        this.subs = []
      }
      //添加watcher
      addSub (sub: Watcher) {
        this.subs.push(sub)
      }
      //移除watcher
      removeSub (sub: Watcher) {
        remove(this.subs, sub)
      }
      //通过watcher将自身添加到dep中
      depend () {
        if (Dep.target) {
          Dep.target.addDep(this)
        }
      }
      //派发更新信息
      notify () {
        ...
        for (let i = 0, l = subs.length; i < l; i++) {
          subs[i].update()
        }
      }
    }

    Watcher:

        源码地址

    //解析表达式(a.b),返回一个函数
    export function parsePath (path: string): any {
      if (bailRE.test(path)) {
        return
      }
      const segments = path.split('.')
      return function (obj) {
        for (let i = 0; i < segments.length; i++) {
          if (!obj) return
          obj = obj[segments[i]]    //遍历得到表达式所代表的属性
        }
        return obj
      }
    }
    export default class Watcher {
      constructor (
        vm: Component,
        expOrFn: string | Function,
        cb: Function,
        options?: ?Object,
        isRenderWatcher?: boolean
      ) {
        this.vm = vm
        if (isRenderWatcher) {
          vm._watcher = this
        } 
        //对创建的watcher进行收集,destroy时对这些watcher进行销毁
        vm._watchers.push(this)
        // options
        if (options) {
          ...
          this.before = options.before
        }
        ...
        //上一轮收集的依赖集合Dep以及对应的id
        this.deps = []
        this.depIds = new Set()
        //新收集的依赖集合Dep以及对应的id
        this.newDeps = []
        this.newDepIds = new Set()
        this.expression = process.env.NODE_ENV !== 'production'
          ? expOrFn.toString()
          : ''
        // parse expression for getter
        if (typeof expOrFn === 'function') {
          this.getter = expOrFn
        } else {
          this.getter = parsePath(expOrFn)
          ...
        }
        ...
        this.value = this.get()
      }
    
      /** * Evaluate the getter, and re-collect dependencies. */
      get () {
        pushTarget(this)
        let value
        const vm = this.vm
        try {
          value = this.getter.call(vm, vm)
        } catch (e) {
          if (this.user) {
            handleError(e, vm, `getter for watcher "${this.expression}"`)
          } else {
            throw e
          }
        } finally {
          // "touch" every property so they are all tracked as
          // dependencies for deep watching
          if (this.deep) {
            traverse(value)
          }
          popTarget()
          this.cleanupDeps() //清空上一轮的依赖
        }
        return value
      }
    
      /** * Add a dependency to this directive. */
      addDep (dep: Dep) {
        const id = dep.id
        if (!this.newDepIds.has(id)) { //同一个数据只收集一次
          this.newDepIds.add(id)
          this.newDeps.push(dep)
          if (!this.depIds.has(id)) {
            dep.addSub(this)
          }
        }
      }
    
      //每轮收集结束后去除掉上轮收集中不需要跟踪的依赖
      cleanupDeps () {
        let i = this.deps.length
        while (i--) {
          const dep = this.deps[i]
          if (!this.newDepIds.has(dep.id)) {
            dep.removeSub(this)
          }
        }
        let tmp = this.depIds
        this.depIds = this.newDepIds
        this.newDepIds = tmp
        this.newDepIds.clear()
        tmp = this.deps
        this.deps = this.newDeps
        this.newDeps = tmp
        this.newDeps.length = 0
      },
      update () {
        ...
        //经过一些优化处理后,最终执行this.get
        this.get();
      }
      // ...
    }

      依赖收集的触发是在执行render之前,会创建一个渲染Watcher:

    updateComponent = () => {
      vm._update(vm._render(), hydrating) //执行render生成VNode并更新dom
    }
    new Watcher(vm, updateComponent, noop, {
      before () {
        if (vm._isMounted) {
          callHook(vm, 'beforeUpdate')
        }
      }
    }, true /* isRenderWatcher */)

      在渲染Watcher创建时会将Dep.target指向自身并触发updateComponent也就是执行_render生成VNode并执行_updateVNode渲染成真实DOM,在render过程中会对模板进行编译,此时就会对data进行访问从而触发getter,由于此时Dep.target已经指向了渲染Watcher,接着渲染Watcher会执行自身的addDep,做一些去重判断然后执行dep.addSub(this)将自身push到属性对应的dep.subs中,同一个属性只会被添加一次,表示数据在当前Watcher中被引用。

      当_render结束后,会执行popTarget(),将当前Dep.target回退到上一轮的指,最终又回到了null,也就是所有收集已完毕。之后执行cleanupDeps()将上一轮不需要的依赖清除。当数据变化是,触发setter,执行对应Watcher的update属性,去执行get方法又重新将Dep.target指向当前执行的Watcher触发该Watcher的更新。

      这里可以看到有deps,newDeps两个依赖表,也就是上一轮的依赖和最新的依赖,这两个依赖表主要是用来做依赖清除的。但在addDep中可以看到if (!this.newDepIds.has(id))已经对收集的依赖进行了唯一性判断,不收集重复的数据依赖。为何又要在cleanupDeps中再作一次判断呢?

    while (i--) {
          const dep = this.deps[i]
          if (!this.newDepIds.has(dep.id)) {
            dep.removeSub(this)
          }
        }
        let tmp = this.depIds
        this.depIds = this.newDepIds
        this.newDepIds = tmp
        this.newDepIds.clear()
        tmp = this.deps
        this.deps = this.newDeps
        this.newDeps = tmp
        this.newDeps.length = 0

      在cleanupDeps中主要清除上一轮中的依赖在新一轮中没有重新收集的,也就是数据刷新后某些数据不再被渲染出来了,例如:

    <body>
      <div id="app">
        <div v-if='flag'>
          
        </div>     <div v-else>
          
        </div> 
        <button @click="msg1 += '1'">change</button>     <button @click="flag = !flag">toggle</button>   </div> <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        flag: true,
        msg1: 'msg1',
        msg2: 'msg2'
      }
    })
    </script> </body>

      每次点击change,msg1都会拼接一个1,此时就会触发重新渲染。当我们点击toggle时,由于flag改变,msg1不再被渲染,但当我们点击change时,msg1发生了变化,但却没有触发重新渲染,这就是cleanupDeps起的作用。如果去除掉cleanupDeps这个步骤,只是能防止添加相同的依赖,但是数据每次更新都会触发重新渲染,又去重新收集依赖。这个例子中,toggle后,重新收集的依赖中并没有msg1,因为它不需要被显示,但是由于设置了setter,此时去改变msg1依然会触发setter,如果没有执行cleanupDeps,那么msg1的依赖依然存在依赖表里,又会去触发重新渲染,这是不合理的,所以需要每次依赖收集完毕后清除掉一些不需要的依赖。

    总结:

      依赖收集其实就是收集每个数据被哪些Watcher(渲染Watcher、computedWatcher等)所引用,当这些数据更新时,就去通知依赖它的Watcher去更新。

  • 相关阅读:
    剑指offer——最小的K个数和数组中第K大的元素
    Leetcode刷题指南链接整理
    160. Intersection of Two Linked Lists
    100. Same Tree
    92. Reverse Linked List II
    94. Binary Tree Inorder Traversal
    79. Word Search
    78,90,Subsets,46,47,Permutations,39,40 DFS 大合集
    0x16 Tire之最大的异或对
    0x16 Tire
  • 原文地址:https://www.cnblogs.com/cjw-ryh/p/Vue.html
Copyright © 2011-2022 走看看