title: vue源码解析之响应式原理
date: 2020-11-06 18:21:41
tags:

  • vue
  • 源码
    categories: 学习
    copyright: false
    top_img: /img/bg1.png

vue响应式原理的核心代码主要是在：src\core\instance\state.js

  1. export function initState (vm: Component) {
  2.   vm._watchers = []
  3.   const opts = vm.$options
  4.   if (opts.props) initProps(vm, opts.props)
  5.   if (opts.methods) initMethods(vm, opts.methods)
  6.   if (opts.data) {
  7.     initData(vm)
  8.   } else {
  9.     observe(vm._data = {}, true /* asRootData */)
  10.   }
  11.   if (opts.computed) initComputed(vm, opts.computed)
  12.   if (opts.watch && opts.watch !== nativeWatch) {
  13.     initWatch(vm, opts.watch)
  14.   }
  15. }

直截了当的看下initData

initData:

  1. function initData (vm: Component) {
  2.   let data = vm.$options.data
  3.   data = vm._data = typeof data === 'function'
  4.     ? getData(data, vm)
  5.     : data || {}
  6.   if (!isPlainObject(data)) {
  7.     data = {}
  8.     process.env.NODE_ENV !== 'production' && warn(
  9.       'data functions should return an object:\n' +
  10.       'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
  11.       vm
  12.     )
  13.   }
  14.   // proxy data on instance
  15.   const keys = Object.keys(data)
  16.   const props = vm.$options.props
  17.   const methods = vm.$options.methods
  18.   let i = keys.length
  19.   while (i--) {
  20.     const key = keys[i]
  21.     if (process.env.NODE_ENV !== 'production') {
  22.       if (methods && hasOwn(methods, key)) {
  23.         warn(
  24.           `Method "${key}" has already been defined as a data property.`,
  25.           vm
  26.         )
  27.       }
  28.     }
  29.     if (props && hasOwn(props, key)) {
  30.       process.env.NODE_ENV !== 'production' && warn(
  31.         `The data property "${key}" is already declared as a prop. ` +
  32.         `Use prop default value instead.`,
  33.         vm
  34.       )
  35.     } else if (!isReserved(key)) {
  36.       proxy(vm, `_data`, key)
  37.     }
  38.   }
  39.   // observe data
  40.   observe(data, true /* asRootData */)
  41. }

上边代码，我们的主线任务就是observe(data, true /* asRootData */)，

直线任务就是数据代理 proxy(vm, _data, key)

proxy：

  1. const sharedPropertyDefinition = {
  2.   enumerable: true,
  3.   configurable: true,
  4.   get: noop,
  5.   set: noop
  6. }
  8. export function proxy (target: Object, sourceKey: string, key: string) {
  9.   sharedPropertyDefinition.get = function proxyGetter () {
  10.     return this[sourceKey][key]
  11.   }
  12.   sharedPropertyDefinition.set = function proxySetter (val) {
  13.     this[sourceKey][key] = val
  14.   }
  15.   Object.defineProperty(target, key, sharedPropertyDefinition)
  16. }

数据代理其实非常简单，也就这几行代码，vue中data是储存在_data中的，通过Object.defineProperty，设置get和set，将target（vm）取值代理到了，vm._data，赋值也是代理到了，vm._data

observe:

  1. export function observe (value: any, asRootData: ?boolean): Observer | void {
  2.   if (!isObject(value) || value instanceof VNode) {
  3.     return
  4.   }
  5.   let ob: Observer | void
  6.   if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
  7.     ob = value.__ob__
  8.   } else if (
  9.     shouldObserve &&
  10.     !isServerRendering() &&
  11.     (Array.isArray(value) || isPlainObject(value)) &&
  12.     Object.isExtensible(value) &&
  13.     !value._isVue
  14.   ) {
  15.     ob = new Observer(value)
  16.   }
  17.   if (asRootData && ob) {
  18.     ob.vmCount++
  19.   }
  20.   return ob
  21. }

上边代码中，主要关注的是ob = new Observer(value)，vue将value（data）传进了Observer构造函数进行实例化，那我们就看下Observer构造函数的相关代码

Observer类

  1. export class Observer {
  2.   value: any;
  3.   dep: Dep;
  4.   vmCount: number; // number of vms that have this object as root $data
  6.   constructor (value: any) {
  7.     this.value = value
  8.     this.dep = new Dep()
  9.     this.vmCount = 0
  10.     def(value, '__ob__', this)
  11.     if (Array.isArray(value)) {
  12.       if (hasProto) {
  13.         protoAugment(value, arrayMethods)
  14.       } else {
  15.         copyAugment(value, arrayMethods, arrayKeys)
  16.       }
  17.       this.observeArray(value)
  18.     } else {
  19.       this.walk(value)
  20.     }
  21.   }
  23.   /**
  24.    * Walk through all properties and convert them into
  25.    * getter/setters. This method should only be called when
  26.    * value type is Object.
  27.    */
  28.   walk (obj: Object) {
  29.     const keys = Object.keys(obj)
  30.     for (let i = 0; i < keys.length; i++) {
  31.       defineReactive(obj, keys[i])
  32.     }
  33.   }
  35.   /**
  36.    * Observe a list of Array items.
  37.    */
  38.   observeArray (items: Array<any>) {
  39.     for (let i = 0, l = items.length; i < l; i++) {
  40.       observe(items[i])
  41.     }
  42.   }
  43. }

上边代码在constructor中判断了是否为数组，那就是说明，vue对于对象和数组进行了不同的处理，这时候应该能联想到，vue文档中数组的7种变异方法。我们待会再来看这个，我们首先看不是数组的情况。

也就是walk方法。

walk

  1. walk (obj: Object) {
  2.     const keys = Object.keys(obj)
  3.     for (let i = 0; i < keys.length; i++) {
  4.       defineReactive(obj, keys[i])
  5.     }
  6.   }

显然,defineReactive是我们需要关注的.

  1. export function defineReactive (
  2.   obj: Object,
  3.   key: string,
  4.   val: any,
  5.   customSetter?: ?Function,
  6.   shallow?: boolean
  7. ) {
  8.   const dep = new Dep()
  10.   const property = Object.getOwnPropertyDescriptor(obj, key)
  11.   if (property && property.configurable === false) {
  12.     return
  13.   }
  15.   // cater for pre-defined getter/setters
  16.   const getter = property && property.get
  17.   const setter = property && property.set
  18.   if ((!getter || setter) && arguments.length === 2) {
  19.     val = obj[key]
  20.   }
  22.   let childOb = !shallow && observe(val)//递归,拦截对象中的所有对象
  23.   Object.defineProperty(obj, key, {
  24.     enumerable: true,
  25.     configurable: true,
  26.     get: function reactiveGetter () {
  27.       const value = getter ? getter.call(obj) : val
  28.       if (Dep.target) {
  29.         dep.depend()
  30.         if (childOb) {
  31.           childOb.dep.depend()
  32.           if (Array.isArray(value)) {
  33.             dependArray(value)
  34.           }
  35.         }
  36.       }
  37.       return value
  38.     },
  39.     set: function reactiveSetter (newVal) {
  40.       const value = getter ? getter.call(obj) : val
  41.       /* eslint-disable no-self-compare */
  42.       if (newVal === value || (newVal !== newVal && value !== value)) {
  43.         return
  44.       }
  45.       /* eslint-enable no-self-compare */
  46.       if (process.env.NODE_ENV !== 'production' && customSetter) {
  47.         customSetter()
  48.       }
  49.       // #7981: for accessor properties without setter
  50.       if (getter && !setter) return
  51.       if (setter) {
  52.         setter.call(obj, newVal)
  53.       } else {
  54.         val = newVal
  55.       }
  56.       childOb = !shallow && observe(newVal)
  57.       dep.notify()
  58.     }
  59.   })
  60. }

我们直接来看 Object.defineProperty,

在get中,是给dep实例添加依赖,

  1. if (Dep.target) {
  2.         dep.depend()
  3.         if (childOb) {
  4.           childOb.dep.depend()
  5.           if (Array.isArray(value)) {
  6.             dependArray(value)
  7.           }
  8.         }

Dep类

  1. export default class Dep {
  2.   static target: ?Watcher;
  3.   id: number;
  4.   subs: Array<Watcher>;
  6.   constructor () {
  7.     this.id = uid++
  8.     this.subs = []
  9.   }
  11.   addSub (sub: Watcher) {
  12.     this.subs.push(sub)
  13.   }
  15.   removeSub (sub: Watcher) {
  16.     remove(this.subs, sub)
  17.   }
  19.   depend () {
  20.     if (Dep.target) {
  21.       Dep.target.addDep(this)
  22.     }
  23.   }
  25.   notify () {
  26.     // stabilize the subscriber list first
  27.     const subs = this.subs.slice()
  28.     if (process.env.NODE_ENV !== 'production' && !config.async) {
  29.       // subs aren't sorted in scheduler if not running async
  30.       // we need to sort them now to make sure they fire in correct
  31.       // order
  32.       subs.sort((a, b) => a.id - b.id)
  33.     }
  34.     for (let i = 0, l = subs.length; i < l; i++) {
  35.       subs[i].update()
  36.     }
  37.   }
  38. }

Dep类，调用实例方法depend，接着调用了类静态属性target（target表示当前取值的组件watcher）的addDep方法.

Watcher类

  1. export default class Watcher {
  2.   vm: Component;
  3.   expression: string;
  4.   cb: Function;
  5.   id: number;
  6.   deep: boolean;
  7.   user: boolean;
  8.   lazy: boolean;
  9.   sync: boolean;
  10.   dirty: boolean;
  11.   active: boolean;
  12.   deps: Array<Dep>;
  13.   newDeps: Array<Dep>;
  14.   depIds: SimpleSet;
  15.   newDepIds: SimpleSet;
  16.   before: ?Function;
  17.   getter: Function;
  18.   value: any;
  20.   constructor (
  21.     vm: Component,
  22.     expOrFn: string | Function,
  23.     cb: Function,
  24.     options?: ?Object,
  25.     isRenderWatcher?: boolean
  26.   ) {
  27.     this.vm = vm
  28.     if (isRenderWatcher) {
  29.       vm._watcher = this
  30.     }
  31.     vm._watchers.push(this)
  32.     // options
  33.     if (options) {
  34.       this.deep = !!options.deep
  35.       this.user = !!options.user
  36.       this.lazy = !!options.lazy
  37.       this.sync = !!options.sync
  38.       this.before = options.before
  39.     } else {
  40.       this.deep = this.user = this.lazy = this.sync = false
  41.     }
  42.     this.cb = cb
  43.     this.id = ++uid // uid for batching
  44.     this.active = true
  45.     this.dirty = this.lazy // for lazy watchers
  46.     this.deps = []
  47.     this.newDeps = []
  48.     this.depIds = new Set()
  49.     this.newDepIds = new Set()
  50.     this.expression = process.env.NODE_ENV !== 'production'
  51.       ? expOrFn.toString()
  52.       : ''
  53.     // parse expression for getter
  54.     if (typeof expOrFn === 'function') {
  55.       this.getter = expOrFn
  56.     } else {
  57.       this.getter = parsePath(expOrFn)
  58.       if (!this.getter) {
  59.         this.getter = noop
  60.         process.env.NODE_ENV !== 'production' && warn(
  61.           `Failed watching path: "${expOrFn}" ` +
  62.           'Watcher only accepts simple dot-delimited paths. ' +
  63.           'For full control, use a function instead.',
  64.           vm
  65.         )
  66.       }
  67.     }
  68.     this.value = this.lazy
  69.       ? undefined
  70.       : this.get()
  71.   }
  73.   /**
  74.    * Evaluate the getter, and re-collect dependencies.
  75.    */
  76.   get () {
  77.     pushTarget(this)
  78.     let value
  79.     const vm = this.vm
  80.     try {
  81.       value = this.getter.call(vm, vm)
  82.     } catch (e) {
  83.       if (this.user) {
  84.         handleError(e, vm, `getter for watcher "${this.expression}"`)
  85.       } else {
  86.         throw e
  87.       }
  88.     } finally {
  89.       // "touch" every property so they are all tracked as
  90.       // dependencies for deep watching
  91.       if (this.deep) {
  92.         traverse(value)
  93.       }
  94.       popTarget()
  95.       this.cleanupDeps()
  96.     }
  97.     return value
  98.   }
  100.   /**
  101.    * Add a dependency to this directive.
  102.    */
  103.   addDep (dep: Dep) {
  104.     const id = dep.id
  105.     if (!this.newDepIds.has(id)) {
  106.       this.newDepIds.add(id)
  107.       this.newDeps.push(dep)
  108.       if (!this.depIds.has(id)) {
  109.         dep.addSub(this)
  110.       }
  111.     }
  112.   }
  114.   /**
  115.    * Clean up for dependency collection.
  116.    */
  117.   cleanupDeps () {
  118.     let i = this.deps.length
  119.     while (i--) {
  120.       const dep = this.deps[i]
  121.       if (!this.newDepIds.has(dep.id)) {
  122.         dep.removeSub(this)
  123.       }
  124.     }
  125.     let tmp = this.depIds
  126.     this.depIds = this.newDepIds
  127.     this.newDepIds = tmp
  128.     this.newDepIds.clear()
  129.     tmp = this.deps
  130.     this.deps = this.newDeps
  131.     this.newDeps = tmp
  132.     this.newDeps.length = 0
  133.   }
  135.   /**
  136.    * Subscriber interface.
  137.    * Will be called when a dependency changes.
  138.    */
  139.   update () {
  140.     /* istanbul ignore else */
  141.     if (this.lazy) {
  142.       this.dirty = true
  143.     } else if (this.sync) {
  144.       this.run()
  145.     } else {
  146.       queueWatcher(this)
  147.     }
  148.   }
  150.   /**
  151.    * Scheduler job interface.
  152.    * Will be called by the scheduler.
  153.    */
  154.   run () {
  155.     if (this.active) {
  156.       const value = this.get()
  157.       if (
  158.         value !== this.value ||
  159.         // Deep watchers and watchers on Object/Arrays should fire even
  160.         // when the value is the same, because the value may
  161.         // have mutated.
  162.         isObject(value) ||
  163.         this.deep
  164.       ) {
  165.         // set new value
  166.         const oldValue = this.value
  167.         this.value = value
  168.         if (this.user) {
  169.           try {
  170.             this.cb.call(this.vm, value, oldValue)
  171.           } catch (e) {
  172.             handleError(e, this.vm, `callback for watcher "${this.expression}"`)
  173.           }
  174.         } else {
  175.           this.cb.call(this.vm, value, oldValue)
  176.         }
  177.       }
  178.     }
  179.   }
  181.   /**
  182.    * Evaluate the value of the watcher.
  183.    * This only gets called for lazy watchers.
  184.    */
  185.   evaluate () {
  186.     this.value = this.get()
  187.     this.dirty = false
  188.   }
  190.   /**
  191.    * Depend on all deps collected by this watcher.
  192.    */
  193.   depend () {
  194.     let i = this.deps.length
  195.     while (i--) {
  196.       this.deps[i].depend()
  197.     }
  198.   }
  200.   /**
  201.    * Remove self from all dependencies' subscriber list.
  202.    */
  203.   teardown () {
  204.     if (this.active) {
  205.       // remove self from vm's watcher list
  206.       // this is a somewhat expensive operation so we skip it
  207.       // if the vm is being destroyed.
  208.       if (!this.vm._isBeingDestroyed) {
  209.         remove(this.vm._watchers, this)
  210.       }
  211.       let i = this.deps.length
  212.       while (i--) {
  213.         this.deps[i].removeSub(this)
  214.       }
  215.       this.active = false
  216.     }
  217.   }
  218. }
  1.   addDep (dep: Dep) {
  2.     const id = dep.id
  3.     if (!this.newDepIds.has(id)) {
  4.       this.newDepIds.add(id)
  5.       this.newDeps.push(dep)
  6.       if (!this.depIds.has(id)) {
  7.         dep.addSub(this)
  8.       }
  9.     }
  10.   }

addDep将dep的相关信息,添加到了watcher中,同时执行了dep的addSub将watcher添加到dep中的subs数组中,形成相互依赖。

  1.     set: function reactiveSetter (newVal) {
  2.       const value = getter ? getter.call(obj) : val
  3.       /* eslint-disable no-self-compare */
  4.       if (newVal === value || (newVal !== newVal && value !== value)) {
  5.         return
  6.       }
  7.       /* eslint-enable no-self-compare */
  8.       if (process.env.NODE_ENV !== 'production' && customSetter) {
  9.         customSetter()
  10.       }
  11.       // #7981: for accessor properties without setter
  12.       if (getter && !setter) return
  13.       if (setter) {
  14.         setter.call(obj, newVal)
  15.       } else {
  16.         val = newVal
  17.       }
  18.       childOb = !shallow && observe(newVal)
  19.       dep.notify()
  20.     }

我们看到在set函数中，执行了dep.notify()这个函数就是来发布，通知订阅者进行更新的。

  1. notify () {
  2.     // stabilize the subscriber list first
  3.     const subs = this.subs.slice()
  4.     if (process.env.NODE_ENV !== 'production' && !config.async) {
  5.       // subs aren't sorted in scheduler if not running async
  6.       // we need to sort them now to make sure they fire in correct
  7.       // order
  8.       subs.sort((a, b) => a.id - b.id)
  9.     }
  10.     for (let i = 0, l = subs.length; i < l; i++) {
  11.       subs[i].update()
  12.     }
  13.   }

我们知道，subs数组中的都是watcher，而每一个watcher中都有一个update函数，是用来更新页面的。

update之前nextTick介绍过就不重复介绍了。到此为止，vue响应式原理的核心内容已经结束。