1. 响应式处理过程流程图

Vue源码-响应式处理过程 - 图1

2. 响应式处理过程概述

  • 响应式处理整体过程为initState() => initData() => observe()
  • 其中observe是响应式处理的入口，通过该方法为data对象转化为响应式对象
  • observe方法接收的是对象且该对象不是响应式时，会为该对象创建一个observe对象，会调用Observer类

  • Observer类中判断该value是数组还是对象，进行不同的处理

    • 数组的响应化处理，是重写push,pop,sort等会修改原数组的方法，调用对应的notify.然后遍历数组中的成员，判断其类型决定是否调用observe方法
    • 对象的响应化处理，会调用walk方法，遍历对象中的每个属性，调用defineReactive

  • defineReactive的核心是为每一个属性定义getter和setter,getter中收集依赖，setter中派发更新,即调用dep.notify

  • dep.notify()会调用watcher的update()方法。如果该watcher未被处理，会被添加到queue队列中，并调用flushSchedulerQueue()方法，该方法会触发对应的钩子函数以及调用watcher.run()更新视图