Vue响应式原理

数据驱动

• 数据响应式

  数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁 琐的 DOM 操作，提高开发效率

• 双向绑定

  数据改变，视图改变；视图改变，数据也随之改变

• 数据驱动

  Vue 最独特的特性之一，开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

数据响应式核心原理

• Vue2.x

  使用Object.defineProperty()，将data中的property转为getter/setter，从而实现响应式

  // 模拟 Vue 中的 data 选项
  let data = {
  msg: 'hello'
  }
  // 模拟 Vue 的实例
  let vm = {}
  
  // 数据劫持：当访问或者设置vm中的成员时，做一些干预操作
  Object.defineProperty(vm, 'msg', {
    // 可枚举
      enumrable: true,
      // 可配置（可以使用 delete 删除，可以通过 defineProperty 重新定义）
      configurable: true,
      // getter
      get () {
          console.log('get:', data.msg)
          return data.msg
      }
      // setter
      set (newValue) {
        console.log('set:', newValue)
        if (newValue === data.msg) return
        data.msg = newValue
        // 数据更改，更新DOM
        document.querySelector('#app').textContent = data.msg
    }
  })
  // 测试
  vm.msg = 'Hello World'
  console.log(vm.msg)
  

image-20210228175816518.png

如果一个对象中有多个属性需要设置为响应式时

// 遍历 data 对象的所有属性
Object.keys(data).forEach(key => {
    // 把 data 中的属性，转换成 vm 的 setter/setter
    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('#app').textContent = data[key]
        }
    })
})

• Vue3.0

  使用Proxy实现，直接监听对象，而不再是属性，弊端是IE不支持

  // 模拟 Vue 中的 data 选项
  let data = {
      msg: 'hello',
      count: 0
  }
  
  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 (target[key] === newValue) return
  
          target[key] = newValue
          document.querySelector('#app').textContent = newValue
      }
  })
  
  // 测试
  vm.msg = 'Hello World'
  console.log(vm.msg)
  

  发布订阅模式和观察者模式

• 发布订阅模式

  我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信 号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执 行。这就叫做"发布/订阅模式"（publish-subscribe pattern）

image-20210228181053154.png

• Vue自定义事件

  this.$emit('myEvent')
  this.$on('myEvent', () => {
      console.log('myEvent')
  })
  

  模拟实现vue自定义事件

  // 事件触发器
  class EventEmitter {
      constructor () {
          // { 'click': [fn1, fn2], 'change': [fn] }
          this.subs = Object.create(null)
      }
  
      // 注册事件
      $on (eventType, handler) {
          this.subs[eventType] = this.subs[eventType] || []
          this.subs[eventType].push(handler)
      }
  
      // 触发事件
      $emit (eventType) {
          if (this.subs[eventType]) {
              this.subs[eventType].forEach(handler => {
                  handler()
              })
          }
      }
  }
  
  // 测试
  let em = new EventEmitter()
  em.$on('click', () => {
      console.log('click1')
  })
  em.$on('click', () => {
      console.log('click2')
  })
  
  em.$emit('click')
  

• 兄弟组件通信过程

  // 事件中心 eventBus.js
  let bus = new vue()
  
  // 组件A 发布者
  fn1 () {
      bus.$emit('add-todo', { text: this.newTodoText })
  }
  // 组件B 订阅者
  created () {
      bus.$on('add-todo', this.addTodo)
  }
  

• 观察者模式

  有观察者（订阅者）——Watcher和目标（发布者）——Dep组成，当事件发生时，通过notify通知所有观察者，观察者模式没有事件中心

image-20210301082218883.png

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

// 观察者（订阅者）
class Watcher {
    update() {
        console.log('update')
    }
}

// 测试
let dep = new Dep()
let watcher = new Watcher()
dep.addSub(watcher)
dep.notify()

• 总结

  观察者模式是由具体目标调度，比如当事件触发，Dep 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。

  发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。