欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue数据双向绑定(响应式)原理之别再说发布者-订阅者模式

程序员文章站 2024-02-10 16:39:58
...

每当去找工作面试的时候,当面试官问到vue的双向数据绑定或者响应式原理的时候,面试者总是不加思索的张口就来:采用发布者-订阅者模式。。。。。一顿神侃。真不知道是梁静茹给了你们多少勇气说出的这句话。这么说一定会被面试官认为是背过题的。那么vue的双向数据绑定(响应式)原理到底是什么呢?这还是得从vue的源码说起:

我们知道vue的一大特点是数据驱动视图,如何理解数据驱动视图这六个字呢?

数据:可以理解为state;

驱动:这里应该是一个动词,就是操作的意思,就是render函数;

视图:就是页面的UI;

这样说来,其实我们可以得到这样一个公式:UI = render(state),这样一来,state的变化就会直接导致UI的变化,而始终不变的是这个render,vue就是扮演了人render的角色。那么vue是如何知道state变化的呢?这是一个问题。有个词叫变化侦测,别说你没听过,因为在当前的主流技术栈,vue,react,angular中都有提到,换言之,就是状态追宗,一旦数据变化,就去更新视图。那么这是如何做到的呢。我们先从对象的变化侦测说起。

所谓变化侦测,就是我们能够知道数据什么时候被读取了或数据什么时候被改写了。

数据的侦测

1、实现对象的侦测(可观察)

对象的侦测是借助Object.defineProperty()这个方法。

首先定义一个对象animal:

let animal = {
    name: 'dog',
    age: 3
}

那么当这个animal的对象的属性被修改的时候,我们是如何知道的呢,且看下面的操作:

let name = 'cat'
Objecct. defineProperty(animal, 'name', {
    configrable: true,    //    描述属性是否配置,以及可否删除
    enumerable: true,     //    描述属性是否会出现在for in 或者 Object.keys()的遍历中
    writable: true,       //    属性的值是否可以被重写
    get () {
        //    这里读取了name的值
        return name
    },
    set (value) {
        //    这里设置了name的值
        name = value
    }
})

这样一来,当name的值被改成cat的时候,就会变的可观测,可被侦测。但是这只是做到了对象的某一个属性被侦测,但是对象的属性往往不是一个,多个的时候又该怎么办呢?其实也很简单,对,没错,就是你想说的递归。直接上代码:

//    源码位置:src/core/observer/index.js
export class Observer {
    constructor (value) {
        this.value = value
        def(value,'__ob__',this)
        if (Array.isArray(value)) {
              // 当value为数组时的逻辑
        } else {
              this.walk(value)
        }
    }

    walk (obj: Object) {
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
              defineReactive(obj, keys[i])
        }
    }
}
function defineReactive (obj,key,val) {
      if (arguments.length === 2) {
            val = obj[key]
      }
      if(typeof val === 'object'){
          new Observer(val)
      }
      Object.defineProperty(obj, key, {
          enumerable: true,
          configurable: true,
          get(){
              console.log(`${key}属性被读取了`);
              return val;
          },
          set(newVal){
              if(val === newVal){
                  return
              }
              console.log(`${key}属性被修改了`);
              val = newVal;
          }
      })
}

我们声明一个Observer类,用于将对象的所有属性都转变为可侦测,并且,我们要给每一个可侦测的对象添加一个__ob__属性,值为value的Observer的实力,这就相当于给每一个value设置了标示,表示这个value是响应式的了。那么当value是一个对象的时候,我们拿到他的所有的key,循环遍历调用Object.defineProperty()的方法,调用get/set方法来侦测,当发现传入的是一个Object的时候,通过递归的方式,再次通过Observer类去实例这个Object。这样我们就实现了对象的侦测。

2、实现数组的侦测(可观察)

上面我们讲了对象的侦测,现在来聊聊数组的侦测。

数组的可观测与对象的可观测有所不同,因为数组不能用Object.defineProperty()去观测。那么数组如何做到可观测呢,其实大同小意,数组是通过拦截器来做到的,那么这个拦截器是何方神圣?且听我一一道来。

我们知道,JavaScript中操作数组的原生方法,其实就是那么几个,push/pop/shift/unshift/splice/sort/reverse。这些方法都是通过Array.prototype来访问,那么我们如果在Array.prototype上重新第一个方法,去实现原生的方法,如newPush去实现与push同样的作用,是不是很完美。既没有修改原生方法,又可以在调用原生方法之前做了相应的操作。

let arr = [1,2,3]
//    arr.push(4) 原生方法调用
Array.prototype.newPush = function(val){
      console.log('arr被修改了')
      this.push(val)
}
arr.newPush(4)

所以,数组的拦截器就是在数组实例和Array.prototype之间重写了操作数组的方法。这样在调用处理的方法的时候,就是调用的重写之后的方法,而不是原生方法。来看拦截器的实现:

// 源码位置:/src/core/observer/array.js
const arrayProto = Array.prototype
export const arrayMethods = Object.create(arrayProto)
const methodsToPatch = [
  'push',
  'pop',
  'shift',
  'unshift',
  'splice',
  'sort',
  'reverse'
]
methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  Object.defineProperty(arrayMethods, method, {
    enumerable: false,
    configurable: true,
    writable: true,
    value:function mutator(...args){
      const result = original.apply(this, args)
      return result
    }
  })
})

这就是拦截器的实现,当调用数组的方法时,实际调用的是mutator函数,所以,我们可以在这个函数中做一些操作。但是这么做还不够,只有将拦截器挂载在数组实例和Array.prototype之间才能生效,也就是将数据的__proto__属性设置为拦截器arrayMethods即可

// 源码位置:/src/core/observer/index.js
export class Observer {
  constructor (value) {
    this.value = value
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
    } else {
      this.walk(value)
    }
  }
}
// 能力检测:判断__proto__是否可用,因为有的浏览器不支持该属性
export const hasProto = '__proto__' in {}

const arrayKeys = Object.getOwnPropertyNames(arrayMethods)

/**
 * Augment an target Object or Array by intercepting
 * the prototype chain using __proto__
 */
function protoAugment (target, src: Object, keys: any) {
  target.__proto__ = src
}

/**
 * Augment an target Object or Array by defining
 * hidden properties.
 */
/* istanbul ignore next */
function copyAugment (target: Object, src: Object, keys: Array<string>) {
  for (let i = 0, l = keys.length; i < l; i++) {
    const key = keys[i]
    def(target, key, src[key])
  }
}

当拦截器生效后,如果数组发生变化,就可以被侦测到了。

以上就是如何让对象,和数组的变化可被侦测。数据仅仅被侦测还远远不够,下面来讲依赖的搜集。

数据的依赖收集

1、对象的依赖收集

依赖收集:视图中用到了哪个数据,视图就依赖哪个数据,把变化的数据收集起来,这个过程就是依赖的收集。

在哪里收集依赖:可观测的数据在getter中被获取,所以getter是收集依赖的场所。

何时通知依赖更新:数据变化在setter中可被观测,自然,通知依赖更新是在setter中。

依赖应该被搜集在哪里?且往下看:

因为更新的数据大小,我们无法控制,所以,对于依赖的收集,我们需要一个依赖管理器:

// 源码位置:src/core/observer/dep.js
export default class Dep {
    constructor () {
        this.subs = []
    }

    addSub (sub) {
        this.subs.push(sub)
    }
    // 删除一个依赖
    removeSub (sub) {
        remove(this.subs, sub)
    }
    // 添加一个依赖
    depend () {
        if (window.target) {
            this.addSub(window.target)
        }
    }
    // 通知所有依赖更新
    notify () {
        const subs = this.subs.slice()
        for (let i = 0, l = subs.length; i < l; i++) {
            subs[i].update()
        }
    }
}

/**
 * Remove an item from an array
 */
export function remove (arr, item) {
    if (arr.length) {
        const index = arr.indexOf(item)
        if (index > -1) {
            return arr.splice(index, 1)
        }
    }
}

有了依赖管理器,我们就可以在getter中收集依赖,在setter中通知依赖更新了。

function defineReactive (obj,key,val) {
    if (arguments.length === 2) {
         val = obj[key]
    }
    if(typeof val === 'object'){
        new Observer(val)
    }
    const dep = new Dep()  //实例化一个依赖管理器,生成一个依赖管理数组dep
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get(){
            dep.depend()    // 在getter中收集依赖
            return val;
        },
        set(newVal){
            if(val === newVal){
            return
        }
        val = newVal;
        dep.notify()   // 在setter中通知依赖更新
     }
  })
}

getter中调用了dep.depend()方法收集依赖,在setter中调用dep.notify()方法通知所有依赖更新。

其实在vue中实现了一个为每一个变化的依赖数据的watcher类,在之后数据变化时,我们不直接去通知依赖更新,而是通知依赖对应的Watch实例,由Watcher实例去通知真正的视图。

export default class Watcher {
  constructor (vm,expOrFn,cb) {
    this.vm = vm;
    this.cb = cb;
    this.getter = parsePath(expOrFn)
    this.value = this.get()
  }
  get () {
    window.target = this;
    const vm = this.vm
    let value = this.getter.call(vm, vm)
    window.target = undefined;
    return value
  }
  update () {
    const oldValue = this.value
    this.value = this.get()
    this.cb.call(this.vm, this.value, oldValue)
  }
}

/**
 * Parse simple path.
 * 把一个形如'data.a.b.c'的字符串路径所表示的值,从真实的data对象中取出来
 * 例如:
 * data = {a:{b:{c:2}}}
 * parsePath('a.b.c')(data)  // 2
 */
const bailRE = /[^\w.$]/
export function parsePath (path) {
  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
  }
}

分析:

  • 当实例化watch的时候,先执行构造函数;
  • 在构造函数中调用this.get()实例方法;
  • 在get()方法中,先通过通过window.target = this 把实例自身赋给全局的一个唯一对象window.target上,然后通过let value = this.getter.call(vm, vm)获取一下被依赖的数据,获取被依赖数据的目的是触发该数据上面的getter,上文我们说过,在getter里会调用dep.depend()收集依赖,而在dep.depend()中取到挂载window.target上的值并将其存入依赖数组中,在get()方法最后将window.target释放掉。
  • 而当数据变化时,会触发数据的setter,在setter中调用了dep.notify()方法,在dep.notify()方法中,遍历所有依赖(即watcher实例),执行依赖的update()方法,也就是Watcher类中的update()实例方法,在update()方法中调用数据变化的更新回调函数,从而更新视图。

简单总结一下就是:Watcher先把自己设置到全局唯一的指定位置(window.target),然后读取数据。因为读取了数据,所以会触发这个数据的getter。接着,在getter中就会从全局唯一的那个位置读取当前正在读取数据的Watcher,并把这个watcher收集到Dep中去。收集好之后,当数据发生变化时,会向Dep中的每个Watcher发送通知。通过这样的方式,Watcher可以主动去订阅任意一个数据的变化。为了便于理解,我们画出了其关系流程图,如下图:

Vue数据双向绑定(响应式)原理之别再说发布者-订阅者模式

以上,就彻底完成了对Object数据的侦测,依赖收集,依赖的更新等所有操作。

2、数组的依赖收集

对于数组,其实在依赖收集有个和对象大同小意的方法。

数组的依赖的收集是在observer类中:

// 源码位置:/src/core/observer/index.js
export class Observer {
  constructor (value) {
    this.value = value
    this.dep = new Dep()    // 实例化一个依赖管理器,用来收集数组依赖
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
    } else {
      this.walk(value)
    }
  }
}

这样我们也在observer中实现了一个依赖管理器。

所以我们可以看看数组的依赖到底是如何收集的,直接上代码:

function defineReactive (obj,key,val) {
  let childOb = observe(val)
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get(){
      if (childOb) {
        childOb.dep.depend()
      }
      return val;
    },
    set(newVal){
      if(val === newVal){
        return
      }
      val = newVal;
      dep.notify()   // 在setter中通知依赖更新
    }
  })
}

/**
 * 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.
 * 尝试为value创建一个0bserver实例,如果创建成功,直接返回新创建的Observer实例。
 * 如果 Value 已经存在一个Observer实例,则直接返回它
 */
export function observe (value, asRootData){
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else {
    ob = new Observer(value)
  }
  return ob
}

observe函数内部,先判断当前传入的数据上是否有__ob__属性,因为在上篇文章中说了,如果数据有__ob__属性,表示它已经被转化成响应式的了,如果没有则表示该数据还不是响应式的,那么就调用new Observer(value)将其转化成响应式的,并把数据对应的Observer实例返回。而在defineReactive函数中,首先获取数据对应的Observer实例childOb,然后在getter中调用Observer实例上依赖管理器,从而将依赖收集起来。

这样依赖通知依赖更新就显的非常容易了。

methodsToPatch.forEach(function (method) {
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    // notify change
    ob.dep.notify()
    return result
  })
})

到此,基本实现了数组的依赖的收集,但是这还没有完。数组不是一层,也许是多层,所以需要一个深度侦测:

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

  constructor (value: any) {
    this.value = value
    this.dep = new Dep()
    def(value, '__ob__', this)
    if (Array.isArray(value)) {
      const augment = hasProto
        ? protoAugment
        : copyAugment
      augment(value, arrayMethods, arrayKeys)
      this.observeArray(value)   // 将数组中的所有元素都转化为可被侦测的响应式
    } else {
      this.walk(value)
    }
  }

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

export function observe (value, asRootData){
  if (!isObject(value) || value instanceof VNode) {
    return
  }
  let ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else {
    ob = new Observer(value)
  }
  return ob
}

数组新增元素的侦测

methodsToPatch.forEach(function (method) {
  // cache original method
  const original = arrayProto[method]
  def(arrayMethods, method, function mutator (...args) {
    const result = original.apply(this, args)
    const ob = this.__ob__
    let inserted
    switch (method) {
      case 'push':
      case 'unshift':
        inserted = args   // 如果是push或unshift方法,那么传入参数就是新增的元素
        break
      case 'splice':
        inserted = args.slice(2) // 如果是splice方法,那么传入参数列表中下标为2的就是新增的元素
        break
    }
    if (inserted) ob.observeArray(inserted) // 调用observe函数将新增的元素转化成响应式
    // notify change
    ob.dep.notify()
    return result
  })
})

总体的vue数据的响应式原理,就是这样,对象无法监听,对象属性的增加或者减少,以及数组无法监听通过数组下标改变,所以vue添加了Vue.set()和Vue.delete方法,来处理。

以上就是所有的响应式原理,或者是数据双向绑定的原理,以后在聊到这个问题的时候,请别再张口就来订阅者-发布者模式之类的话了。