实现一个简易Vue（一）

整体分析

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

1. 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中的成员转换成getter和setter，注入到vue实例中
    this._proxyData(this.$data)
    // 3. 调用observer对象，监听数据的变化
    new Observer(this.$data)
    // 4. 调用compiler对象，解析指令和差值表达式
    new Compiler(this)
  }
  // 数据代理
  _proxyData(data) {
    // 遍历data中的所有属性
    Object.keys(data).forEach(key => { // 使用箭头函数让 this 指向 vue 实例
      // 把data的属性注入到vue实例中
      Object.defineProperty(this, key, {
        enumerable: true, // 可枚举
        configurable: true, // 可配置
        get() {
          return data[key]
        },
        set(newValue) {
          // 数据没有发生变化 return 停止执行
          if (newValue === data[key]) {
            return
          }
          data[key] = newValue
        }
      })
    })
  }
}