当前位置：首页 > article >正文

根据源码解析Vue2中对于对象的变化侦测

article 2024/9/25 17:01:33

UI = render(state)

VUE的特点是数据驱动视图，在这里可以把数据理解为状态，而视图就是用户可以看到的页面，页面是动态变化的，而他的变化或是用户操作引起，或是后端数据变化引起，这些都可以说是数据的状态变了，导致页面随之变化。

把顶部公式拆为三部分：UI、render、state。state和UI都是用户定的，不变的是render，所以VUE就担任了这个角色，当VUE发现state变化后，就通过一系列操作，把他反应在了UI上。

那么VUE是如何发现state变化的？引出了VUE的变化侦测：

JS为我们提供了object.defineProperty()方法，通过此方法我们可以知道数据什么时候发生了变化。

1.Object数据变得可观测

数据每次读写能够被我们看到，我们能知道数据什么时候发生了变化，将其称为数据的可观测。通过使用上述对象方法，可以实现。如下

let person = {}
let nameval = 'lwh'
Object.defineProperty(person,name,{
    get() {
        console.log('name被读取了')
        return nameval
    }
    set(newval) {
        console.log('name被修改了')
        nameval = newval
}
})

通过Object.defineProperty()方法定义了person的Name属性，并把这个属性的读写分别使用get和set方法进行拦截，每当该属性进行读或写操作时候就会触发这两个方法，意味着person的数据对象已经是可观测的了

但是为了将此对象的所有属性都变得可观测，可以编写以下代码：

export class Observe {
    constructor(value) {
        this.value = value
        //给value新增一个__ob__属性，值为该value的observe实例
        //相当于给value打上标记，表示他已经转化为响应式了
        def(value,'__ob__',this)
        if (Array.isArray(value)) {
        //为数组的逻辑
        } else {
            this.walk(value)
        }
    }
    
    walk(obj: Object) {
        const keys = Object.keys(obj)
        for (let i = 0; i < keys.length; i++) {
            defineReactive(obj,key[i])
        }
    }
}

function defineReactive(obj, key, val) {
    if(typeof val === 'object') {
    new Observable(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
        }
    })
}

上面的代码中，我们定义了observe类，用来将一个普通的Object转化为可观测的object。并且给value新增一个ob属性，表示这个已经被转化成响应式了。

然后判断数据类型，只有Object 类型才会调用walk方法将每一个属性都转换成getter/setter形式来侦测变化，最后在defineReactive中当传入的属性值还是一个object时使用new observe(val)来递归子属性，这样我们就可以把obj中所有属性都变为可观测型的，只要将object传入observe中，那么这个object就会变成可观测，响应式的Object.

observer类位于Vue2源码的src/core/observer/index.ts中。

2.依赖收集

当Object变得可观测后，我们就能知道数据什么时候发生了变化，发生了什么变化，这样就可以通知视图更新。但是问题来了，我们怎么知道哪些视图需要更新？总不能一个数据变化全部视图全部更新一次吧。所以，应该是视图里哪个使用到了这个数据的就更新。

视图里谁用到了这个数据谁更新，说官方一点就是谁依赖了这个数据谁更新。我们建立一个依赖数组（因为一个数据可能被多个地方使用，所以需要建立数组），谁依赖了这个数据就把谁放进这个数组。当数据变化时，就根据它的依赖数组去通知哪些视图需要更新。这个过程就是依赖收集。

那么我们该如何进行依赖收集，如何知道哪些依赖这个数据？

谁用了这个数据，那么当这个数据变化时就通知谁，所谓谁用了这个数据，就是谁获取了这个数据。根据上文可观测数据在被获取时会调用get方法，那么我们就可以在get中收集这个依赖。同样，数据变化会触发Set,所以，我们就在set中通知更新。

所以，我们应该给每个数据都配置一个依赖数组，谁依赖了它就放入谁。不过，单单使用数组的话，功能可能有点欠缺且代码有点耦合。所以拓展一下的话，我们给每一个数据建立一个类，用作依赖管理。所以在vue2源码中有了这个依赖管理器Dep类，代码如下：

// 源码位置：src/core/observer/dep.ts    
export default class Dep {
  constructor () {
    this.subs = []
  }
  
  addSub (sub) {
    this.subs.push(sub)
  }
  // 删除一个依赖
  removeSub (sub) {
    remove(this.subs, sub)
  }
  // 添加一个依赖
  depend () {
    if (window.target) {
      this.addDep(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)
    }
  }
}

在上面依赖管理器中，初始化了一个sub数组用来存放依赖，并且定义了几个附加方法。

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

function defineReactive (obj,key,val) {
  if(typeof val === 'object'){
    new Observable(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中通知依赖更新
    }
  })
}

接下来需要知道的是，我们收集的依赖到底是谁？

谁用到了这个数据谁就是依赖，那代码上该如何描述这个谁呢？

在Vue中还实现了一个叫做Watcher的类，这个类的实例就是我们上面说的那个谁。换句话说，谁用到了数据，我们就为谁创建一个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, 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
  }
}

分析代码：

1.实例化Watcher类时，会先执行其构造函数；

2.在构造函数中调用了this.get()实例方法；

3.在get()方法中，首先通过window.target = this 把实例自身赋给了全局的一个唯一对象window.target上，然后通过let value = this.getter.call(vm,vm)获取一下被依赖的数据，这里的目的是触发该数据的getter，在上文说过，调用getter会随之调用dep.depend()方法收集依赖，而在dep.depend()上取到挂载到window.target的值并将其存到依赖数组中，在get()方法最后需要将window.target释放掉

4.当数据变化时，会触发setter，在其中执行了dep.notify()方法，在这个方法中，遍历所有的依赖（即watcher实例），执行依赖的update()方法，在方法中调用数据变化的更新回调函数，从而更新视图。

3.不足之处

通过defineProperty方法实现了对Object数据的观测，但是这个方法仅仅只能观测到其中数据及设置值，如果向Object中添加或删除值时，他是无法观察到的，导致添加或者删除值时，无法通知依赖，无法驱动视图更新。vue也注意到了这一点，所以为了解决这个问题，vue添加了两个全局api：$set $delete，在后面学习全局API时会说到。