模拟 Vue 响应式原理

<input type="text" oninput="inputHandle(event)" />
<div id="app">
  hello
</div>
<script>
  {/* 表单输入事件，用于测试修改vm的属性，是否实现双向绑定 */}
  function inputHandle(e) {
    vm.msg = e.target.value // 触发set
    console.log(vm.msg) // 触发get
  }

  {/* 模拟 Vue 中的 data 选项 */}
  let data = {
    msg: 'hello'
  }

  {/* 模拟 Vue 实例 */}
  let vm = {}

  {/* 数据劫持：当访问或设置 vm 中的成员的时候，做一些干预操作 */}
  Object.defineProperty(vm, 'msg', {
    // 可枚举（可遍历）
    enumerable: true,
    // 可配置（可以delete删除，可以通过 defineProperty 重新定义）
    configurable: true,
    // 访问器：当获取值时执行
    get () {
      console.log('get: ', data.msg)
      return data.msg
    },
    // 设置器：当设置值时执行
    set (newValue) {
      console.log('set: ', newValue)
      if (newValue === data.msg) {
        return
      }
      // 更新数据的值
      data.msg = newValue
      // 数据更改，更新 DOM 的值
      document.querySelector('#app').textContent = data.msg
    }
  })
</script>

msg：<input type="text" oninput="inputHandle(event, 'msg')" />
count：<input type="text" oninput="inputHandle(event, 'count')" />
<div id="app">
  <span class="msg">hello</span>
  <span class="count">10</span>
</div>
<script>
  {/* 表单输入事件，用于测试修改vm的属性，是否实现双向绑定 */}
  function inputHandle(e, key) {
    vm[key] = e.target.value // 触发set
    console.log(vm[key]) // 触发get
  }

  {/* 模拟 Vue 中的 data 选项 */}
  let data = {
    msg: 'hello',
    count: 10
  }

  {/* 模拟 Vue 实例 */}
  let vm = {}

  {/* 遍历 data 对象的所有属性 */}
  Object.keys(data).forEach(key => {
    Object.defineProperty(vm, key, {
      enumerable: true,
      configurable: true,
      get () {
        console.log('get: ', key, data[key])
        return data[key]
      },
      // 设置器：当设置值时执行
      set (newValue) {
        console.log('set: ', key, newValue)
        if (newValue === data[key]) {
          return
        }
        // 更新数据的值
        data[key] = newValue
        // 数据更改，更新 DOM 的值
        document.querySelector(`.${key}`).textContent = data[key]
      }
    })
  })
</script>

msg：<input type="text" oninput="inputHandle(event, 'msg')" />
count：<input type="text" oninput="inputHandle(event, 'count')" />
<div id="app">
  <span class="msg">hello</span>
  <span class="count">10</span>
</div>
<script>
  {/* 表单输入事件，用于测试修改vm的属性，是否实现双向绑定 */}
  function inputHandle(e, key) {
    vm[key] = e.target.value // 触发set
    console.log(vm[key]) // 触发get
  }

  {/* 模拟 Vue 中的 data 选项 */}
  let data = {
    msg: 'hello',
    count: 10
  }

  {/* 模拟 Vue 实例 */}
  let vm = new Proxy(data, {
    // 拦截器：执行代理行为的函数

    // 访问代理对象(vm)的属性时执行
    get (target, key) {
      console.log('get: ', key, target[key])
      return target[key]
    },
    // 修改代理对象(vm)的属性时执行
    set (target, key, newValue) {
      console.log('set: ', key, newValue)
      if (newValue === target[key]) {
        return
      }
      // 更新数据的值
      target[key] = newValue
      // 数据更改，更新 DOM 的值
      document.querySelector(`.${key}`).textContent = newValue
    }
  })
</script>

var vm = new Vue()
// 注册/订阅事件
vm.$on('dataChange', () => {
  console.log('dosomething')
})
vm.$on('dataChange', () => {
  console.log('dosomething2')
})
// 触发/发布事件
vm.$emit('dataChange')

// eventBus.js
// 事件中心 / 信息中心
let eventHub = new Vue()

// ComponentA.vue
// 发布者
methods: {
  // 发布一条待办消息
  addTodo: function () {
    // 发布消息（事件）
    eventHub.$emit('add-todo', { text: this.newTodoText })
    this.newTodoText = ''
  }
}

// ComponentB.vue
// 发布者
created: function () {
  // 订阅消息（事件）
  eventHub.$on('add-todo', this.renderTodoText)
},
methods: {
  // 把消息渲染到界面中
  renderTodoText(newTodoText) {
    // ...
  }
}

// 事件触发器
class EventEmitter {
  constructor () {
    // subs 存储事件及处理函数
    // { 'click': [fn1, fn2], 'change': [fn3] }
    // this.subs = {}

    // 使用Object.create(null)创建的对象没有原型属性
    // 因为subs只需要存储键值对形式的数据，不需要原型
    // 使用Object.create(null)可以提高性能
    this.subs = Object.create(null)
  }

  // 注册事件
  $on (eventType, handler) {
    this.subs[eventType] = this.subs[eventType] || []
    this.subs[eventType].push(handler)
  }

  // 触发事件
  $emit (eventType, ...args) {
    if (this.subs[eventType]) {
      this.subs[eventType].forEach(handler => {
        handler.apply(this, args)
      })
    }
  }
}

// 测试

// 创建一个事件中心
let em = new EventEmitter()

// 订阅
em.$on('click', msg => {
  console.log('click1', msg)
})
em.$on('click', msg => {
  console.log('click2', msg)
})

// 发布
em.$emit('click', '触发事件')
// click1 触发事件
// click2 触发事件

// 发布者 - 目标
// Vue 响应式机制中内部使用的“Dep”命名
class Dep {
  constructor () {
    // 记录所有的订阅者
    this.subs = []
  }
  // 添加订阅者
  addSub (sub) {
    // 确保这是一个拥有 update 方法的订阅者对象
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }
  // 发布通知
  notify () {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

// 订阅者 - 观察者
class Wathcer {
  // 当事件发生时，由发布者调用update方法
  // update内部可以更新视图或做一些其他操作
  update () {
    console.log('update')
  }
}

// 测试
let dep = new Dep()
let watcher = new Wathcer()
let watcher2 = new Wathcer()

dep.addSub(watcher)
dep.addSub(watcher2)

dep.notify()

<div id="app">
  <h1>插值表达式</h1>
  <h3>{{ msg }}</h3>
  <h3>{{ count }}</h3>

  <h1>指令</h1>
  <h2>v-text</h2>
  <div v-text="msg"></div>
  <h2>v-model</h2>
  <input type="text" v-model="msg">
  <input type="text" v-model="count">
</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  let vm = new Vue({
    el: '#app',
    data: {
      msg: 'Hello Vue',
      count: 20
    }
  })
</script>

// msg 的描述符
{
  configurable: true,
  enumerable: true,
  get: proxyGetter,
  set: proxySetter
}

// $data.msg 的描述符
{
  configurable: true,
  enumerable: true,
  get: reactiveGetter,
  set: reactiveSetter
}

// js/vue.js
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 中的所有属性
    // 注意遍历回调内部需要使用vue实例，所以这里使用箭头函数，使this指向vue实例
    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
        }
      })
    })
  }
}

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) {
    // 注意获取和设置属性的值，使用的是参数 val
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get () {
        // return obj[key] // 死递归
        return val
      },
      set (newValue) {
        if (val === newValue) {
          return
        }
        val = newValue
        // 发送通知
      }
    })
  }
}

class Vue {
  constructor (options) {
    // ...

    // 3. 调用 observer 对象，监听数据的变化
    new Observer(this.$data)

    // 4. 调用 compiler 对象，解析指令和插值表达式
  }
  // ...
}

defineReactive(obj, key, val) {
  let that = this

  // 如果 val 是对象，把 val 内部的属性转换成响应式数据
  this.walk(val)

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get () {
      // return obj[key] // 死递归
      return val
    },
    set (newValue) {
      if (val === newValue) {
        return
      }
      val = newValue
      that.walk(newValue)
      // 发送通知
    }
  })
}

class Compiler {
  constructor (vm) {
    this.el = vm.$el
    this.vm = vm
    this.compiler(this.el)
  }
  // 编译模板，处理文本节点和元素节点
  compiler (el) {
    let childNodes = el.childNodes
    // childNodes是一个伪数组，通过Array.from将其转化为数组
    Array.from(childNodes).forEach(node => {
      if (this.isElementNode(node)) {
        // 处理元素节点
        this.compileElement(node)
      }else if (this.isTextNode(node)) {
        // 处理文本节点
        this.compileText(node)
      }
      // 判断如果有node有子节点，递归调用compiler编译子节点
      if (node.childNodes && node.childNodes.length > 0) {
        this.compiler(node)
      }
    })
  }
  // 编译元素节点，处理指令
  compileElement (node) {
    // 遍历所有的属性节点
    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
  }
  // 编译文本节点，处理指令
  compileText (node) {
    // console.log(node)
    // console.dir会将内容以对象形式打印
    // 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])
    }
  }
  // 判断元素属性是否是指令
  isDirective (attrName) {
    return attrName.startsWith('v-')
  }
  // 判断节点是否是元素节点
  isElementNode (node) {
    return node.nodeType === 1
  }
  // 判断节点是否是文本节点
  isTextNode (node) {
    return node.nodeType === 3
  }
}

// js/vue.js
constructor (options) {
  // ...

  // 4. 调用 compiler 对象，解析指令和插值表达式
  new Compiler(this)
}

class Dep {
  constructor () {
    // 存储所有的观察者
    this.subs = []
  }
  // 添加观察者
  addSub (sub) {
    if (sub && sub.update) {
      this.subs.push(sub)
    }
  }
  // 发送通知
  notify () {
    this.subs.forEach(sub => {
      sub.update()
    })
  }
}

defineReactive(obj, key, val) {
  let that = this
  // 负责收集依赖，并发送通知
  let dep = new Dep()

  this.walk(val)

  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get () {
      // 收集依赖
      // Dep.target指向的是一个观察者，在实例化Watcher对象时定义这个静态属性
      Dep.target && dep.addSub(Dep.target)

      return val
    },
    set (newValue) {
      if (val === newValue) {
        return
      }
      val = newValue
      that.walk(newValue)
      // 发送通知
      dep.notify()
    }
  })
}

class Watcher {
  constructor (vm, key, cb) {
    // vue实例
    this.vm = vm
    // data中的属性名称
    this.key = key
    // 回调函数，负责更新视图
    this.cb = cb

    // 把 watcher对象记录到Dep类的静态属性target中
    Dep.target = this
    // 触发get方法，在get方法中会调用addSub
    this.oldValue = vm[key]
    // 添加完后重置target，防止重复添加
    Dep.target = null
  }
  // 当数据发生变化的时候，更新视图
  update () {
    // 调用update时数据已经发生变化，直接获取就是最新的值
    let newValue = this.vm[this.key]
    if (newValue === this.oldValue) {
      return
    }
    this.cb(newValue)
  }
}

update (node, key, attrName) {
  let updateFn = this[attrName + 'Updater']
  updateFn && updateFn.call(this, node, this.vm[key], key)
}
// 处理v-text指令
textUpdater (node, value, key) {
  // 更新节点文本
  node.textContent = value
  new Watcher(this.vm, key, newValue => {
    node.textContent = newValue
  })
}
// 处理v-model指令
modelUpdater (node, value, key) {
  // 更新表单元素的值
  node.value = value
  new Watcher(this.vm, key, newValue => {
    node.value = newValue
  })
}
// 编译文本节点，处理指令
compileText (node) {
  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
    })
  }
}

// js/compiler.js
// 处理v-model指令
modelUpdater (node, value, key) {
  // 更新表单元素的值
  node.value = value
  new Watcher(this.vm, key, newValue => {
    node.value = newValue
  })
  // 双向绑定
  node.addEventListener('input', () => {
    this.vm[key] = node.value
  })
}

// 静态访问方法
Vue.set(vm.someObject, 'b', 2)
// or
// 实例方法
this.$set(this.someObject,'b',2)