Vue简化版实现

Vue整体结构

• Vue: 把data中的成员注入到Vue实例，并且把data中的成员转换成getter, setter
• Observer: 劫持对象的所有属性， 如有变动可拿最新的值， 通知Dep
• Compiler：解析每一个元素中的指令/插值表达式, 替换成相应的数据
• Dep: 发布者。 收集观察者，当数据变化是， 通知所有的观察者
• Watcher: 观察者。 数据变化更新视图

Vue（初始化）

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

class Vue { 
  constructor(options) {
    // 1. 通过属性保存选项的数据
    this.$options = options
    const { el, data } = options
    this.$data = data || {}
    // 如果是选择器， 则获取DOM元素
    this.$el = typeof el === 'string' ? document.querySelector(el) : el
    // 2. 把data中的成员转换成getter和setter，注入到vue实例中
    this._proxyData(data)
    // 3. 调用observer对象，监听数据的变化
    new Observer(data)
    // 4. 调用compiler对象，解析指令和差值表达式
    new Compiler(this)
  }
  /**
   * 代理数据, 把data里面的属性转换成getter, setter
   * @param {*} data 
   */
  _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 (data[key] === newValue) return
          data[key] = newValue
        }
      })
    })
   }
}

Observer（监视者）

• 功能
• • 把data选项中的每一个属性， 转换成响应式数据
• • 如果data中的属性也是对象， 也应该把该属性转换成响应式数据
• • 数据发生变化， 发送通知
• 结构
• 代码

/**
 * 监视者
 */
class Observer { 
  constructor(data) {
    this.walk(data)
   }
  /**
   * 遍历对象的所有属性
   * @param {*} data 
   */
  walk(data) { 
    // 1. 判断data是否是对象
    if (!data || typeof data !== 'object') return
    // 2. 遍历data对象的所有属性
    Object.keys(data).forEach(key => { 
      this.defineReactive(data, key, data[key])
    })
  }
  /**
   * 转换成响应式， 把属性转换成getter, setter
   * @param {*} obj 对象
   * @param {*} key 键
   * @param {*} val 值
   */
  defineReactive(obj, key, val) { 
    const that = this
    // 负责收集依赖，并发送通知
    const dep = new Dep()
    // 如果val是对象，把val内部的属性转换成响应式数据，递归调用
    this.walk(val)
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() { 
        // 收集依赖, target就是Watcher实例
        Dep.target && dep.addSub(Dep.target)
        return val // obj[key] 会触发递归， 所以上面方法需要传递一个val
      },
      set(newVal) { 
        if (val === newVal) return
        val = newVal
        // 如果赋值的值是一个新的对象的话
        that.walk(newVal)
        // 发送通知
        dep.notify()
      }
    })
  }
}

Compiler（解析器）

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

/**
 * 编译器
 */
class Compiler {
    constructor (vm) {
        this.el = vm.$el
        this.vm = vm
        this.compile(this.el)
    }
    /**
     * 编译魔板， 处理文本节点和元素节点
     * @param {*} el 节点
     */
    compile (el) {
        const childNodes = el.childNodes // 伪数组
        Array.from(childNodes).forEach(node => {
            if (this.isTextNode(node)) {
                // 处理文本节点
                this.compileText(node)
            } else if (this.isElementNode(node)) {
                // 处理元素节点
                this.comileElement(node)
            }
             // 判断node节点，是否有子节点，如果有子节点，要递归调用compile
            if (node.childNodes && node.childNodes.length) {
                this.compile(node)
            }
        })
    }
    /**
     * 编译元素节点， 处理指令
     * @param {*} node 元素节点
     */
    comileElement(node) {
        const attributes = 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)
             }
        })
    }
    /**
     * 编译解析节点的指令， 并把指令解析出对应的值
     * @param {*} node 节点
     * @param {*} key  属性值对应的字段
     * @param {*} attrName 属性名称， 用于拼接后续的方法名
     */
    update(node, key, attrName) {
        let updateFn = this[`${attrName}Updater`] // 方法名称
        updateFn && updateFn.call(this, node, this.vm[key], key) // 调用， call改变this指向
    }
    /**
     * 处理v-text指令
     * @param {*} node 节点
     * @param {*} value 文本内容
     * @param {*} key 创建Watcher所需
     */
    textUpdater(node, value, key) { 
        node.textContent = value // 初次渲染
        new Watcher(this.vm, key, (newValue) => { 
            node.textContent = newValue
        })
    }
    /**
     * 处理v-model指令
     * @param {*} node 
     * @param {*} value 
     * @param {*} key  创建Watcher所需
     */
    modelUpdater(node, value, key) { 
        node.value = value // 初次渲染
        new Watcher(this.vm, key, (newVal) => { 
            node.value = newVal
        })
        // 双向绑定
        node.addEventListener('input', () => {
            this.vm[key] = node.value
        })
    }

    /**
     * 编译文本节点， 处理插值表达式
     *  @param {*} node 元素节点
     */
    compileText (node) {
        let reg = /\{\{(.+?)\}\}/ // 正则
        const content = node.textContent // 文本内容
        if (reg.test(content)) {
            let key = RegExp.$1.trim()
            node.textContent = content.replace(reg, this.vm[key]) // 初次渲染

            // 创建watcher对象，当数据改变更新视图, key对应的值发生改变时， 会调用回调函数
            new Watcher(this.vm, key, (newValue) => { 
                node.textContent = newValue
            })
        } 
    }
    /**
     * 判断元素属性是否是指令
     * @param {*} attrName 属性名称
     */
    isDirective (attrName) {
        return attrName.startsWith('v-')
    }
    /**
     * 判断节点是否是文本节点
     * @param {*} node  节点
     */
    isTextNode (node) {
        return node.nodeType === 3
    }
    /**
     * 判断节点是否是元素节点
     * @param {*} node 节点
     */
    isElementNode (node) {
        return node.nodeType === 1
    }
}

Dep（Dependency 发布者）

• 功能
• • 收集依赖，添加观察者(watcher)
• • 通知所有观察者
• 结构
• 代码

/**
 * 发布者
 * 每一个监视的属性， 都具有一个对应的发布者对象
 */
class Dep { 
  constructor() { 
    // 存储所有的观察者
    this.watchs = []
  }
  /**
   * 添加观察者（监视的属性对应的观察者）
   * 在监察的属性的getter 方法里添加观察者
   * @param {*} watch 观察者
   */
  addSub(watch) { 
    if (watch && watch.update) { // 观察者， 必须具有update方法
      this.watchs.push(watch)
    }
  }
  /**
   * 给所有的观察者， 发送通知
   */
  notify() {
    this.watchs.forEach(watch => { 
      watch.update()
    })
  }
}

Watcher（观察者/订阅者）

• 功能
• • 数据变化是触发依赖， dep通知所有的watcher实例更新视图
• • 自身实例化的时候，往dep对象中添加自己
• 结构
• 代码

/**
 * 观察者, 对应的是网页的节点中的的指令属性
 * 例如：v-text:xxx、 {{xxx}}
 */
class Watcher { 
  /**
   * @param {*} vm vue实例
   * @param {*} key 观察的具体属性
   * @param {*} cb 属性值发生变化后的对应的回调函数(更新DOM的方法)
   */
  constructor(vm, key, cb) { 
    this.vm = vm
    // data中的属性名称
    this.key = key
    // 回调函数负责更新视图
    this.cb = cb

    // 把watcher对象记录到Dep类的静态属性target, 在创建Watcher实例的时候
    Dep.target = this
    // 记录历史值, vm[key] 触发监察属性的getter方法,把观察者， 添加到发布者的数组中
    this.oldValue = vm[key]
    Dep.target = null // 清除， 防止重复添加
  }
  /**
   * 当数据发生变化的时候更新视图
   */
  update() { 
    let newValue = this.vm[this.key]
    if (this.oldValue === newValue) return
    this.cb(newValue) // 更新视图
  }
}

测试

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue简化版</title>
</head>
<body>
  <div id="app">
    <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>
  <script src="./js/dep.js"></script>
  <script src="./js/watcher.js"></script>
  <script src="./js/compiler.js"></script>
  <script src="./js/observer.js"></script>
  <script src="./js/vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        msg: 'Hello Vue',
        count: 100,
        person: { name: 'zs' }
      }
    })
    console.log(vm.msg)
    // vm.msg = { test: 'Hello' }
    vm.test = 'abc'
  </script>
</body>
</html>

总结

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