乐趣区

关于javascript:深入了解-vue-响应式原理

jiezi

1 概述

vue 的响应式原理次要基于：数据劫持、依赖收集和异步更新，通过对象劫持来做 依赖的收集 和 数据变动的侦测，通过维持一个队列来异步更新视图。

1.2 什么是对象劫持？

在 JavaScript 中，对象作为一种 key/value 键值对的模式存在，而对对象的根本会有 增、删、改、查 的基本操作：

const dog = {
  name: 'dog',
  single: false,
  girlFriend: 'charm',
  house: 'villa'
}
delete dog.house
dog.single = true
dog.character = 'easy'
delete dog.girlFriend
console.log(dog.name)

而咱们说的对象劫持，就是心愿劫持这些对对象的操作方法，那么先来看看

1.3 怎么劫持？

次要是通过 Object.defineProperty 办法来实现。举个小例子：“如果一个穷小子，有房子就有女朋友，房子没了，那么女朋友也就没了”

const dog = {
  name: 'dog',
  single: true,
  girlFriend: null
}
_house = null
Object.defineProperty(dog, 'house', {
  configurable: true,
  get: () => _house,
  set: (house) => {if (house) {
      _house = house
      dog.girlFriend = 'charm'
      dog.single = false
    } else {
      _house = ''
      dog.girlFriend = null
      dog.single = true
    }
  }
})
dog.house = 'villa'
// {
//   name: 'dog',
//   single: false,
//   girlFriend: 'charm'
// }
dog.house = null
// {
//   name: 'dog',
//   single: true,
//   girlFriend: null
// }

1.4 为什么要劫持？

从下面数据劫持的例子能够看出，通过数据劫持，能够通过拦挡某个属性的批改操作，进而去解决这个扭转应该触发的其余值、状态的更新。这个就非常适合解决：数据驱动视图更新。

2 深刻

2.1 Object.defineProperty 的局限

2.1.1 不能检测新增、删除属性操作

Object.defineProperty 无奈做到新增属性的拦挡：

const dog = {}
dog.name = 'dog'

vue 官网中也提到:

Vue 无奈检测 property 的增加或移除。因为 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在能力让 Vue 将它转换为响应式的。例如：

var vm = new Vue({data: () => ({a: 1})
})
// `vm.a` 是响应式的
vm.b = 2
// `vm.b` 是非响应式的

因为无奈劫持到 b 这个新增属性，所以即便视图中曾经援用了 b，视图也不会进行响应式的批改。Vue 组件实例中提供了 Vue.set 办法来解决对象新增属性的问题。

Object.defineProperty 无奈感知到已有属性的删除：

const dog = {}
Object.defineProperty(dog, 'name', {
  configurable: true,
  get () { return 'dog'},
  set (value) {console.log(value) }
})
console.log(dog.name) // 'dog'
delete dog.name
console.log(dog.name) // undefined

defineProperty 的 set 描述符并不能劫持到 delete 操作。所以在 vue 中，会专门提供一个 Vue.delete 办法来删除一个属性。

2.1.2 不能检测数组 

const dogs = []
Object.defineProperty(dogs, 0, {
  configurable: true,
  get: () => 'easy',
  set: console.log
})
Object.defineProperty(dogs, 1, {
  configurable: true,
  get: () => 'poor',
  set: console.log
})
dogs.length // 2
dogs[0] // 'easy'
dogs[1] // 'poor'

看起来通过 Object.defineProperty 配置的数组元素体现失常，那么试一试操作数组的办法：

dogs.push('newdog') // ['easy', 'poor', 'newdogs']
dogs.unshift('newdog2')
// easy
// newdog2
// 4
// ['easy', 'poor', 'poor', 'newdogs']

从这个打印输出来看 push 办法没有问题，然而 unshift 办法却不合乎预期；unshift 办法的外部应该是首先将第一个元素赋值给第二，第二个赋值给第三个，以此类推，而后将 newdog2 复制给第一个元素。不过这从原理上说得通的，毕竟咱们只是对 index 为 0 和 1 的属性做拦挡。

2.1.3. 留神应用 Object.assign

MDN 官网上提到 Object.assign 办法在执行的时候，仅仅调用属性的 getter、setter 办法，所以在执行过程中，属性描述符会失落：

const dog = {}
Object.defineProperty(dog, 'name', {
  configurable: true,
  enumerable: true,
  get () {return 'dog'},
  set (value) {console.log(value)
  }
})
const dogBackup = Object.assign({}, dog) // {name: 'dog'}
dogBackup.name = 'dogBackup' // {name: 'dogBackup'}

2.2 降级计划 Proxy

Proxy 用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）；上述 Object.defineProperty 的局限都能够通过 Proxy 来解决：

2.2.1 拦挡对象的基本操作 

const dog = {
  name: 'dog',
  single: true,
  girlFriend: null,
  house: null
}
const proxyDog = new Proxy(dog, {get (target, prop, receiver) {
    // 拦挡查找操作
    return Reflect.get(target, prop, receiver)
  },
  set (target, prop, value, receiver) {
    // 拦挡新增属性
        if (!Reflect.has(target, prop)) {throw TypeError('Unknown type' + prop)
    }
    // 拦挡赋值操作
    if (prop === 'house') {if (value) {Reflect.set(target, 'girlFriend', 'charm', receiver)
        Reflect.set(target, 'single', false, receiver)
      } else {Reflect.set(target, 'girlFriend', null, receiver)
        Reflect.set(target, 'single', true, receiver)
      }
    }
    return Reflect.set(target, prop, value, receiver)
  },
  deleteProperty (target, prop) {
    // 拦挡删除操作
    if (prop === 'house') {Reflect.set(target, 'girlFriend', null)
      Reflect.set(target, 'single', true)
    }
        return Reflect.deleteProperty(target, prop)
  }
})

2.2.2 拦挡数组原型上的办法 

const dogs = []
var proxyDog = new Proxy(dogs, {apply (targetFun, ctx, args) {
    // 拦挡办法调用
    return Reflect.apply(targetFun, ctx, args)
  }
})
proxyDog.push('easy')

2.3 响应式原理 – Object.defineProperty 在 Vue2 中的使用

了解 Vue2 的响应式原理，能够从三个角度：变动侦测机制、收集依赖、异步更新 来探索:

2.3.1 变动侦测机制 – 数据劫持

在实例化 vue 组件的时候，就会对组件的 props、data 进行 defineReactive，这个办法是对 Object.defineProperty 的封装，次要做很外围的几件事件：

  1. 实例化一个依赖治理类 Dep

这是很重要的一点，对象的每个属性都会实例化一个 Dep 类，通过这个类来收集依赖，以及告诉更新

  1. 通过 Object.defineProperty 劫持 getter，收集依赖 
Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: function reactiveGetter () {const value = getter ? getter.call(obj) : val
    if (Dep.target) {dep.depend()
      if (childOb) {childOb.dep.depend()
        if (Array.isArray(value)) {dependArray(value)
        }
      }
    }
    return value
  }
})

这里问题就来了，咱们失常取值 data.name 或者 this.name，会触发 reactiveGetter，然而这时候 Dep.target 必定是不存在的，只有当 Dep.target 存在的时候才进行依赖收集：dep.depend()。那么什么时候 Dep.target 才存在呢？dep.depend() 办法做了些什么？

  1. 通过 Object.defineProperty 劫持 setter，告诉依赖更新 
Object.defineProperty({set: function reactiveSetter (newVal) {const value = getter ? getter.call(obj) : val
        // 判断是否须要更新
    if (newVal === value || (newVal !== newVal && value !== value)) {return}
    /* eslint-enable no-self-compare */
    if (process.env.NODE_ENV !== 'production' && customSetter) {customSetter()
    }
    // #7981: for accessor properties without setter
    if (getter && !setter) return
    if (setter) {setter.call(obj, newVal)
    } else {val = newVal}
    childOb = !shallow && observe(newVal)
    // 告诉更新
    dep.notify()}
})

reactiveSetter 所做的事件就比较简单，次要做了两件事：1. 判断值是否发生变化；2. 告诉依赖更新

2.3.2 收集依赖

在收集依赖的过程中，提出了两个问题：

问题 1：Dep.target 什么时候存在？

首先 target 的类型是一个 Watcher 实例，在一个 vue 组件实例化的时候，会创立一个渲染 watcher，渲染 watcher 是一个非惰性 watcher，实例化的的时候会立刻将 Dep.target 设置成本人；

而在模版编译的时候，即 vm._render 函数执行，通过 with 的形式定义作用域为以后的组件：

with(this){return ${code}}

with 语法通常在模版引擎应用，这样在模版编译的时候拜访变量时的作用域，都是 with 指定的作用域，这样就能够触发对象属性的 getter 办法了。

Dep.target 存在的条件能够认为是：须要数据来驱动更新；这在 Vue 中体现在：

  1. 视图渲染
  2. 计算属性
  3. $watch 办法

问题 2：dep.depend 办法做了什么事件？

在对象属性的 getter 触发时，调用 dep.depend() 办法：

class Dep {depend () {if (Dep.target) {Dep.target.addDep(this)
    }
  }
}

2.3.3 异步更新

记得我刚开始接触 Vue 的时候，有人问我：vue 数据驱动视图更新是同步的还是异步的？如果是异步，怎么实现的？

很显然应该是异步的，在一个事件循环中屡次执行数据更新操作，最终 dom 应该只须要渲染一次即可 

<template>
    <div>index</div>
</template>
<script>
export default {data () {return { index: 0} },
  mounted () {for (let i=0; i<100; i++) {this.index = i}
  }
}
</script>

在数据更新时会触发 dep.notify，这会将 watcher 放入队列期待下一次事件循环 

// observer/index.js
function defineReactive () {
  // ...
  Object.defineProperty({set () {
      // ...
      dep.notify()}
  })
}
// dep.js
class Dep {notify () {
    // stabilize the subscriber list first
    const subs = this.subs.slice()
    if (process.env.NODE_ENV !== 'production' && !config.async) {
      // subs aren't sorted in scheduler if not running async
      // we need to sort them now to make sure they fire in correct
      // order
      subs.sort((a, b) => a.id - b.id)
    }
    for (let i = 0, l = subs.length; i < l; i++) {subs[i].update()}
  }
}
// watcher.js
class Watcher {
  // ...
  update () {
    /* istanbul ignore else */
    if (this.lazy) {this.dirty = true} else if (this.sync) {this.run()
    } else {queueWatcher(this)
    }
  }
}

queueWatcher 会将以后 watcher push 到更新队列中，而后开始异步更新，以及更新后调触发响应的生命周期事件 

function queueWatcher (watcher) {nextTick(flushSchedulerQueue)
}
function flushSchedulerQueue () {for (index = 0; index < queue.length; index++) {watcher = queue[index]
       watcher.run()
    // ...
        const vm = watcher.vm
    if (vm._watcher === watcher && vm._isMounted && !vm._isDestroyed) {callHook(vm, 'updated')
    }
  }
}

3 Proxy 在 Vue3 中的使用

// TODO

退出移动版