⚡ 30 秒速记

• 访问器拦读写，依赖容器登记更新函数
• 跟踪函数执行期间明确当前订阅者
• 赋新对象后也要观察它
• 输入事件写数据，数据通知刷新视图
• 去重、清理和循环保护决定模拟实现的边界

模拟响应式，先打通读取登记、写入通知和视图更新这三个环节。 用访问器保存属性值，执行更新函数时把它设为当前订阅者，读取便能建立联系。赋值后通知相关函数，输入框再通过事件把用户修改写回数据，就形成双向交互。嵌套对象、新对象替换、重复依赖和卸载清理也要考虑，能跑一个插值不代表已经覆盖完整框架行为。

版本校准： 本文出现 Object.defineProperty、Dep、Watcher 和双端 Diff 时，主要描述 Vue 2 实现；Vue 3 使用 Proxy、effect 与新的渲染器路径。Vue 2 已于 2023-12-31 结束维护，新项目应以 Vue 3 为基线，旧项目参考 Vue 2 EOL 官方说明 制定迁移与安全策略。

数据驱动

• 数据响应式、双向绑定、数据驱动
• 数据响应式
  • 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作提高开发效率
• 双向绑定
  • 数据改变，视图改变;视图改变，数据也随之改变
  • 我们可以使用 v-model 在表单元素上创建双向数据绑定
• 数据驱动是 Vue 最独特的特性之一
  • 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

数据响应式的核心原理

Vue 2.x

• Vue 2.x深入响应式原理
• MDN - Object.defineProperty
• 浏览器兼容 IE8 以上(不兼容 IE8)

// 模拟 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
  } 
})

// 测试
vm.msg = 'Hello World' 
console.log(vm.msg)