Skip to main content

谈谈 Vue2 数据响应式

Vue 有通知机制,根据数据发生变化去通知模板

原理：发布订阅模式 加上 数据劫持 Object.defineProperty 完成

数据劫持​

对 vue 传入的数据使用 Object.defineProperty 进行数据拦截，为其动态添加 getter/setter 方法。

  1. 数据劫持 通过 Object.defineProperty，对 data 中的声明的每个属性都进行监听，遍历所有属性值

  2. 依赖收集 通过 Object.defineProperty（get 方法），在 data 中的声明的每个属性，创建一个 dep 数组，dep 数组有个依赖收集器 sub，用来做依赖收集，它保存着 谁使用了 它

  3. 依赖更新 通过 Object.defineProperty（set 方法），当属性数据改变的时候，属性会遍历 dep 数组中的 依赖收集器 subs，逐个通知 watcher，让 watcher 完成视图更新

<div>
  <input id="input" />
  <p id="content"></p>
</div>
let object = {}
Object.defineProperty(object, 'msg', {
  get() {
    return object
  },
  set(value) {
    document.getElementById('input').value = value
    document.getElementById('content').innerHTML = value
  }
})

//后续修改数据的时候，视图需要改变
setTimeout(() => {
  object.msg = 'hello-world'
}, 2000)

参考答案​