响应式系统及Watcher的调度实现

背景

鉴于目前 vue3 还没有正式发布&＃xff0c;而且 vue2 里面的一些实现思想还是很有参考价值的&＃xff0c;于是这篇原理性讲解还是 vue2 的&＃xff0c;希望对你有启发&＃xff5e;

响应式系统实现

Vue.js 是一款 MVVM 框架&＃xff0c;数据模型仅仅是普通的 Javascript 对象&＃xff0c;但是对这些对象进行操作时&＃xff0c;却能影响对应视图&＃xff0c;它的核心实现就是「响应式系统」。

vue 2.0中&＃xff0c;是基于 Object.defineProperty实现的「响应式系统」。vue3 中是基于 Proxy/Reflect 来实现的&＃xff0c;vue3的详细解析有时间再写了&＃xff0c;本文讲的是vue2 的实现。

主要涉及属性&＃xff1a;

• enumerable&＃xff0c;属性是否可枚举&＃xff0c;默认 false。

• configurable&＃xff0c;属性是否可以被修改或者删除&＃xff0c;默认 false。

• get&＃xff0c;获取属性的方法。

• set&＃xff0c;设置属性的方法。

响应式基本原理就是&＃xff0c;在 Vue 的构造函数中&＃xff0c;对 options 的 data 进行处理。即在初始化vue实例的时候&＃xff0c;对data、props等对象的每一个属性都通过Object.defineProperty定义一次&＃xff0c;在数据被set的时候&＃xff0c;做一些操作&＃xff0c;改变相应的视图。

class Vue {/* Vue构造类 */constructor(options) {this._data &＃61; options.data;observer(this._data);}
}
function observer (value) {if (!value || (typeof value !&＃61;&＃61; &＃39;object&＃39;)) {return;}Object.keys(value).forEach((key) &＃61;> {defineReactive(value, key, value[key]);});
}
function defineReactive (obj, key, val) {Object.defineProperty(obj, key, {enumerable: true, /* 属性可枚举 */configurable: true, /* 属性可被修改或删除 */get: function reactiveGetter () {return val;},set: function reactiveSetter (newVal) {if (newVal &＃61;&＃61;&＃61; val) return;cb(newVal);}});
}


实际应用中&＃xff0c;各种系统复杂无比。假设我们现在有一个全局的对象&＃xff0c;我们可能会在多个 Vue 对象中用到它进行展示。又或者写在data中的数据并没有应用到视图中呢&＃xff0c;这个时候去更新视图就是多余的了。这就需要依赖收集的过程。

依赖收集

所谓依赖收集&＃xff0c;就是把一个数据用到的地方收集起来&＃xff0c;在这个数据发生改变的时候&＃xff0c;统一去通知各个地方做对应的操作。“订阅者”在VUE中基本模式如下&＃xff1a;

exportdefaultclass Dep {static target: ?Watcher;id: number;subs: Array;constructor () {this.id &＃61; uid&＃43;&＃43;this.subs &＃61; []}addSub (sub: Watcher) {this.subs.push(sub)}removeSub (sub: Watcher) {remove(this.subs, sub)}//依赖收集&＃xff0c;有需要才添加订阅depend () {if (Dep.target) {Dep.target.addDep(this)}}notify () {// stabilize the subscriber list firstconst subs &＃61; this.subs.slice()for (let i &＃61; 0, l &＃61; subs.length; i }


有了订阅者&＃xff0c;再来看看Watcher的实现。源码Watcher比较多逻辑&＃xff0c;简化后的模型如下

class Watcher{constructor(vm,expOrFn,cb,options){//传进来的对象 例如Vuethis.vm &＃61; vm//在Vue中cb是更新视图的核心&＃xff0c;调用diff并更新视图的过程this.cb &＃61; cb//收集Deps&＃xff0c;用于移除监听this.newDeps &＃61; []this.getter &＃61; expOrFn//设置Dep.target的值&＃xff0c;依赖收集时的watcher对象this.value &＃61;this.get()}get(){//设置Dep.target值&＃xff0c;用以依赖收集pushTarget(this)const vm &＃61; this.vmlet value &＃61; this.getter.call(vm, vm)return value}//添加依赖addDep (dep) {// 这里简单处理&＃xff0c;在Vue中做了重复筛选&＃xff0c;即依赖只收集一次&＃xff0c;不重复收集依赖this.newDeps.push(dep)dep.addSub(this)}//更新update () {this.run()}//更新视图run(){//这里只做简单的console.log 处理&＃xff0c;在Vue中会调用diff过程从而更新视图console.log(&＃96;这里会去执行Vue的diff相关方法&＃xff0c;进而更新数据&＃96;)}
}


defineReactive详细逻辑

exportfunction defineReactive (obj: Object,key: string,val: any,customSetter?: ?Function,shallow?: boolean
) {const dep &＃61; new Dep()const property &＃61; Object.getOwnPropertyDescriptor(obj, key)if (property && property.configurable &＃61;&＃61;&＃61; false) {return}// cater for pre-defined getter/settersconst getter &＃61; property && property.getconst setter &＃61; property && property.setif ((!getter || setter) && arguments.length &＃61;&＃61;&＃61; 2) {val &＃61; obj[key]}let childOb &＃61; !shallow && observe(val)Object.defineProperty(obj, key, {enumerable: true,configurable: true,get: function reactiveGetter () {const value &＃61; getter ? getter.call(obj) : valif (Dep.target) {dep.depend()if (childOb) {childOb.dep.depend()if (Array.isArray(value)) {dependArray(value)}}}return value},set: function reactiveSetter (newVal) {const value &＃61; getter ? getter.call(obj) : val/* eslint-disable no-self-compare */if (newVal &＃61;&＃61;&＃61; value || (newVal !&＃61;&＃61; newVal && value !&＃61;&＃61; value)) {return}/* eslint-enable no-self-compare */if (process.env.NODE_ENV !&＃61;&＃61; &＃39;production&＃39; && customSetter) {customSetter()}if (setter) {setter.call(obj, newVal)} else {val &＃61; newVal}childOb &＃61; !shallow && observe(newVal)dep.notify()}})
}


所以响应式原理就是&＃xff0c;我们通过递归遍历&＃xff0c;把vue实例中data里面定义的数据&＃xff0c;用defineReactive&＃xff08;Object.defineProperty&＃xff09;重新定义。每个数据内新建一个Dep实例&＃xff0c;闭包中包含了这个 Dep 类的实例&＃xff0c;用来收集 Watcher 对象。在对象被「读」的时候&＃xff0c;会触发 reactiveGetter 函数把当前的 Watcher 对象&＃xff08;存放在 Dep.target 中&＃xff09;收集到 Dep 类中去。之后如果当该对象被「写」的时候&＃xff0c;则会触发 reactiveSetter 方法&＃xff0c;通知 Dep 类调用 notify 来触发所有 Watcher 对象的 update 方法更新对应视图。

Watcher的产生

在vue中&＃xff0c;共有4种情况会产生Watcher&＃xff1a;

1. Vue实例对象上的watcher,观测根数据&＃xff0c;发生变化时重新渲染组件 updateComponent &＃61; () &＃61;> {  vm._update(vm._render(), hydrating)} vm._watcher &＃61; new Watcher(vm, updateComponent, noop)

2. 用户在vue对象内用watch属性创建的watcher

3. 用户在vue对象内创建的计算属性&＃xff0c;本质上也是watcher

4. 用户使用vm.$watch创建的watcher

Wathcer会增减&＃xff0c;也可能在render的时候新增。所以&＃xff0c;必须有一个Schedule来进行Watcher的调度。部分主要代码如下&＃xff1a;

queue.sort((a, b) &＃61;> a.id - b.id)// do not cache length because more watchers might be pushed// as we run existing watchersfor (index &＃61; 0; index MAX_UPDATE_COUNT) {warn(&＃39;You may have an infinite update loop &＃39; &＃43; (watcher.user? &＃96;in watcher with expression "${watcher.expression}"&＃96;: &＃96;in a component render function.&＃96;),watcher.vm)break}}}


Schedule 调度的作用&＃xff1a;

1. 去重&＃xff0c;每个Watcher有一个唯一的id。首先&＃xff0c;如果id已经在队列里了&＃xff0c;跳过&＃xff0c;没必要重复执行&＃xff0c;如果id不在队列里&＃xff0c;要看队列是否正在执行中。如果不在执行中&＃xff0c;则在下一个时间片执行队列&＃xff0c;因此队列永远是异步执行的。

2. 排序&＃xff0c;按解析渲染的先后顺序执行&＃xff0c;即Watcher小的先执行。Watcher里面的id是自增的&＃xff0c;先创建的id比后创建的id小。所以会有如下规律&＃xff1a;

2.1、组件是允许嵌套的&＃xff0c;而且解析必然是先解析了父组件再到子组件。所以父组件的id比子组件小。

2.2、用户创建的Watcher会比render时候创建的先解析。所以用户创建的Watcher的id比render时候创建的小。

1. 删除Watcher&＃xff0c;如果一个组件的Watcher在队列中&＃xff0c;而他的父组件被删除了&＃xff0c;这个时候也要删掉这个Watcher。

2. 队列执行过程中&＃xff0c;存一个对象circular&＃xff0c;里面有每个watcher的执行次数&＃xff0c;如果哪个watcher执行超过MAX_UPDATE_COUNT定义的次数就认为是死循环&＃xff0c;不再执行&＃xff0c;默认是100次。

总之&＃xff0c;调用的作用就是管理 Watcher。

补充

VUE2中是如何用Object.defineProperty给数组对象重新定义的呢&＃xff0c;为什么我们直接修改数据中某项&＃xff08;arr[3] &＃61; 4&＃xff09;的时候&＃xff0c;视图并没有响应式地变化呢。

答案是数组的响应式是不够完全的&＃xff0c;VUE只重写了有限的方法。重写逻辑如下&＃xff1a;

const arrayProto &＃61; Array.prototype
exportconst arrayMethods &＃61; Object.create(arrayProto)const methodsToPatch &＃61; [&＃39;push&＃39;,&＃39;pop&＃39;,&＃39;shift&＃39;,&＃39;unshift&＃39;,&＃39;splice&＃39;,&＃39;sort&＃39;,&＃39;reverse&＃39;
]/*** Intercept mutating methods and emit events*/
methodsToPatch.forEach(function (method) {// cache original methodconst original &＃61; arrayProto[method]def(arrayMethods, method, function mutator (...args) {const result &＃61; original.apply(this, args)const ob &＃61; this.__ob__let insertedswitch (method) {case&＃39;push&＃39;:case&＃39;unshift&＃39;:inserted &＃61; argsbreakcase&＃39;splice&＃39;:inserted &＃61; args.slice(2)break}if (inserted) ob.observeArray(inserted)// notify changeob.dep.notify()return result})
})