vue中的数据绑定原理的贯彻

看一下watcher.js

  1. Vue实例化的经过中有watch选项
  2. Vue实例化的进度中有computed总结属性选项
  3. Vue原型上有挂载$watch方法:
    Vue.prototype.$watch,能够直接通超过实际例调用this.$watch方法
  4. Vue生成了render函数,更新视图时

在initData 方法中,开首了对data
项中的数据开始展览“观看”,会将享有数据的成为observable 的。接下来看observe
方法的代码:

proxy

接下去看一下proxy代理。

/*添加代理*/
export function proxy (target: Object, sourceKey: string, key: string) {
  sharedPropertyDefinition.get = function proxyGetter () {
    return this[sourceKey][key]
  }
  sharedPropertyDefinition.set = function proxySetter (val) {
    this[sourceKey][key] = val
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

此地比较好精通,通过proxy函数将data下面的多少代理到vm上,这样就可以用app.text替代app._data.text了。

// src/core/observer/index.js

export class Observer {
 value: any;
 dep: Dep;
 vmCount: number; // number of vms that has this object as root $data

 constructor (value: any) {
  this.value = value
  this.dep = new Dep()
  this.vmCount = 0
  def(value, '__ob__', this)
  if (Array.isArray(value)) {
   const augment = hasProto
    ? protoAugment
    : copyAugment
   augment(value, arrayMethods, arrayKeys)
   this.observeArray(value)
  } else {
   this.walk(value)
  }
 }

 /**
  * Walk through each property and convert them into
  * getter/setters. This method should only be called when
  * value type is Object.
  */
 walk (obj: Object) {
  const keys = Object.keys(obj)
  for (let i = 0; i < keys.length; i++) {
   defineReactive(obj, keys[i], obj[keys[i]])
  }
 }

 /**
  * Observe a list of Array items.
  */
 observeArray (items: Array<any>) {
  for (let i = 0, l = items.length; i < l; i++) {
   observe(items[i])
  }
 }
}

我们在实例化app的时候,在构造函数里面传来的options中有props属性:

总结

Watcher

Watcher是八个观望者对象。注重采撷未来沃特cher对象会被封存在Deps中,数据变动的时候会出于Deps文告沃特cher实例,然后由沃特cher实例回调cb实行实图的更新。

export default class Watcher {
  vm: Component;
  expression: string;
  cb: Function;
  id: number;
  deep: boolean;
  user: boolean;
  lazy: boolean;
  sync: boolean;
  dirty: boolean;
  active: boolean;
  deps: Array<Dep>;
  newDeps: Array<Dep>;
  depIds: ISet;
  newDepIds: ISet;
  getter: Function;
  value: any;

  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: Object
  ) {
    this.vm = vm
    /*_watchers存放订阅者实例*/
    vm._watchers.push(this)
    // options
    if (options) {
      this.deep = !!options.deep
      this.user = !!options.user
      this.lazy = !!options.lazy
      this.sync = !!options.sync
    } else {
      this.deep = this.user = this.lazy = this.sync = false
    }
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.lazy // for lazy watchers
    this.deps = []
    this.newDeps = []
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    /*把表达式expOrFn解析成getter*/
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if (!this.getter) {
        this.getter = function () {}
        process.env.NODE_ENV !== 'production' && warn(
          `Failed watching path: "${expOrFn}" ` +
          'Watcher only accepts simple dot-delimited paths. ' +
          'For full control, use a function instead.',
          vm
        )
      }
    }
    this.value = this.lazy
      ? undefined
      : this.get()
  }

  /**
   * Evaluate the getter, and re-collect dependencies.
   */
   /*获得getter的值并且重新进行依赖收集*/
  get () {
    /*将自身watcher观察者实例设置给Dep.target,用以依赖收集。*/
    pushTarget(this)
    let value
    const vm = this.vm

    /*
      执行了getter操作,看似执行了渲染操作,其实是执行了依赖收集。
      在将Dep.target设置为自生观察者实例以后,执行getter操作。
      譬如说现在的的data中可能有a、b、c三个数据,getter渲染需要依赖a跟c,
      那么在执行getter的时候就会触发a跟c两个数据的getter函数,
      在getter函数中即可判断Dep.target是否存在然后完成依赖收集,
      将该观察者对象放入闭包中的Dep的subs中去。
    */
    if (this.user) {
      try {
        value = this.getter.call(vm, vm)
      } catch (e) {
        handleError(e, vm, `getter for watcher "${this.expression}"`)
      }
    } else {
      value = this.getter.call(vm, vm)
    }
    // "touch" every property so they are all tracked as
    // dependencies for deep watching
    /*如果存在deep,则触发每个深层对象的依赖,追踪其变化*/
    if (this.deep) {
      /*递归每一个对象或者数组,触发它们的getter,使得对象或数组的每一个成员都被依赖收集,形成一个“深(deep)”依赖关系*/
      traverse(value)
    }

    /*将观察者实例从target栈中取出并设置给Dep.target*/
    popTarget()
    this.cleanupDeps()
    return value
  }

  /**
   * Add a dependency to this directive.
   */
   /*添加一个依赖关系到Deps集合中*/
  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)
      }
    }
  }

  /**
   * Clean up for dependency collection.
   */
   /*清理依赖收集*/
  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
  }

  /**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
   /*
      调度者接口,当依赖发生改变的时候进行回调。
   */
  update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      /*同步则执行run直接渲染视图*/
      this.run()
    } else {
      /*异步推送到观察者队列中,由调度者调用。*/
      queueWatcher(this)
    }
  }

  /**
   * Scheduler job interface.
   * Will be called by the scheduler.
   */
   /*
      调度者工作接口,将被调度者回调。
    */
  run () {
    if (this.active) {
      const value = this.get()
      if (
        value !== this.value ||
        // Deep watchers and watchers on Object/Arrays should fire even
        // when the value is the same, because the value may
        // have mutated.
        /*
            即便值相同,拥有Deep属性的观察者以及在对象/数组上的观察者应该被触发更新,因为它们的值可能发生改变。
        */
        isObject(value) ||
        this.deep
      ) {
        // set new value
        const oldValue = this.value
        /*设置新的值*/
        this.value = value

        /*触发回调渲染视图*/
        if (this.user) {
          try {
            this.cb.call(this.vm, value, oldValue)
          } catch (e) {
            handleError(e, this.vm, `callback for watcher "${this.expression}"`)
          }
        } else {
          this.cb.call(this.vm, value, oldValue)
        }
      }
    }
  }

  /**
   * Evaluate the value of the watcher.
   * This only gets called for lazy watchers.
   */
   /*获取观察者的值*/
  evaluate () {
    this.value = this.get()
    this.dirty = false
  }

  /**
   * Depend on all deps collected by this watcher.
   */
   /*收集该watcher的所有deps依赖*/
  depend () {
    let i = this.deps.length
    while (i--) {
      this.deps[i].depend()
    }
  }

  /**
   * Remove self from all dependencies' subscriber list.
   */
   /*将自身从所有依赖收集订阅列表删除*/
  teardown () {
    if (this.active) {
      // remove self from vm's watcher list
      // this is a somewhat expensive operation so we skip it
      // if the vm is being destroyed.
      /*从vm实例的观察者列表中将自身移除,由于该操作比较耗费资源,所以如果vm实例正在被销毁则跳过该步骤。*/
      if (!this.vm._isBeingDestroyed) {
        remove(this.vm._watchers, this)
      }
      let i = this.deps.length
      while (i--) {
        this.deps[i].removeSub(this)
      }
      this.active = false
    }
  }
}

先看一下Dep

当大家调用new Vue的时候,事实上就调用的Vue原型上的_init方法.

透过源码能够见到,实例化Observer
进度中一言九鼎是做了多少个判别。假诺是数组,则对数组里面包车型地铁种种再次调用oberser
方法进行观测;假使是非数组的靶子,遍历对象的每多少个属性,对其调用defineReactive
方法。这里的defineReactive 方法正是主导!通过接纳Object.defineProperty
方法对每二个亟需被观察标质量增添get/set,实现重视收集。依赖收罗过后,种种属性都会有1个Dep
来保存全数沃特cher
对象。根据文章最开首的例证来说,便是对firstName和fullName分别增添了get/set,并且它们分别有三个Dep
实例来保存各自观望它们的全体沃特cher 对象。上面是defineReactive 的源码:

数据绑定原理

眼下已经讲过Vue数据绑定的法则了,以往从源码来看一下数据绑定在Vue中是何等完毕的。

先是看一下Vue.js官方网站介绍响应式原理的那张图。

图片 1

这张图相比较明晰地出示了任何工艺流程,首先通过贰次渲染操作触发Data的getter(这里有限帮助唯有视图中须求被用到的data才会触发getter)进行注重搜罗,那时候其实沃特cher与data能够作为一种被绑定的情事(实际上是data的闭包中有1个Deps订阅着,在修改的时候会通报所有的沃特cher阅览者),在data爆发变化的时候会触发它的setter,setter通告沃特cher,Watcher举行回调文告组件重新渲染的函数,之后听大人讲diff算法来决定是或不是发生视图的更新。

Vue在初阶化组件数据时,在生命周期的beforeCreate与created钩子函数之间完结了对data、props、computed、methods、events以及watch的处理。

遍历状态,修改景况的getter和setter,当页面上对应状态被第三回渲染的时候,会为页面上每三个利用到data的地方新建多个watcher,并将近来watcher保存到全局变量Dep.target中,在对应data的getter中就能够调用Dep.depend方法,将日前的watcher增多到当前的Dep中,贰个Dep对应三个或三个watcher,着取决于,此情景被选择的数量。当data被改变时,对应的setter就会被触发,会调用对应的Dep中的notify方法,布告全数观看者,实行更新。

在往上数的第叁段代码里面包车型大巴诀要obervse(value),即对{key1: 'a', key2: {a: 'b'}}拓展信赖的管住,同期将这几个obj全数的属性值都转发为getter/setter形式。此外,Vue还会将props质量都代理到vm实例上,通过vm.key1,vm.key2就足以访问到那性格子。

上述所述是小编给大家介绍的 Vue 源码深入分析之
Observer完结进程,希望对大家具备匡助,假设大家有其余疑问请给自个儿留言,我会及时回复大家的。在此也非常感激大家对台本之家网址的帮衬!

 

// src/core/instance/state.js

export function initState (vm: Component) {
 vm._watchers = []
 initProps(vm)
 initData(vm)
 initComputed(vm)
 initMethods(vm)
 initWatch(vm)
}

Vue提供了一个observe方法,在在那之中间实例化了3个Observer类,并赶回Observer的实例。各种Observer实例对应记录了props中那几个的default
value的兼具重视(只限object类型),那些Observer实际上正是四个观察者,它爱戴了三个数组this.subs
= []用来搜聚有关的subs(订阅者)(即那一个观看者的信赖)。通过将default
value转化为getter/setter格局,同不平日间丰硕一个自定义__ob__天性,那么些天性就对应Observer实例。

在源码中,通过还原Vue 进行实例化的进度,从开端一步一步到Observer
类的源码依次为(省略了众多不在本篇小说商量的代码):

defineReactive

接下去是defineReactive。defineReactive的机能是因此Object.defineProperty为数据定义上getter\setter方法,举行注重收罗后闭包中的Deps会存放Watcher对象。触发setter改动多少的时候会公告Deps订阅者公告全部的Watcher阅览者对象开始展览希图的立异。

/**
 * Define a reactive property on an Object.
 */
export function defineReactive (
  obj: Object,
  key: string,
  val: any,
  customSetter?: Function
) {
  /*在闭包中定义一个dep对象*/
  const dep = new Dep()

  const property = Object.getOwnPropertyDescriptor(obj, key)
  if (property && property.configurable === false) {
    return
  }

  /*如果之前该对象已经预设了getter以及setter函数则将其取出来,新定义的getter/setter中会将其执行,保证不会覆盖之前已经定义的getter/setter。*/
  // cater for pre-defined getter/setters
  const getter = property && property.get
  const setter = property && property.set

  /*对象的子对象递归进行observe并返回子节点的Observer对象*/
  let childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {

      /*如果原本对象拥有getter方法则执行*/
      const value = getter ? getter.call(obj) : val
      if (Dep.target) {

        /*进行依赖收集*/
        dep.depend()
        if (childOb) {

          /*子对象进行依赖收集,其实就是将同一个watcher观察者实例放进了两个depend中,一个是正在本身闭包中的depend,另一个是子元素的depend*/
          childOb.dep.depend()
        }
        if (Array.isArray(value)) {

          /*是数组则需要对每一个成员都进行依赖收集,如果数组的成员还是数组,则递归。*/
          dependArray(value)
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {

      /*通过getter方法获取当前值,与新值进行比较,一致则不需要执行下面的操作*/
      const value = getter ? getter.call(obj) : val
      /* eslint-disable no-self-compare */
      if (newVal === value || (newVal !== newVal && value !== value)) {
        return
      }
      /* eslint-enable no-self-compare */
      if (process.env.NODE_ENV !== 'production' && customSetter) {
        customSetter()
      }
      if (setter) {

        /*如果原本对象拥有setter方法则执行setter*/
        setter.call(obj, newVal)
      } else {
        val = newVal
      }

      /*新的值需要重新进行observe,保证数据响应式*/
      childOb = observe(newVal)

      /*dep对象通知所有的观察者*/
      dep.notify()
    }
  })
}

近日再来看那张图是否更明显了呢?

图片 1

// src/core/observer/index.js

export function observe (value: any): Observer | void {
 if (!isObject(value)) {
  return
 }
 let ob: Observer | void
 if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  ob = value.__ob__
 } else if (
  observerState.shouldConvert &&
  !config._isServer &&
  (Array.isArray(value) || isPlainObject(value)) &&
  Object.isExtensible(value) &&
  !value._isVue
 ) {
  ob = new Observer(value)
 }
 return ob
}
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)
   }
  }
 }

Observer 最重视的意义正是完结了上海体育场面中touch -Data(getter) – Collect as
Dependency这段进程,约等于借助搜聚的进度。

observe

接下去是observe,这一个函数定义在core文件下oberver的index.js文件中。

/**
 * Attempt to create an observer instance for a value,
 * returns the new observer if successfully observed,
 * or the existing observer if the value already has one.
 */
 /*
 尝试创建一个Observer实例(__ob__),如果成功创建Observer实例则返回新的Observer实例,如果已有Observer实例则返回现有的Observer实例。
 */
export function observe (value: any, asRootData: ?boolean): Observer | void {
  /*判断是否是一个对象*/
  if (!isObject(value)) {
    return
  }
  let ob: Observer | void

  /*这里用__ob__这个属性来判断是否已经有Observer实例,如果没有Observer实例则会新建一个Observer实例并赋值给__ob__这个属性,如果已有Observer实例则直接返回该Observer实例*/
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (

    /*这里的判断是为了确保value是单纯的对象,而不是函数或者是Regexp等情况。*/
    observerState.shouldConvert &&
    !isServerRendering() &&
    (Array.isArray(value) || isPlainObject(value)) &&
    Object.isExtensible(value) &&
    !value._isVue
  ) {
    ob = new Observer(value)
  }
  if (asRootData && ob) {

    /*如果是根数据则计数,后面Observer中的observe的asRootData非true*/
    ob.vmCount++
  }
  return ob
}

Vue的响应式数据都会有三个ob的习性作为标志,里面存放了该属性的观望器,也正是Observer的实例,幸免再一次绑定。

// src/core/observer/watcher.js

export default class Watcher {
...
 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)) {
    // 将当前watcher添加到当前的Dep中
    dep.addSub(this)
   }
  }
 }
...
}

其它,还索要了然下在Vue中管理依赖的三个极其重大的类: Dep

(注:左右滑行就可以查看完整代码,下同)

initData

此地来说一下initData,能够参谋源码instance下的state.js文件,下边全体的汉语注释都以本身加的,英文注释是尤大加的,请不要忽视英文申明,英文注脚都讲到了比较关键依旧晦涩难懂的点。

加注释版的vue源码也能够直接通过传送门查阅,这几个是自身在阅读Vue源码进程中加的讲授,持续创新中。

initData首倘诺初步化data中的数据,将数据开始展览Oberver,监听数据的成形,其余的监视原理1致,这里以data为例。

function initData (vm: Component) {

  /*得到data数据*/
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}

  /*判断是否是对象*/
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }

  // proxy data on instance
  /*遍历data对象*/
  const keys = Object.keys(data)
  const props = vm.$options.props
  let i = keys.length

  //遍历data中的数据
  while (i--) {
    /*保证data中的key不与props中的key重复,props优先,如果有冲突会产生warning*/
    if (props && hasOwn(props, keys[i])) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${keys[i]}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(keys[i])) {
      /*判断是否是保留字段*/

      /*这里是我们前面讲过的代理,将data上面的属性代理到了vm实例上*/
      proxy(vm, `_data`, keys[i])
    }
  }

  // observe data
  /*从这里开始我们要observe了,开始对数据进行绑定,这里有尤大大的注释asRootData,这步作为根数据,下面会进行递归observe进行对深层对象的绑定。*/
  observe(data, true /* asRootData */)
}

实则这段代码主要做了两件事,1是将_data上边的数目代理到vm上,另一件事经过observe将具有数据形成observable。

vue中的响应式数据绑定是经过数量威逼和阅览者情势来落实的。当前攻读源码为vue2.0

其中在this._init()艺术中调用initState(vm),完成对vm本条实例的多少的监听,也是本文所要张开说的具体内容。

响应式原理可分为两步,注重搜聚的历程与触发-重新渲染的长河。依赖搜聚的长河,有七个很紧要的类,分别是
沃特cher、Dep、Observer。本文主要解读 Observer 。

Observer

接下去看一下新建的Observer。Observer的职能正是遍历对象的有着属性将其进展双向绑定。

/**
 * Observer class that are attached to each observed
 * object. Once attached, the observer converts target
 * object's property keys into getter/setters that
 * collect dependencies and dispatches updates.
 */
export class  {
  value: any;
  dep: Dep;
  vmCount: number; // number of vms that has this object as root $data

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    this.vmCount = 0

    /* 
    将Observer实例绑定到data的__ob__属性上面去,之前说过observe的时候会先检测是否已经有__ob__对象存放Observer实例了,def方法定义可以参考https://github.com/vuejs/vue/blob/dev/src/core/util/lang.js#L16 
    */
    def(value, '__ob__', this)
    if (Array.isArray(value)) {

      /*
          如果是数组,将修改后可以截获响应的数组方法替换掉该数组的原型中的原生方法,达到监听数组数据变化响应的效果。
          这里如果当前浏览器支持__proto__属性,则直接覆盖当前数组对象原型上的原生数组方法,如果不支持该属性,则直接覆盖数组对象的原型。
      */
      const augment = hasProto
        ? protoAugment  /*直接覆盖原型的方法来修改目标对象*/
        : copyAugment   /*定义(覆盖)目标对象或数组的某一个方法*/
      augment(value, arrayMethods, arrayKeys)

      /*如果是数组则需要遍历数组的每一个成员进行observe*/
      this.observeArray(value)
    } else {

      /*如果是对象则直接walk进行绑定*/
      this.walk(value)
    }
  }

  /**
   * Walk through each property and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   */
  walk (obj: Object) {
    const keys = Object.keys(obj)

    /*walk方法会遍历对象的每一个属性进行defineReactive绑定*/
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i], obj[keys[i]])
    }
  }

  /**
   * Observe a list of Array items.
   */
  observeArray (items: Array<any>) {

    /*数组需要便利每一个成员进行observe*/
    for (let i = 0, l = items.length; i < l; i++) {
      observe(items[i])
    }
  }
}

Observer为数据增进响应式属性实行双向绑定。如若是目的则展开深度遍历,为每二个子对象都绑定上格局,若是是数组则为每三个分子都绑定上艺术。

假若是修改三个数组的成员,该成员是三个对象,那只须求递归对数组的积极分子开始展览双向绑定就能够。但此刻出现了一个主题材料,?假如大家开始展览pop、push等操作的时候,push进去的指标根本未有开始展览过双向绑定,更别说pop了,那么大家什么监听数组的那几个变化呢?
Vue.js提供的点子是重写push、pop、shift、unshift、splice、sort、reverse那七个数组方法。修改数组原型方法的代码能够参照observer/array.js。

/*
 * not type checking this file because flow doesn't play well with
 * dynamically accessing methods on Array prototype
 */

import { def } from '../util/index'

/*取得原生数组的原型*/
const arrayProto = Array.prototype
/*创建一个新的数组对象,修改该对象上的数组的七个方法,防止污染原生数组方法*/
export const arrayMethods = Object.create(arrayProto)

/**
 * Intercept mutating methods and emit events
 */
 /*这里重写了数组的这些方法,在保证不污染原生数组原型的情况下重写数组的这些方法,截获数组的成员发生的变化,执行原生数组操作的同时dep通知关联的所有观察者进行响应式处理*/
;[
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
.forEach(function (method) {
  // cache original method
  /*将数组的原生方法缓存起来,后面要调用*/
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator () {
    // avoid leaking arguments:
    // http://jsperf.com/closure-with-arguments
    let i = arguments.length
    const args = new Array(i)
    while (i--) {
      args[i] = arguments[i]
    }
    /*调用原生的数组方法*/
    const result = original.apply(this, args)

    /*数组新插入的元素需要重新进行observe才能响应式*/
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
        inserted = args
        break
      case 'unshift':
        inserted = args
        break
      case 'splice':
        inserted = args.slice(2)
        break
    }
    if (inserted) ob.observeArray(inserted)

    // notify change
    /*dep通知所有注册的观察者进行响应式处理*/
    ob.dep.notify()
    return result
  })
})

从数组的原型新建3个Object.create(arrayProto)对象,通过退换此原型能够确认保障原生数组方法不被传染。假若当前浏览器接济proto以此天性的话就足以平昔覆盖该属性则使数组对象具备了重写后的数组方法。若是未有该属性的浏览器,则必须经过遍历def全数需求重写的数组方法,这种艺术效用相当的低,所以优用第二种。
在保证不传染不掩盖数组原生方法加多监听,主要做了五个操作,第三是打招呼全数注册的观察者进行响应式管理,第贰是1旦是加上成员的操作,须求对新成员开始展览observe。
但是修改了数组的原生方法之后大家如故无奈像原生数组同样一向通过数组的下标只怕安装length来修改数组,Vue.js提供了图片 3%E5%8F%8A)remove()方法。

你或许感兴趣的小说:

  • 采取Vue怎么样写二个双向数据绑定(面试常见)
  • vue双向数据绑定知识点总结
  • Vue入门之数据绑定(小结)
  • 浅谈Vue数据绑定的规律
  • 自在精晓vue的双向数据绑定难点
  • 透过源码分析Vue的双向数据绑定详解
  • 详解Vue双向数据绑定原理剖判
  • Vue.js数据绑定之data属性
  • Vue.js中多少绑定的语法教程
  • vue.js动态数据绑定学习笔记
  • vue达成动态数据绑定
// 原型上提供_init方法,新建一个vue实例并传入options参数
 Vue.prototype._init = function (options?: Object) {
  const vm: Component = this
  // a uid
  vm._uid = uid++

  let startTag, endTag
  // a flag to avoid this being observed
  vm._isVue = true
  // merge options
  if (options && options._isComponent) {
   // optimize internal component instantiation
   // since dynamic options merging is pretty slow, and none of the
   // internal component options needs special treatment.
   initInternalComponent(vm, options)
  } else {
   // 将传入的这些options选项挂载到vm.$options属性上
   vm.$options = mergeOptions(
    // components/filter/directive
    resolveConstructorOptions(vm.constructor),
    // this._init()传入的options
    options || {},
    vm
   )
  }
  /* istanbul ignore else */
  if (process.env.NODE_ENV !== 'production') {
   initProxy(vm)
  } else {
   vm._renderProxy = vm
  }
  // expose real self
  vm._self = vm   // 自身的实例
  // 接下来所有的操作都是在这个实例上添加方法
  initLifecycle(vm) // lifecycle初始化
  initEvents(vm)   // events初始化 vm._events, 主要是提供vm实例上的$on/$emit/$off/$off等方法
  initRender(vm)   // 初始化渲染函数,在vm上绑定$createElement方法
  callHook(vm, 'beforeCreate') // 钩子函数的执行, beforeCreate
  initInjections(vm) // resolve injections before data/props
  initState(vm)   // Observe data添加对data的监听, 将data转化为getters/setters
  initProvide(vm) // resolve provide after data/props
  callHook(vm, 'created') // 钩子函数的执行, created

  // vm挂载的根元素
  if (vm.$options.el) {
   vm.$mount(vm.$options.el)
  }
 }

依据源码中的普通话注释,应该可以通晓defineReactive
实行的经过中做了什么专门的学业。其实全数经过正是递归,为种种属性增添getter/setter。对于getter/setter,一样也急需对每1个脾性进行递归(剖断子对象)的成功观望者方式。对于getter,用来成功正视搜聚,即源码中的dep.depend()。对于setter,壹旦二个数码触发其set方法,便会宣布更新音讯,布告这几个数指标有着观察者也要发生变动。即源码中的dep.notify()。

Dep

来看看Dep类。其实Dep正是1个发布者,能够订阅八个阅览者,信赖搜聚之后Deps中会存在2个或七个沃特cher对象,在数额变动的时候公告所有的沃特cher。

/**
 * A dep is an observable that can have multiple
 * directives subscribing to it.
 */
export default class Dep {
  static target: ?Watcher;
  id: number;
  subs: Array<Watcher>;

  constructor () {
    this.id = uid++
    this.subs = []
  }

  /*添加一个观察者对象*/
  addSub (sub: Watcher) {
    this.subs.push(sub)
  }

  /*移除一个观察者对象*/
  removeSub (sub: Watcher) {
    remove(this.subs, sub)
  }

  /*依赖收集,当存在Dep.target的时候添加观察者对象*/
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }

  /*通知所有订阅者*/
  notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    for (let i = 0, l = subs.length; i < l; i++) {
      subs[i].update()
    }
  }
}

// the current target watcher being evaluated.
// this is globally unique because there could be only one
// watcher being evaluated at any time.
Dep.target = null
/*依赖收集完需要将Dep.target设为null,防止后面重复添加依赖。*/

可已看到此间也是做了有个别判断,要是有__ob__属性的话就用它,或许壹旦data是数组或对象或可扩充对象的话,就为它新建1个Observer,看一下Observer

export default class Dep { 
 constructor () {
  this.id = uid++
  this.subs = []
 }
 addSub () {...} // 添加订阅者(依赖)
 removeSub () {...} // 删除订阅者(依赖)
 depend () {...} // 检查当前Dep.target是否存在以及判断这个watcher已经被添加到了相应的依赖当中,如果没有则添加订阅者(依赖),如果已经被添加了那么就不做处理
 notify () {...} // 通知订阅者(依赖)更新
}
exportfunctiondefineReactive(
obj: Object,
key: string,
val: any,
customSetter?: ?Function,
shallow?: boolean
) {
constdep = newDep()
// 获取属性的自身描述符
constproperty = Object.getOwnPropertyDeor(obj, key)
if(property && property.configurable === false) {
return
}
// cater for pre-defined getter/setters
// 检查属性之前是否设置了 getter/setter
// 如果设置了,则在之后的 get/set 方法中执行设置了的 getter/setter
constgetter = property && property.get
constsetter = property && property.set
// 通过对属性再次调用 observe 方法来判断是否有子对象
// 如果有子对象,对子对象也进行依赖搜集
letchildOb = !shallow && observe(val)
Object.defineProperty(obj, key, {
enumerable: true,
configurable: true,
get: functionreactiveGetter() {
// 如果属性原本拥有getter方法则执行
constvalue = getter ? getter.call(obj) : val
if(Dep.target) {
// 进行依赖收集
dep.depend()
if(childOb) {
// 如果有子对象,对子对象也进行依赖搜集
childOb.dep.depend()
// 如果属性是数组,则对每一个项都进行依赖收集
// 如果某一项还是数组,则递归
if(Array.isArray(value)) {
dependArray(value)
}
}
}
returnvalue
},
set: functionreactiveSetter(newVal) {
// 如果属性原本拥有getter方法则执行
// 通过getter方法获取当前值,与新值进行比较
// 如果新旧值一样则不需要执行下面的操作
constvalue = getter ? getter.call(obj) : val
/* eslint-disable no-self-compare */
if(newVal === value || (newVal !== newVal && value !== value)) {
return
}
/* eslint-enable no-self-compare */
if(process.env.NODE_ENV !== 'production'&& customSetter) {
customSetter()
}
if(setter) {
// 如果属性原本拥有setter方法则执行
setter.call(obj, newVal)
} else{
// 如果原本没有setter则直接赋新值
val = newVal
}
// 判断新的值是否有子对象,有的话继续观察子对象
childOb = !shallow && observe(newVal)
// 通知所有的观察者,更新状态
dep.notify()
}
})
}

关于

作者:染陌

Email:answershuto@gmail.com or answershuto@126.com

Github:

Blog:

网易专栏:

掘金:

osChina:

转发请注脚出处,谢谢。

招待关心自己的万众号

图片 4

 

图片 5

接下去看下validateProp(key, propsOptions, propsData, vm)办法内部到底发生了何等。

exportclassObserver{
value: any;
dep: Dep;
vmCount: number; // number of vms that has this object as root $data
constructor(value: any) {
this.value = value
this.dep = newDep()
this.vmCount = 0
def(value, '__ob__', this)
if(Array.isArray(value)) {
// ...
this.observeArray(value)
} else{
this.walk(value)
}
}
walk (obj: Object) {
constkeys = Object.keys(obj)
for(leti = 0; i < keys.length; i++) {
defineReactive(obj, keys[i], obj[keys[i]])
}
}
observeArray (items: Array<any>) {
for(leti = 0, l = items.length; i < l; i++) {
observe(items[i])
}
}
}

写在头里

因为对Vue.js很感兴趣,而且平日做事的本领栈也是Vue.js,那多少个月花了些日子研讨学习了壹晃Vue.js源码,并做了计算与出口。
小说的原地点:。
在念书进度中,为Vue加上了粤语的注解,希望得以对其他想上学Vue源码的同伴有所帮助。
也许会有掌握存在过错的地方,迎接提issue建议,共同学习,共同进步。

阅读数据绑定源码在此之前提出先理解一下《响应式原理》以及《重视搜集》,能够越来越好地知道Vue.js数据双向绑定的总体经过。

当大家实例化四个vue应用的时候,会伴随着种种的起先化职业,相关的起始化工作代码在init.js文件中

dep是一同头初叶化的长河中,那一个性情上的dep属性。调用dep.depend()函数:

还是以上面包车型大巴代码为例子进行梳理:

看清data是否数组,假使是数组就对数组成分再去调用observe方法做同样的管理,假若不是,就调用walk去威吓该多少,对数码的绑架首要再defineReactive方法中,正如函数名,让多少变得响应式。看一下defineReactive方法

在Vue的漫天生命周期个中,你所定义的响应式的数码上都会绑定2个Dep实例去管理其借助。它事实上正是旁观者和订阅者联系的三个大桥。

你可能感兴趣的稿子:

  • vue怎么着完结observer和watcher源码深入分析
  • Vue.js原理深入分析之observer模块详解
  • 简单来讲落成Vue的observer和watcher

正文主要介绍了vue中的数据绑定原理的完结,分享给我们,也给和谐留个笔记,具体如下:

其有时候依赖完成了采访,当您去修改a属性的值时,会调用a属性的setter函数,里面会实践dep.notify(),它会遍历全部的订阅者,然后调用订阅者上的update函数。

varvm = newVue({
el: '#demo',
data: {
firstName: 'Hello',
fullName: ''
},
watch: {
firstName(val) {
this.fullName = val + 'TalkingData';
},
}
})

相关文章