从源码解析vue的响应式原理-响应式的整体流程_叫我女王大人的专栏文章_微信文章

前言

vue官方对响应式原理的解释：深入响应式原理

上一节讲了VUE中依赖收集和依赖触发的原理，然鹅对响应式的整体流程我们还是有很多疑问：

VUE是何时进行依赖收集的？
依赖触发了以后又是怎么进行页面响应式变化的？
watcher对象到底起到了什么作用？

为了回答以上的几个问题，我们不得不梳理一波 VUE响应式的整体流程 了

从实例初始化阶段开始说起

vue源码的 instance/init.js 中是初始化的入口，其中初始化中除了初始化的几个步骤以外，在最后有这样一段代码：

if (vm.$options.el) {
	vm.$mount(vm.$options.el)
}
复制代码

在初始化结束后，调用 $mount()方法将组件挂载挂载至给定的元素vm.$ options.el中。

关于$mount的定义在两处可以看到：platforms/web/runtime/index.js、platforms/web/entry-runtime-with-compiler.js

其中runtime/index.js的代码如下：

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && inBrowser ? query(el) : undefined
  // 划重点！！！
  return mountComponent(this, el, hydrating)
}
复制代码

runtime/index.js是运行时vue的入口，其中定义的 $mount()方法是运行时vue的$ mount功能，其中主要调用了mountComponent()函数完成挂载。 entry-runtime-with-compiler.js是完整的vue的入口，在运行时vue的$mount基础上加入了编译模版的能力。

编译模版，为挂载提供渲染函数

entry-runtime-with-compiler.js中定义了 $mount()，在运行时$ mount()的基础上添加了模版编译。代码如下：

Vue.prototype.$mount = function (
  el?: string | Element,
  hydrating?: boolean
): Component {
  el = el && query(el)

  //检查挂载点是不是<body>元素或者<html>元素
  if (el === document.body || el === document.documentElement) {
    process.env.NODE_ENV !== 'production' && warn(
      `Do not mount Vue to <html> or <body> - mount to normal elements instead.`
    )
    return this
  }

  const options = this.$options
  // 判断渲染函数不存在时
  if (!options.render) {
    ...//构建渲染函数
  }
  
  //调用运行时vue的$mount()函数，
  return mount.call(this, el, hydrating)
}
复制代码

entry-runtime-with-compiler.js中的$mount()函数主要做了三件事：

判断挂载点是不是元素或者元素，因为挂载点会被自身模版替代掉，因此挂载点不能为元素或者元素；
判断渲染函数是否存在，如果渲染函数不存在，则构建渲染函数；
调用运行时vue的 $mount()函数，即runtime/index.js中的$ mount()；

创建渲染函数

上述第二步，若渲染函数不存在时，构建渲染函数，代码如下：

 let template = options.template
 	//如果template存在，则通过template获取真正的【模版】
    if (template) {
      //template是字符串
      if (typeof template === 'string') {
        //template第一个字符是#，则将该字符串作为id选择器获取对应元素作为【模版】
        if (template.charAt(0) === '#') {
          template = idToTemplate(template)
          ... //省略
        }
        //如果template是元素节点，则将template的innerHTML作为【模版】
      } else if (template.nodeType) {
        template = template.innerHTML
        //若template无效，则显示提示
      } else {
        if (process.env.NODE_ENV !== 'production') {
          warn('invalid template option:' + template, this)
        }
        return this
      }
      //若template不存在，则将el元素的outerHTML作为【模版】
    } else if (el) {
      template = getOuterHTML(el)
    }
    //此时template中是最终的【模版】，下面根据【模版】生成rander函数
    if (template) {
      ... //省略
      // 划重点！！！
      // 使用compileToFunctions函数将【模版】template，编译成为渲染函数。
      const { render, staticRenderFns } = compileToFunctions(template, {
        shouldDecodeNewlines,
        shouldDecodeNewlinesForHref,
        delimiters: options.delimiters,
        comments: options.comments
      }, this)
      options.render = render
      options.staticRenderFns = staticRenderFns

      ... //省略
    }			
复制代码

创建渲染函数阶段主要做了两件事：

得到【模版】字符串：
- 如果template存在，且template是字符串以#开头，则将该字符串作为id选择器获取对应元素作为【模版】
- 如果template是元素节点，则将template的innerHTML作为【模版】
- 如果tempalte是无效字符串，则显示warning
- 若template不存在，则将el元素的outerHTML作为【模版】
根据【模版】字符串生成渲染函数render()
- 生成的options.render，在挂载组件的mountComponent函数中用到

实现挂载的mountComponent()函数

上一步确保渲染函数render()存在后，就进入到了这正的挂载阶段。前面讲到挂载函数主要在mountComponent()中完成。

mountComponent()函数的定义在src/core/instance/lifecycle.js文件中。代码如下：

export function mountComponent (
  vm: Component,
  el: ?Element,
  hydrating?: boolean
): Component {
  vm.$el = el
  //如果render不存在
  if (!vm.$options.render) {
    //为render赋初始值，并打印warning提示信息
    vm.$options.render = createEmptyVNode
    ... //省略
    }
  }
  //触发beforeMount钩子
  callHook(vm, 'beforeMount')
  // 开始挂载
  let updateComponent
  /* istanbul ignore if */
  // 定义并初始化updateComponent函数
  if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
    updateComponent = () => {
      const name = vm._name
      const id = vm._uid
      const startTag = `vue-perf-start:${id}`
      const endTag = `vue-perf-end:${id}`

      mark(startTag)
      // 调用_render函数生成vnode虚拟节点
      const vnode = vm._render()
      mark(endTag)
      measure(`vue ${name} render`, startTag, endTag)

      mark(startTag)
      // 以虚拟节点vnode作为参数调用_update函数，生成真正的DOM
      vm._update(vnode, hydrating)
      mark(endTag)
      measure(`vue ${name} patch`, startTag, endTag)
    }
  } else {
    updateComponent = () => {
      //调用_render函数生成vnode虚拟节点；以虚拟节点vnode作为参数调用_update函数，生成真正的DOM
      vm._update(vm._render(), hydrating)
    }
  }
复制代码

mountComponent主要做了三件事：

如果render不存在，为render赋初始值，并打印warning信息
触发beforeMount
定义并初始化updateComponent函数：

调用_render函数生成vnode虚拟节点
虚拟节点vnode作为参数调用_update函数，生成真正的DOM

Watcher类

watcher类的定义在core/observer/watcher.js中，代码如下：

export default class Watcher {
  ... //
  // 构造函数
  constructor (
    vm: Component,
    expOrFn: string | Function,
    cb: Function,
    options?: ?Object,
    isRenderWatcher?: boolean
  ) {
    this.vm = vm
    if (isRenderWatcher) {
      // 将渲染函数的观察者存入_watcher
      vm._watcher = this
    }
    //将所有观察者push到_watchers列表
    vm._watchers.push(this)
    // options
    if (options) {
      // 是否深度观测
      this.deep = !!options.deep
      // 是否为开发者定义的watcher（渲染函数观察者、计算属性观察者属于内部定义的watcher）
      this.user = !!options.user
      // 是否为计算属性的观察者
      this.computed = !!options.computed
      this.sync = !!options.sync
      //在数据变化之后、触发更新之前调用
      this.before = options.before
    } else {
      this.deep = this.user = this.computed = this.sync = false
    }
    // 定义一系列实例属性
    this.cb = cb
    this.id = ++uid // uid for batching
    this.active = true
    this.dirty = this.computed // for computed watchers
    this.deps = []
    this.newDeps = []
    // depIds 和 newDepIds 用书避免重复收集依赖
    this.depIds = new Set()
    this.newDepIds = new Set()
    this.expression = process.env.NODE_ENV !== 'production'
      ? expOrFn.toString()
      : ''
    // parse expression for getter
    // 兼容被观测数据，当被观测数据是function时，直接将其作为getter
    // 当被观测数据不是function时通过parsePath解析其真正的返回值
    if (typeof expOrFn === 'function') {
      this.getter = expOrFn
    } else {
      this.getter = parsePath(expOrFn)
      if

从源码解析vue的响应式原理-响应式的整体流程

正文