（二）Vue-模拟实现响应式

数据驱动

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

数据响应式的核心原理

Vue 2.x

• 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)

Vue 3.x

• Proxy
• 直接监听对象，而非属性。
• ES 6中新增，IE 不支持，性能由浏览器优化

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

// 模拟 Vue 实例 
let vm = new Proxy(data, { 
    // 当访问 vm 的成员会执行 
    get (target, key) { 
        console.log('get, key: ', key, target[key]) 
        return target[key] 
    },
    // 当设置 vm 的成员会执行 
    set (target, key, newValue) { 
        console.log('set, key: ', key, newValue) 
        if (target[key] === newValue) { 
            return 
        }
        target[key] = newValue 
        document.querySelector('#app').textContent = target[key] 
    } 
})

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

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

发布/订阅模式

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

观察者模式

• 观察者(订阅者) -- Watcher
  update()：当事件发生时，具体要做的事情
• 目标(发布者) -- Dep
  subs 数组：存储所有的观察者
  addSub()：添加观察者
  notify()：当事件发生，调用所有观察者的 update() 方法
• 没有事件中心

总结:
观察者模式是由具体目标调度，比如当事件触发，Dep 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。
发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。

Vue 响应式原理模拟

1. 整体分析

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

• Watcher
  数据变化更新视图

  
  

2. Vue
   负责接收初始化的参数(选项)
   负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter
   负责调用 observer 监听 data 中所有属性的变化
   负责调用 compiler 解析指令/插值表达式

3. Observer
   负责把 data 选项中的属性转换成响应式数据
   data 中的某个属性也是对象，把该属性转换成响应式数据
   数据变化发送通知

4. Compiler
   负责编译模板，解析指令/插值表达式
   负责页面的首次渲染
   当数据变化后重新渲染视图

5. Dep(Dependency)
   收集依赖，添加观察者(watcher)
   通知所有观察者

   
   
   image.png

6. Watcher
   当数据变化触发依赖，dep 通知所有的 Watcher 实例更新视图
   自身实例化的时候往 dep 对象中添加自己

   
   

7.总结

• 给属性重新赋值成对象，是否是响应式的？是
• 给 Vue 实例新增一个成员是否是响应式的？否
  检测变化的注意事项

Demo