Vue响应式原理模拟

整体分析

  • Vue 基本结构
  • 打印 Vue 实例观察

  • 整体结构


    image.png
  • Vue
    • 把 data 中的成员注入到 Vue 实例，并且把 data 中的成员转成 getter/setter
  • Observer
    • 能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知 Dep
  • Compiler
    • 解析每个元素中的指令/插值表达式，并替换成相应的数据
  • Dep
    • 添加观察者(watcher)，当数据变化通知所有观察者
  • Watcher
    • 数据变化更新视图

Vue

  • 功能

    • 负责接收初始化的参数(选项)
    • 负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter
    • 负责调用 observer 监听 data 中所有属性的变化
    • 负责调用 compiler 解析指令/插值表达式

  • 结构


    Vue.png

  • 代码

class Vue {
  constructor(options) {
    // 1. 通过属性保存选项的数据
    this.$options = options || {}
    this.$data = options.data || {}
    this.$el = typeof options.el === 'string' ? document.querySelector(options.el) : options.el
    // 2. 把data中的成员转换成getter和setter，注入到vue实例中
    this._proxyData(this.$data)
    // 3. 调用observer对象，监听数据的变化
    // 4. 调用compiler对象，解析指令和差值表达式
  }

  _proxyData(data) {
    // 遍历data中的所有属性
    Object.keys(data).forEach(key => {
      // 把data的属性注入到vue实例中
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get () {
          return data[key]
        },
        set (newValue) {
          if (newValue === data[key]) return
          data[key] = newValue
        }
      })
    })
  }
}

Observer

  • 功能

    • 负责把 data 选项中的属性转换成响应式数据
    • data 中的某个属性也是对象，把该属性转换成响应式数据
    • 数据变化发送通知

  • 结构


    Observer.png

  • 代码

// 负责数据劫持
// 把$data中的成员转换为getter/setter
class Observer {
  constructor (data) {
    this.walk(data)
  }

  walk (data) {
    // 1. 判断data是否是对象
    if (!data || typeof data !== 'object') return
    // 2. 遍历data对象的所有属性
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })
  }

  // 定义响应式成员
  defineReactive (obj, key, val) {
    const that = this
    // 如果val是对象，把val里面的属性转换为响应式数据
    this.walk(val)
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        return val
      },
      set(newValue) {
        if (newValue === val) return
        // 如果newValue是对象，设置newValue的成员为响应式
        that.walk(newValue)
        val = newValue
        // 发送通知
      }
    })
  }
}

Compiler

  • 功能

    • 负责编译模板，解析指令/插值表达式
    • 负责页面的首次渲染
    • 当数据变化后重新渲染视图

  • 结构


    Compiler.png

compile()

class Compiler {
  constructor (vm) {
    this.el = vm.$el
    this.vm = vm
    this.compile(this.el)
  }
  // 编译模板，处理文本节点和元素节点
  compile (el) {
    let childNodes = el.childNodes
    Array.from(childNodes).forEach(node => {
      // 处理文本节点
      if (this.isTextNode(node)) {
        this.compileText(node)
      } else if (this.isElementNode(node)) {
        // 处理元素节点
        this.compileElement(node)
      }

      // 判断node节点，是否有子节点，如果有子节点，要递归调用compile
      if (node.childNodes && node.childNodes.length) {
        this.compile(node)
      }
    })
  }

  // 编译元素节点，处理指令
  compileElement (node) {
  }

  // 编译文本节点，处理插值表达式
  compileText (node) {
  }

  // 判断元素属性是否是指令
  isDirective(attrName) {
    return attrName.startsWith('v-')
  }

  // 判断节点是否是文本节点
  isTextNode (node) {
    return node.nodeType === 3
  }

  // 判断节点是否是元素节点
  isElementNode(node) {
    return node.nodeType === 1
  }
}

compileText

  • 负责编译插值表达式
// 编译文本节点，处理插值表达式
  compileText (node) {
    // console.dir(node)
    // {{ msg }}
    let reg = /\{\{(.+?)\}\}/
    let value = node.textContent
    if (reg.test(value)) {
      let key = RegExp.$1.trim()
      node.textContent = value.replace(reg, this.vm[key])
    }
  }

compileElement

  • 负责编译元素的指令
  • 处理 v-text 的首次渲染
  • 处理 v-model 的首次渲染
// 编译元素节点，处理指令
  compileElement (node) {
    console.log(Array.from(node.attributes))
    // 遍历所有的属性节点
    Array.from(node.attributes).forEach(attr => {
      // 判断是否是指令
      let attrName = attr.name
      if (this.isDirective(attrName)) {
        // v-text --> text
        attrName = attrName.substr(2)
        let key = attr.value
        this.update(node, key, attrName)
      }
    })
  }

  update (node, key, attrName) {
    let updateFn = this[attrName + 'Updater']
    updateFn && updateFn(node, this.vm[key])
  }

  // 处理v-text指令
  textUpdater (node, value) {
    node.textContent = value
  }
  // v-model
  modelUpdater (node, value) {
    node.value = value
  }

Dep (Dependency)

流程.png
  • 功能
    • 收集依赖，添加观察者(watcher)
    • 通知所有观察者

  • 结构


    Dep.png
  • 代码
class Dep {
  constructor() {
    // 存储所有的观察者
    this.subs = []
  }

  // 添加观察者
  addSub (sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }

  // 发送通知
  notify () {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}
  • 在observer.js中收集依赖，发送通知
// 定义响应式成员
  defineReactive (obj, key, val) {
    const that = this
    // 负责收集依赖，并发送通知
    let dep = new Dep()

    // 如果val是对象，把val里面的属性转换为响应式数据
    this.walk(val)
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        // getter过程中收集依赖
        Dep.target && dep.addSub(Dep.target)
        return val
      },
      set(newValue) {
        if (newValue === val) return
        // 如果newValue是对象，设置newValue的成员为响应式
        that.walk(newValue)
        val = newValue
        // 数据变化之后，发送通知
        dep.notify()
      }
    })
  }

Watcher

image.png

  • 功能

    • 当数据变化触发依赖， dep 通知所有的 Watcher 实例更新视图
    • 自身实例化的时候往 dep 对象中添加自己

  • 结构


    Watcher.png

  • 代码

class Watcher {
  constructor(vm, key, cb) {
    this.vm = vm
    // data中的属性名称
    this.key = key
    // 当数据变化的时候，调用cb更新视图
    this.cb = cb

    // 在Dep的静态属性上记录当前watcher对象，当访问数据的时候把watcher添加到dep的subs中
    Dep.target = this
    // 触发一次getter方法，让dep为当前key记录watcher，在get方法中会调用addSub
    this.oldValue = vm[key]
    // 清空target
    Dep.target = null
  }

  // 当数据发生变化的时候更新视图
  update () {
    let newValue = this.vm[this.key]
    if (this.oldValue === newValue) return
    this.cb(newValue)
  }
}
  • 在compiler.js中为每一个指令/插值表达式创建watcher对象，监视数据的变化
update (node, key, attrName) {
  let updateFn = this[attrName + 'Updater']
  // 因为在textUpdater中要使用this
  updateFn && updateFn.call(this, node, this.vm[key], key)
}

// 处理v-text指令
textUpdater (node, value, key) {
  node.textContent = value
  // 每一个指令中创建一个watcher，观察数据的变化
  new Watcher(this.vm, key, (newValue) => {
    node.textContent = newValue
  })
}
// v-model
modelUpdater (node, value, key) {
  node.value = value
  // 每一个指令中创建一个watcher，观察数据的变化
  new Watcher(this.vm, key, (newValue) => {
    node.value = newValue
  })
}

// 编译文本节点，处理插值表达式
compileText (node) {
  // console.dir(node)
  // {{ msg }}
  let reg = /\{\{(.+?)\}\}/
  let value = node.textContent
  if (reg.test(value)) {
    let key = RegExp.$1.trim()
    node.textContent = value.replace(reg, this.vm[key])

    // 创建watcher对象, 当数据改变更新视图
    new Watcher(this.vm, key, (newValue) => {
      node.textContent = newValue
    })
  }
}

视图变化更新数据

// v-model
modelUpdater (node, value, key) {
  node.value = value
  // 每一个指令中创建一个watcher，观察数据的变化
  new Watcher(this.vm, key, (newValue) => {
    node.value = newValue
  })
  // 双向绑定
  node.addEventListener('input', () => {
    this.vm[key] = node.value
  })
}

总结

  • 问题
    • 给属性重新赋值成对象，是否是响应式的？
      是的
    • 给 Vue 实例新增一个成员是否是响应式的？
      不是

  • 通过下图回顾整体流程


    整体流程.png
  • Vue
    • 记录传入的选项，设置data /el
    • 把data的成员注入到Vue实例
    • 负责调用Observer实现数据响应式处理（数据劫持）
    • 负责调用Compiler编译指令/插值
  • Observer
    • 数据劫持
      • 负责把data中的成员转换成getter/setter
      • 负责把多层属性转换成getter/setter
      • 如果属性赋值为新对象，把新对象的成员设置为getter/setter
    • 添加Dep和Watcher依赖关系
    • 数据变化发送通知
  • Compiler
    • 负责编译模板，解析指令/插值表达式
    • 负责页面的首次渲染过程
    • 当数据变化后重新渲染
  • Dep
    • 收集依赖，添加订阅者（watcher）
    • 通知所有订阅者
  • Watcher
    • 自身实例化的时候往dep对象中添加自己
    • 当数据变化dep通知所有的Watcher实例更新视图

参考

深入响应式原理
https://github.com/DMQ/mvvm

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容