Vue响应式原理 -【2】

模拟Vue响应式原理

将 data 中的成员转换成 get 与 set 注入到 Vue 实例上，则在 vue 的实例中则可以访问到 data 中的成员

Vue实例中的成员：

• $data：记录data中的成员转换成get与set，$data 中的setter是真正监视数据变化
• $options：把构造函数的参数记录到options中
• _data：和 $data指向同一个对象，下划线开头的为私有成员，$开头的为公共成员
• $el：对应选项中的el，可以是选择器也可以是一个DOM对象，如果是选择器 Vue 内部需要将这个选择器转换为DOM对象

Vue响应式原理的实现逻辑：

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

页面需要实现的功能：

// html 部分：
<div id="app">
    <h1>Vue 基础结构</h1>
    <h1>差值表达式</h1>
    <h3>{{ msg }}</h3>
    <h3>{{ count }}</h3>
    <h1>v-text</h1>
    <div v-text="msg"></div>
    <h1>v-model</h1>
    <input type="text" v-model="msg">
    <input type="text" v-model="count">
 </div>

// Js 部分：
let vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        count: 20,
        items: ['a', 'b', 'c']
      }
 })

Vue

功能：

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

结构：

代码：

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 中的属性注入到 Vue 实例
    this._proxyData(this.$data)
    // 3.调用 Observer 监听 data 中所有属性的变化
    new Observer(this.$data);
    // 4.调用 compiler 解析指令/插值表达式
    new Compiler(this)
  }
  _proxyData (data) {
    // 遍历 data 的所有属性，添加 get set 方法
    Object.keys(data).forEach(key => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get(){
          return data[key]
        },
        set(newValue){
          data[key] = newValue
        }
      })
    }) 
  }
}

Observer

功能 ：

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

结构：

注：带***的部分后面会提到

// 负责数据劫持 
// 把 $data 中的成员转换成 getter/setter
class Observer {
  constructor(data){
    this.walk(data)
  }
  // 遍历对象的所有属性
  walk (data) {
    // 1. 判断数据是否是对象，如果不是对象返回 
    // 2. 如果是对象，遍历对象的所有属性，设置为 getter/setter
    if (!data || typeof data !== 'object') return;
    Object.keys(data).forEach(key => {
      this.defineReactive(data, key, data[key])
    })
  }
  // 调用defineProperty 把 $data 中的成员转换成 getter/setter
  defineReactive (data, key, value){
    const that = this
    // 如果 val 是对象，继续设置它下面的成员为响应式数据
    this.walk(value)

    // 创建 dep 对象收集依赖 ***
    const dep = new Dep()
    Object.defineProperty(data, key, {
      enumerable: true,
      configurable: true,
      // 此处的 value 不能是 data[key] 会形成死循环递归
      get(){
        // 收集依赖 ***
        Dep.target && dep.addSub(Dep.target)
        return value
      },
      set(newValue){
        if (value === newValue) return;
        // 如果 newValue 是对象，设置 newValue 的成员为响应式
        that.walk(newValue)
        value = newValue

        // 当数据变化之后，发送通知 ***
        dep.notify()
      }
    })
  }
}

Compiler

功能：

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

结构：

代码：

class Compiler {
  constructor(vm) {
    this.el = vm.$el;
    this.vm = vm 
    this.compile(this.el)
  }
  // 编译模板内容：处理文本节点和元素节点
  compile(el){
    const nodes = el.childNodes
    Array.from(nodes).forEach(node => {
      // 处理文本节点
      if(this.isTextNode(node)){
        this.compileText(node)
      // 处理元素节点
      }else if(this.isElementNode(node)){
        this.compileElement(node)
      }
      // 判断已遍历 el 的节点中是否有子节点，有子节点继续编译
      if(node && node.childNodes.length){
        this.compile(node)
      }
    })
  }
  // 编译元素节点以及指令处理：
  compileElement(node){
    // 遍历元素节点中的所有属性，找到指令
    Array.from(node.attributes).forEach(attr => {
      // 获取元素属性的名称
      let attrName = attr.name
      if(this.isDirective(attrName)){
        // 截取属性的名称，获取 text model
        attrName = attrName.substr(2)
        // 获取属性的值
        const key = attr.value
        // 处理不同的指令：
        // 传入 node 节点，key 数据的属性名称，dir 指令的后半部分
        this.update(node, key, attrName)
      }
    })
  }
  // 负责更新 DOM，创建 Watcher
  update(node, key, attrName){
    const updateFn = this[attrName + "Update"]
    // 为 textUpdate 中的 this 仍然指向当前类，调用 call 方法改变 this 指向
    updateFn && updateFn.call(this, node, this.vm[key], key)
  }
  // v-text 指令的更新方法
  textUpdate(node, value, key){
    node.textContent = value
    // 订阅数据变化，回调函数更新视图 ***
    new Watcher(this.vm, key, (nweValue) => {
      node.textContent = nweValue
    })
  }
  // v-model 指令的更新方法
  modelUpdate(node, value, key){
    node.value = value
    // ***
    new Watcher(this.vm, key, (nweValue) => {
      node.value = nweValue
    })
    // 双向绑定，给 node 注册事件 ; 视图变化，数据更新变化，当 给data 重新赋值，又会触发响应式机制 ***
    node.addEventListener("input", () => {
      this.vm[key] = node.value
    })
  }
  // 编译文本：编译插值表达式
  compileText(node){
    // 匹配文本中的 {{}}
    const reg = /\{\{(.+)\}\}/
    // 获取文本节点的内容
    const value = node.textContent
    // 判断文本节点中是否有 {{}}
    if(reg.test(value)){
      // 取出插值表达式中的值
      const key = RegExp.$1.trim()
      // 把差值表达式替换成具体的值
      node.textContent = value.replace(reg, this.vm[key])

      // 创建 watcher 对象，当数据改变更新视图 ***
      new Watcher(this.vm, key, (nweValue) => {
        node.textContent = nweValue
      })
    }
  }
  // 判断指令
  isDirective(attrName){
    return attrName.startsWith('v-')
  }
  // 判断文本节点
  isTextNode(node){
    // console.dir(node)
    return node.nodeType === 3
  }
  // 判断属性节点
  isElementNode(node){
    return node.nodeType === 1
  }
}

Dep(Dependency)

功能：

• 收集依赖，添加观察者(watcher)
• 通知所有观察者

结构：

代码：

class Dep {
  constructor(){
    // 存储所有的观察者
    this.subs = []
  }
  // 添加观察者
  addSub(sub){
    if(sub && sub.update){
      this.subs.push(sub)
    }
  }
  // 通知所有观察者
  notify(){
    this.subs.forEach((sub) => {
      sub.update()
    })
  }
}
// 在 Observer.js 中收集依赖，发送通知 (见带***部分)

Watcher

功能：

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

结构：

class Watcher {
  constructor(vm, key, cb){
    this.vm = vm
    // data 中的属性名称
    this.key = key
    // 数据改变时执行的回调函数
    this.cb = cb
    // 在 Dep 的静态属性上记录当前 watcher 对象，当访问数据的时候把 watcher 添加到 dep 的 subs 中
    Dep.target = this
    // 触发一次 getter，让 dep 为当前 key 记录 watcher
    this.oldValue = vm[key]
    // 清空 target
    Dep.target = null

  }
  // 更新视图
  update () {
    const newValue = this.vm[this.key]
    if (this.oldValue === newValue) {
      return
    }
    this.cb(newValue)
  }
}
// 在 compiler.js 中为每一个指令/插值表达式创建 watcher 对象，监视数据的变化(见带***部分)

总结

问题：

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

回顾整体流程图：

Vue

• 记录传入的选项，设置 $data/$el
• 把 data 的成员注入到 Vue 实例
• 负责调用 Observer 实现数据响应式处理（数据劫持）
• 负责调用 Compiler 编译指令/插值表达式等

Observer

• 数据劫持
• 负责把 data 中的成员转换成 getter/setter
• 负责把多层属性转换成 getter/setter
• 如果给属性赋值为新对象，把新对象的成员设置为 getter/setter
• 添加 Dep 和 Watcher 的依赖关系
• 数据变化发送通知

Compiler

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

Dep

• 收集依赖，添加订阅者(watcher)
• 通知所有订阅者

Watcher

• 自身实例化的时候往dep对象中添加自己
  响应式处理（数据劫持）
• 负责调用 Compiler 编译指令/插值表达式等

Observer

• 数据劫持
• 负责把 data 中的成员转换成 getter/setter
• 负责把多层属性转换成 getter/setter
• 如果给属性赋值为新对象，把新对象的成员设置为 getter/setter
• 添加 Dep 和 Watcher 的依赖关系
• 数据变化发送通知

Compiler

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

Dep

• 收集依赖，添加订阅者(watcher)
• 通知所有订阅者

Watcher

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

上篇：https://blog.csdn.net/m0_50729201/article/details/114487454

结语：以上内容全学习时手敲记录，无复制粘贴，全原创，希望可以给各位小伙伴带来收获，如有错误的地方或有疑问欢迎留言，感谢阅读！

祝各位前端程序猿前程似锦，一路向北！