vue 实战 - 深入响应式数据原理

import { initMixin } from "./init.js";
// 先创建一个Vue类，Vue就是一个构造函数（类） 通过new关键字进行实例化function Vue(options) {  // 这里开始进行Vue初始化工作  this._init(options);}// _init方法是挂载在Vue原型的方法，每一个new 实例可以调用， 由initMixin方法挂载
// 将不同的操作拆分成不同的模块，导入后对Vue类做一些处理，此做法更利于维护initMixin(Vue); // 定义原型方法_initstateMixin(Vue)  //定义 $set $get $delete $watch 等eventsMixin(Vue) // 定义事件  $on  $once $off $emitlifecycleMixin(Vue) // 定义 _update  $forceUpdate  $destroyrenderMixin(Vue) // 定义 _render 返回虚拟dom 
export default Vue;

import { initState } from "./state";
export function initMixin(Vue) {  Vue.prototype._init = function (options) {    const vm = this; // 这里的this指向调用_init方法的对象(即 new的实例)    //  this.$options就是用户new Vue的时候传入的属性    vm.$options = options;    ...    initLifecycle(vm);    initEvents(vm);    initRender(vm);    callHook(vm, 'beforeCreate');    initInjections(vm); // resolve injections before data/props    // 初始化状态，在beforeCreate之前，created之后    initState(vm);    initProvide(vm); // resolve provide after data/props    callHook(vm, 'created');    ...
  };}

import { observe } from "./observer/index.js";
function initState (vm) {    vm._watchers = [];    const opts = vm.$options;      // 按顺序初始化 prop>methods>data>computed>watch    if (opts.props) { initProps(vm, opts.props); }     if (opts.methods) { initMethods(vm, opts.methods); }    if (opts.data) { // 初始化data      initData(vm);    } else {      observe(vm._data = {}, true /* asRootData */);    }    if (opts.computed) { initComputed(vm, opts.computed); }    if (opts.watch && opts.watch !== nativeWatch) {      initWatch(vm, opts.watch);    }  }

import { observe } from "./observer/index.js";
function initState (vm) {    ...    initData(vm);}
function initData (vm: Component) {  // 获取当前实例的 data   let data = vm.$options.data  // 判断 data 的类型  data = vm._data = typeof data === 'function'    ? getData(data, vm)    : data || {}  if (!isPlainObject(data)) {    data = {}    process.env.NODE_ENV !== 'production' && warn(`数据函数应该返回一个对象`)  }  // 获取当前实例的 data 属性名集合  const keys = Object.keys(data)  // 获取当前实例的 props   const props = vm.$options.props  // 获取当前实例的 methods 对象  const methods = vm.$options.methods  let i = keys.length  while (i--) {    const key = keys[i]    // 非生产环境下判断 methods 里的方法是否存在于 props 中    if (process.env.NODE_ENV !== 'production') {      if (methods && hasOwn(methods, key)) {        warn(`Method 方法不能重复声明`)      }    }    // 非生产环境下判断 data 里的属性是否存在于 props 中    if (props && hasOwn(props, key)) {      process.env.NODE_ENV !== 'production' && warn(`属性不能重复声明`)    } else if (!isReserved(key)) {      // 都不重名的情况下，代理到 vm 上，可以让 vm._data.xx 通过 vm.xx 访问      proxy(vm, `_data`, key)    }  }  // 监听 data  observe(data, true /* asRootData */)}

function proxy (target, sourceKey, key) {    sharedPropertyDefinition.get = function proxyGetter () {      return this[sourceKey][key]    };    sharedPropertyDefinition.set = function proxySetter (val) {      this[sourceKey][key] = val;    };    Object.defineProperty(target, key, sharedPropertyDefinition);  }

export function observe (value: any, asRootData: ?boolean): Observer | void {  // 如果不是'object'类型 或者是 vnode 的对象类型就直接返回  if (!isObject(value) || value instanceof VNode) {    return  }  let ob: Observer | void  // __ob__是监听器对象，如果存在的话说明已经被监听过，避免重复监听  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {    ob = value.__ob__  } else if (    shouldObserve &&    !isServerRendering() &&    (Array.isArray(value) || isPlainObject(value)) &&    Object.isExtensible(value) &&    !value._isVue  ) {    // 创建监听器    ob = new Observer(value)  }  if (asRootData && ob) {    ob.vmCount++  }  return ob}

export class Observer {  value: any;  dep: Dep;  vmCount: number; // 根对象上的 vm 数量  constructor (value: any) {    this.value = value    this.dep = new Dep(); // 预先实例化一个dep，用于保存数组的依赖    this.vmCount = 0    // 给 value 添加 __ob__ 属性，值为为当前value 创建的 Observe 实例    // 表示已经变成响应式了，目的是对象遍历时就直接跳过，避免重复监听    def(value, '__ob__', this)    // 类型判断    if (Array.isArray(value)) {      // 判断数组是否有__proto__      if (hasProto) {        // 如果有就把它的原型设置为arrayMethods，arrayMethods对象拥有变异后的七个数组方法并且原型是原生数组Array的原型        protoAugment(value, arrayMethods); // 原型增强      } else {        // 没有就通过 def，也就是Object.defineProperty 去定义属性值        copyAugment(value, arrayMethods, arrayKeys)      }      this.observeArray(value)    } else {      this.walk(value)    }  }  // 如果是对象类型  walk (obj: Object) {    const keys = Object.keys(obj)    // 遍历对象所有属性，转为响应式对象，也是动态添加 getter 和 setter，实现双向绑定    for (let i = 0; i < keys.length; i++) {      defineReactive(obj, keys[i])    }  }  // 监听数组  observeArray (items: Array<any>) {    // 遍历数组，对每一个元素进行监听    for (let i = 0, l = items.length; i < l; i++) {      observe(items[i])    }  }}

  walk (obj: Object) {    const keys = Object.keys(obj)    // 遍历对象所有属性，转为响应式对象，也是动态添加 getter 和 setter，实现双向绑定    for (let i = 0; i < keys.length; i++) {      defineReactive(obj, keys[i])    }  }

export function defineReactive (  obj: Object,  key: string,  val: any,  customSetter?: ?Function,  shallow?: boolean) {
  // 创建 dep 实例，保存属性的依赖，getter时添加依赖，setter时触发依赖  const dep = new Dep(); 这个是对象的依赖  // 拿到对象的属性描述符  const property = Object.getOwnPropertyDescriptor(obj, key)  if (property && property.configurable === false) {    return  }  // 获取自定义的 getter 和 setter  const getter = property && property.get  const setter = property && property.set  if ((!getter || setter) && arguments.length === 2) {    val = obj[key]  }  // 如果 val 是对象的话就递归监听  // 递归监听子属性，如果value还是一个对象会继续走一遍defineReactive 层层遍历一直到value不是对象才停止，所以如果对象层级过深，对性能会有影响  let childOb = !shallow && observe(val) // data = {a: {b: 3}, c: [1, 2]} 属性值如果是对象或数组会返回Observer实例  // 截持对象属性的 getter 和 setter  Object.defineProperty(obj, key, { // 例如监听data.a，那val就是{b: 3}    enumerable: true,    configurable: true,    // 拦截 getter，当取值时会触发该函数    get: function reactiveGetter () {      const value = getter ? getter.call(obj) : val      // 开始依赖收集 （在get中会收集属性的依赖，以及其属性值的依赖）      // 初始化渲染 watcher 时访问到已经被添加响应式的对象，从而触发 get 函数        if (Dep.target) { // 如果现在处于依赖收集阶段          dep.depend(); // 添加当前属性的依赖          if (childOb) { // 数组会在此收集依赖，在数组被push等操作时调用保存的Observer实例触发依赖；对象会收集两次依赖，但是对象的第二次收集不会被setter触发            // childOb.dep 就是Observer 中 this.dep = new Dep()            childOb.dep.depend(); // 父属性包含子属性，即访问了this.a，实际上也访问了this.a.b，this.a.b变了，this.a就变了，所以子属性也要收集依赖          if (Array.isArray(value)) {            dependArray(value)          }        }      }      return value    },    // 拦截 setter，当值改变时会触发该函数    set: function reactiveSetter (newVal) {      const value = getter ? getter.call(obj) : val      // 判断是否发生变化      if (newVal === value || (newVal !== newVal && value !== value)) {        return      }      if (process.env.NODE_ENV !== 'production' && customSetter) {        customSetter()      }      // 没有 setter 的访问器属性      if (getter && !setter) return      if (setter) {        setter.call(obj, newVal)      } else {        val = newVal      }      // 如果新值是对象的话递归监听      childOb = !shallow && observe(newVal)      // 遍历通知储存在Dep实例中的所有依赖      dep.notify()    }  })}

function defineProperty(obj, key, val){  observer(val);  Object.defineProperty(obj, key, {      enumerable: true,      configurable: true,      get() {        // 读取方法        console.log('读取', key, '成功')        return val      },      set(newval) {        // 赋值监听方法        if (newval === val) return        observer(newval)        console.log('监听赋值成功', newval)        val = newval      }    })}
function observer(obj) {  if (typeof obj !== 'object' || obj == null) {    return  }  for (const key of Object.keys(obj)) {    // 给对象中的每一个方法都设置响应式    defineProperty(obj, key, obj[key])  }}
const arr = [{a:3}, 66, [4,5]];const obj = {a:1, b: [2]};
arr.length = 33; // 无法监听数组长度动态变化arr[2].push(22) // 只能监听通过对已有元素下标的访问进行的修改arr[2][0] = 5; // 访问已有元素的下标可以监听修改
obj.c = 6; // 无法监听新添加的属性delete obj.b // 无法监听属性被删除obj.b = 66; // 被删除后就失去响应式了

import { TriggerOpTypes } from '../../v3'import { def } from '../util/index'
const arrayProto = Array.prototype // 用Array的原型创建一个新对象，arrayMethods.__proto__ === arrayProto，免得污染原生Arrayexport const arrayMethods = Object.create(arrayProto);
// 需要重写的方法const methodsToPatch = [  'push',  'pop',  'shift',  'unshift',  'splice',  'sort',  'reverse']
/** * Intercept mutating methods and emit events */methodsToPatch.forEach(function (method) {  // cache original method  const original = arrayProto[method]  // 给arrayMethods对象定义上述方法，使该对象拥有原生方法能力的同时添加响应式行为  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        break      case 'splice': // 可以监测数组长度变化        //splice格式是splice(下标，数量，插入的新项)        inserted = args.slice(2); // 获取插入的新项        break    }    if (inserted) ob.observeArray(inserted)    // notify change    if (__DEV__) {      ob.dep.notify({        type: TriggerOpTypes.ARRAY_MUTATION,        target: this,        key: method      })    } else {      ob.dep.notify()    }    return result  })})