初始化数据

  1. // TODO: 初始化数据
  2. function initData (vm: Component) {
  3.   let data = vm.$options.data
  4.   // data 是不是函数，是函数就让他执行获取数据 挂到 vm._data
  5.   data = vm._data = typeof data === 'function'
  6.     ? getData(data, vm)
  7.     : data || {}
  9.   // 观测数据
  10.   observe(data, true /* asRootData */)
  11. }

观测数据

  1. /**
  2.  * 响应式处理的真正入口
  3.  * 为对象创建观察者实例，如果对象已经被观察过，则返回已有的观察者实例，否则创建新的观察者实例
  4.  * @param {object} value 
  5.  * @param {boolean} asRootData 
  6.  * @returns 
  7.  */
  8. export function observe (value, asRootData){
  9.   // 如果是对象并且不是 vnode 的时候才观测
  10.   if (!isObject(value) || value instanceof VNode) {
  11.     return
  12.   }
  13.   let ob
  14.   // value 对象上存在 __ob__ 属性，则表示已经做过观察了，直接返回 __ob__ 属性
  15.   if(hasOwn(value, '__ob__') && value.__ob__ instanceof Observer){
  16.     ob = value.__ob__
  17.   }
  19.   if (
  20.     shouldObserve &&
  21.     !isServerRendering() && // 是否需要被观测
  22.     (Array.isArray(value) || isPlainObject(value)) && // 是一个数组或对象
  23.     Object.isExtensible(value) && // 支持 defineProperty
  24.     !value._isVue // 不是vue 实例
  25.   ) {
  26.     // 创建观察者实例
  27.     ob = new Observer(value) 
  28.   }
  29.   // 记录观测数量
  30.   if (asRootData && ob) {
  31.     ob.vmCount++ 
  32.   }
  33.   return ob
  34. }

创建观察者实例

  1. /**
  2.  * 2.观察者类，会被附加到每个被观察的对象上，value.__ob__ = this
  3.  * 而对象的各个属性则会被转换成 getter/setter，并收集依赖和通知更新
  4.  */
  5. export class Observer {
  6.   constructor (value) {
  7.     this.value = value   // ob.value
  8.     this.dep = new Dep() // 给对象和数组实例化一个 dep 属性 $set 之后就会触发他们自己的 update 方法
  9.     this.vmCount = 0
  10.     // data.__ob__ = this 
  11.     // 将当前 Observer 实例挂载到 data 上 __ob__ 主要是用来取一些方法，这样被劫持过的所有属性都有 __ob__
  12.     def(value, '__ob__', this)  // 不可枚举 TODO:
  13.      /**
  14.        * value 为数组
  15.        * hasProto = '__proto__' in {}
  16.        * 用于判断对象是否存在 __proto__ 属性，通过 obj.__proto__ 可以访问对象的原型链
  17.        * 但由于 __proto__ 不是标准属性，所以有些浏览器不支持，比如 IE6-10，Opera10.1
  18.        * 为什么要判断，是因为一会儿要通过 __proto__ 操作数据的原型链
  19.        * 覆盖数组默认的七个原型方法，以实现数组响应式
  20.        */
  21.     if (Array.isArray(value)) { // 数组劫持 切片编程
  22.       //  如果支持原型链
  23.       if (hasProto) {
  24.         protoAugment(value, arrayMethods)
  25.       } else {
  26.         // 不支持就拷贝一份
  27.         copyAugment(value, arrayMethods, arrayKeys)
  28.       }
  29.       // 观测数组 如果数组中的数据是对象类型，需要监控对象的变化  arr: [{name: 'dabao'}, {age: 3}]
  30.       this.observeArray(value)
  31.     } else { //  对象劫持
  32.       this.walk(value)
  33.     }
  34.   }
  39.   /**
  40.    * 遍历对象上的每个 key，为每个 key 设置响应式
  41.    * 仅当值为对象时才会走这里
  42.    */
  44.   walk (obj) {
  45.     const keys = Object.keys(obj)
  46.     for (let i = 0; i < keys.length; i++) {
  47.       defineReactive(obj, keys[i])
  48.     }
  49.   }
  51.   /**
  52.    * 遍历数组的每一项.目的是对数组中的数组和数组中的对象再次劫持，递归
  53.    */
  54.   observeArray (items) {
  55.     for (let i = 0, l = items.length; i < l; i++) {
  56.       observe(items[i])
  57.     }
  58.   }
  59. }
  60. /**
  61.  * 设置 target.__proto__ 的原型对象为 src
  62.  * 比如 数组对象，arr.__proto__ = arrayMethods 
  63.  * @param {Array} target value
  64.  * @param {object} src arrayMethods
  65.  */
  66. function protoAugment (target, src) {
  67.   target.__proto__ = src
  68. }
  70. /**
  71.  * 在目标对象上定义指定属性
  72.  * 比如数组：为数组对象定义那七个方法
  73.  */
  74. function copyAugment (target: Object, src: Object, keys: Array<string>) {
  75.   for (let i = 0, l = keys.length; i < l; i++) {
  76.     const key = keys[i]
  77.     def(target, key, src[key])
  78.   }
  79. }
  81. /**
  82.  * Define a property.
  83.  */
  84. export function def (obj: Object, key: string, val: any, enumerable?: boolean) {
  85.   Object.defineProperty(obj, key, {
  86.     value: val,
  87.     enumerable: !!enumerable,
  88.     writable: true,
  89.     configurable: true
  90.   })
  91. }

拦截 obj[key] 的读取和设置操作

  1. /**
  2.  * 拦截 obj[key] 的读取和设置操作：
  3.  *   1、在第一次读取时收集依赖，比如执行 render 函数生成虚拟 DOM 时会有读取操作
  4.  *   2、在更新时设置新值并通知依赖更新
  5.  */
  6. export function defineReactive (
  7.   obj,
  8.   key,
  9.   val,
  10.   customSetter,
  11.   shallow
  12. ) {
  14.   // 实例化 dep，一个 key 一个 dep
  15.   const dep = new Dep()
  16.   // 获取 obj[key] 的属性描述符，发现它是不可配置对象的话直接 return
  17.   const property = Object.getOwnPropertyDescriptor(obj, key)
  18.   // 数据必须支持 可配置 object.freeze 包装的对象 configurable 为 false
  19.   if (property && property.configurable === false) {
  20.     return
  21.   }
  23.   /**
  24.    * getter 和 setter  是为了兼容这种情况
  25.    * a: {
  26.    *    get(){}, 
  27.    *    set(){},
  28.    * }
  29.    */
  30.   const getter = property && property.get
  31.   const setter = property && property.set
  32.   // 不存在 getter 只有 setter
  33.   if ((!getter || setter) && arguments.length === 2) {
  34.     val = obj[key]
  35.   }
  36.   // 递归调用，处理 val 即 obj[key] 的值为对象的情况，保证对象中的所有 key 都被观察  
  37.   let childOb = !shallow && observe(val)
  39.   Object.defineProperty(obj, key, {
  40.     enumerable: true,
  41.     configurable: true,
  42.     get: function reactiveGetter () {
  43.       // 取值
  44.       const value = getter ? getter.call(obj) : val
  45.       /**
  46.        * Dep.target 为 Dep 类的一个静态属性，值为 watcher，在实例化 Watcher 时会被设置
  47.        * 实例化 Watcher 时会执行 new Watcher 时传递的回调函数（computed 除外，因为它懒执行）
  48.        * 而回调函数中如果有 vm.key 的读取行为，则会触发这里的 读取 拦截，进行依赖收集
  49.        * 回调函数执行完以后又会将 Dep.target 设置为 null，避免这里重复收集依赖
  50.        */
  51.       if (Dep.target) {
  52.         // 依赖收集，在 dep 中添加 watcher，也在 watcher 中添加 dep
  53.         dep.depend()
  54.         // 有子元素 也对其进行依赖收集
  55.         if (childOb) {
  56.           // 这就是 this.key.chidlKey 被更新时能触发响应式更新的原因
  57.           childOb.dep.depend()
  58.           // 如果这个 obj[key] 是 数组，则触发数组响应式
  59.           if (Array.isArray(value)) { // 数组嵌套数组 [[]] 递归收集 arr:[[[]]] 改最里面的一层
  60.             dependArray(value) // 嵌套数组递归收集
  61.           }
  62.         }
  63.       }
  64.       return value
  65.     },
  66.     // set 拦截对 obj[key] 的设置操作
  67.     set: function reactiveSetter (newVal) {
  68.       // 旧的 obj[key]
  69.       const value = getter ? getter.call(obj) : val
  70.       // 新旧值一样直接return
  71.       if (newVal === value || (newVal !== newVal && value !== value)) {
  72.         return
  73.       }
  74.       // setter 不存在说明该属性是一个只读属性，直接 return
  75.       // #7981: for accessor properties without setter
  76.       if (getter && !setter) return
  77.       // 设置新值
  78.       if (setter) {
  79.         setter.call(obj, newVal)
  80.       } else { 
  81.         val = newVal
  82.       }
  84.       // 观测这个新值， 如果赋值的是一个新对象，需要对这个新对象进行劫持
  85.       childOb = !shallow && observe(newVal) 
  86.       // 依赖通知更新
  87.       dep.notify()
  88.     }
  89.   })
  90. }

创建渲染watcher

  1. // lifecycle.js
  2. /**
  3.    * TODO:
  4.    * 实例化 渲染 Watcher
  5.    */
  6.   new Watcher(vm, updateComponent, noop, {
  7.     before () {
  8.       if (vm._isMounted && !vm._isDestroyed) {
  9.         callHook(vm, 'beforeUpdate')
  10.       }
  11.     }
  12.   }, true /* isRenderWatcher */)

watcher源码

  1. import Dep, { pushTarget, popTarget } from './dep'
  3. // 
  4. let uid = 0
  6. /**
  7.  * 
  8.  * 渲染watcher 每个组件是一个watcher
  9.  *    Vue1 是每个差值表达式都有一个 wacher，这就导致粒度太细，追踪的依赖就太多了，很消耗内存，
  10.  *    Vue2.x 和 Vue3.x 都是以整个组件为一个 Watcher，这样状态发生变化后会通知到组件，组件内部在使用虚拟dom 进行对比，降低消耗
  11.  * 计算属性、
  12.  * vm.$watch
  13.  * 
  14.  * expOrFn 只能是一个 以点分割的路径或者是个函数 对于渲染watcher来说这里的 expOrFn 其实就是 vm._render 生成虚拟 dom、执行 dom-diff、更新真实 dom。
  15.  * vm.$watch('a.b.c',function(newValue, oldValue) {console.log('读数据')})
  16.  * vm.$watch(function(){return data.a + data.b)},function(newValue, oldValue) {console.log('读数据')})
  17.  * 
  18.  */
  19. export default class Watcher {
  20.  // 希望在第一个参数发生变化时触发第二个参数中的函数
  21.   constructor (
  22.     vm,
  23.     expOrFn,
  24.     cb,
  25.     options,
  26.     isRenderWatcher
  27.   ) {
  28.     this.vm = vm // 当前组件实例
  29.     if (isRenderWatcher) { // 渲染watcher
  30.       vm._watcher = this
  31.     }
  32.     vm._watchers.push(this)
  33.     // options
  34.     if (options) {
  35.       this.deep = !!options.deep
  36.       this.user = !!options.user
  37.       this.lazy = !!options.lazy
  38.       this.sync = !!options.sync
  39.       this.before = options.before
  40.     } else {
  41.       this.deep = this.user = this.lazy = this.sync = false
  42.     }
  43.     this.cb = cb // //用户传入的回调函数 vm.$watch('msg',cb)
  44.     this.id = ++uid // watcher的唯一标识 每次产生一个watcher都要有一个唯一标识
  45.     this.active = true 
  46.     this.dirty = this.lazy // for lazy watchers
  47.     this.deps = [] // 存 watcher 的依赖收集器
  48.     this.newDeps = [] // 存 dep 的
  49.     this.depIds = new Set()
  50.     this.newDepIds = new Set()
  51.     this.expression = process.env.NODE_ENV !== 'production'
  52.       ? expOrFn.toString()
  53.       : ''
  54.     // 判断传入的是表达式还是函数 赋值给 this.getter
  55.     if (typeof expOrFn === 'function') {
  56.       this.getter = expOrFn
  57.     } else { 
  58.       this.getter = parsePath(expOrFn) // 用parsePath 读取一个字符串的 keyPath
  59.     }
  60.     // 对于渲染watcher 会立马执行 this.get()进行页面渲染
  61.     this.value = this.lazy
  62.       ? undefined
  63.       : this.get()
  64.   }
  66.   /**
  67.    * 让getter执行，从实例上取值渲染页面 就会调用Object.defineProperty 的get方法，就会走依赖收集的过程
  68.    * this.getter 是实例化 watcher 时传递的第二个参数，一个函数或者字符串，比如：updateComponent 或者 parsePath 返回的读取 this.xx 属性值的函数
  69.    */
  70.   get () {
  71.     // 将 Dep.target 属性指向自己
  72.     pushTarget(this)  // Dep.target = target
  74.     // value 为回调函数执行的结果 比如执行 updateComponent，进入 patch 阶段
  75.     let value = this.getter.call(vm, vm)
  76.     const vm = this.vm
  77.       // popTarget()
  78.       // 这里清空了Dep.target，为了防止notify触发时，不停的绑定Watcher与Dep，
  79.       // 造成代码死循环
  80.       Dep.target = null;
  82.       this.cleanupDeps()
  83.       return value
  84.   }
  86.   /** 两件事：
  87.    *   1、添加 dep 给自己（watcher）
  88.    *   2、添加自己（watcher）到 dep
  89.    */
  90.   addDep (dep) {
  91.     // 判重，如果 dep 已经存在则不重复添加
  92.     const id = dep.id
  93.     if (!this.newDepIds.has(id)) {
  94.       // 缓存 dep.id，用于判重
  95.       this.newDepIds.add(id)
  96.       // 将 dep 存入 watcher
  97.       this.newDeps.push(dep) 
  98.        // 避免在 dep 中重复添加 watcher
  99.       if (!this.depIds.has(id)) {
  100.         // 将watcher 存入 dep
  101.         dep.addSub(this) 
  102.       }
  103.     }
  104.   }
  106.   /**
  107.    * Clean up for dependency collection.
  108.    */
  109.   cleanupDeps () {
  110.     let i = this.deps.length
  111.     while (i--) {
  112.       const dep = this.deps[i]
  113.       if (!this.newDepIds.has(dep.id)) {
  114.         dep.removeSub(this)
  115.       }
  116.     }
  117.     let tmp = this.depIds
  118.     this.depIds = this.newDepIds
  119.     this.newDepIds = tmp
  120.     this.newDepIds.clear()
  121.     tmp = this.deps
  122.     this.deps = this.newDeps
  123.     this.newDeps = tmp
  124.     this.newDeps.length = 0
  125.   }
  127.   /**
  128.    * 更新方法
  129.    * 根据 watcher 配置项，决定接下来怎么走，一般是 queueWatcher
  130.    */
  131.   update () {
  132.     /* istanbul ignore else */
  133.     if (this.lazy) {
  134.       // 懒执行时走这里，比如 computed
  136.       // 将 dirty 置为 true，可以让 computedGetter 执行时重新计算 computed 回调函数的执行结果
  137.       this.dirty = true
  138.     } else if (this.sync) {
  139.       // 同步执行，在使用 vm.$watch 或者 watch 选项时可以传一个 sync 选项，
  140.       // 当为 true 时在数据更新时该 watcher 就不走异步更新队列，直接执行 this.run 
  141.       // 方法进行更新
  142.       this.run()
  143.     } else {
  144.       // 更新时一般都这里，将 watcher 放入 watcher 队列
  145.       queueWatcher(this)
  146.     }
  147.   }
  149.   /**
  150.    * 由 刷新队列函数 flushSchedulerQueue 调用，完成如下几件事：
  151.    *   1、执行实例化 watcher 传递的第二个参数，updateComponent 或者 获取 this.xx 的一个函数(parsePath 返回的函数)
  152.    *   2、更新旧值为新值
  153.    *   3、执行实例化 watcher 时传递的第三个参数，比如用户 watcher 的回调函数
  154.    */
  155.    run () {
  156.     if (this.active) {
  157.       // 调用 this.get 方法
  158.       const value = this.get()
  159.       if (
  160.         value !== this.value ||
  161.         isObject(value) ||
  162.         this.deep
  163.       ) {
  164.         // 更新旧值为新值
  165.         const oldValue = this.value
  166.         this.value = value
  168.         if (this.user) {
  169.           // 如果是用户 watcher，则执行用户传递的第三个参数 —— 回调函数，参数为 val 和 oldVal
  170.           try {
  171.             this.cb.call(this.vm, value, oldValue)
  172.           } catch (e) {
  173.             handleError(e, this.vm, `callback for watcher "${this.expression}"`)
  174.           }
  175.         } else {
  176.           // 渲染 watcher，this.cb = noop，一个空函数
  177.           this.cb.call(this.vm, value, oldValue)
  178.         }
  179.       }
  180.     }
  181.   }
  183.   /**
  184.    * Evaluate the value of the watcher.
  185.    * This only gets called for lazy watchers.
  186.    */
  187.   evaluate () {
  188.     this.value = this.get()
  189.     this.dirty = false
  190.   }
  192.   /**
  193.    * 依赖于这个观察者收集的所有 deps.
  194.    */
  195.   depend () {
  196.     let i = this.deps.length
  197.     while (i--) {
  198.       this.deps[i].depend()
  199.     }
  200.   }
  202.   /**
  203.    * Remove self from all dependencies' subscriber list.
  204.    */
  205.   teardown () {
  206.     if (this.active) {
  207.       // remove self from vm's watcher list
  208.       // this is a somewhat expensive operation so we skip it
  209.       // if the vm is being destroyed.
  210.       if (!this.vm._isBeingDestroyed) {
  211.         remove(this.vm._watchers, this)
  212.       }
  213.       let i = this.deps.length
  214.       while (i--) {
  215.         this.deps[i].removeSub(this)
  216.       }
  217.       this.active = false
  218.     }
  219.   }
  220. }

依赖收集器Dep

  1. /* @flow */
  3. import type Watcher from './watcher'
  4. import { remove } from '../util/index'
  5. import config from '../config'
  7. let uid = 0
  9. /**
  10.  * 一个 dep 对应一个 obj.key []
  11.  * 在读取响应式数据时，负责收集依赖，每个 dep（或者说 obj.key）依赖的 watcher 有哪些
  12.  * 在响应式数据更新时，负责通知 dep 中那些 watcher 去执行 update 方法
  13.  */
  14. export default class Dep {
  16.   constructor () {
  17.     this.id = uid++
  18.     this.subs = []
  19.   }
  21.   addSub (sub) { // sub: Watcher
  22.     this.subs.push(sub)
  23.   }
  25.   removeSub (sub) { // sub: Watcher
  26.     remove(this.subs, sub)
  27.   }
  29.   // 向 watcher 中添加 dep
  30.   depend () {
  31.     if (Dep.target) {
  32.       Dep.target.addDep(this)
  33.     }
  34.   }
  36.   /**
  37.    * 通知 dep 中的所有 watcher，
  38.    * 执行 watcher.update() 方法
  39.    */
  40.   notify () {
  41.     const subs = this.subs.slice() // 返回一个新数组
  42.     // 遍历 dep 中存储的 watcher，执行 watcher.update()
  43.     for (let i = 0, l = subs.length; i < l; i++) {
  44.       subs[i].update()
  45.     }
  46.   }
  47. }
  49. Dep.target = null
  50. const targetStack = []
  51. // 设置 Dep.target = watche
  52. export function pushTarget (target) {
  53.   targetStack.push(target)
  54.   Dep.target = target
  55. }
  56. // 依赖收集结束调用，设置 Dep.target = null
  57. export function popTarget () {
  58.   targetStack.pop()
  59.   Dep.target = targetStack[targetStack.length - 1]
  60. }