1 数据驱动

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

2 响应式核心Vue2

用Object.defineProperty 作数据劫持，不支持ie8及以下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7. </head>
  8. <body>
  9.   <div id="app"></div>
  10.   <script>
  11.     // 模拟 vue 中的 data
  12.     let data = {
  13.       msg: 'hello'
  14.     }
  16.     // 模拟 Vue 的实例
  17.     let vm = {}
  19.     // 数据劫持：当访问或者设置 vm 中的成员时，做一些干预操作
  20.     Object.defineProperty(vm, 'msg', {
  21.       // 可枚举（可遍历）
  22.       enumerable: true,
  23.       // 可配置（可以使用 delete 删除， 可以通过 defineProperty 重新定义）
  24.       configurable: true,
  25.       // 当获取值的时候执行
  26.       get() {
  27.         console.log('get: ', data.msg)
  28.         return data.msg
  29.       },
  30.       set(value) {
  31.         console.log('set: ', data.msg)
  32.         if(data.msg === value) return
  33.         data.msg = value;
  34.         // 更新dom
  35.         document.querySelector('#app').textContent = data.msg
  36.       }
  37.     })
  39.     vm.msg = 'hello world';
  40.     console.log(vm.msg)
  41.   </script>
  42. </body>
  43. </html>

如果一个对象中有多个属性要转换，getter/setter怎么处理

  1. ...
  2.   <div id="app"></div>
  3.   <script>
  4.     // 模拟 vue 中的 data
  5.     let data = {
  6.       msg: 'hello',
  7.       count: 20
  8.     }
  10.     // 模拟 Vue 的实例
  11.     let vm = {}
  13.     proxyData(data)
  15.     function proxyData(data) {
  16.       Object.keys(data).forEach(key => {
  17.          // 数据劫持：当访问或者设置 vm 中的成员时，做一些干预操作
  18.         Object.defineProperty(vm, key, {
  19.           // 可枚举（可遍历）
  20.           enumerable: true,
  21.           // 可配置（可以使用 delete 删除， 可以通过 defineProperty 重新定义）
  22.           configurable: true,
  23.           // 当获取值的时候执行
  24.           get() {
  25.             console.log('get: ', data[key])
  26.             return data[key]
  27.           },
  28.           set(value) {
  29.             console.log('set: ', data[key])
  30.             if(data[key] === value) return
  31.             data[key] = value;
  32.             // 更新dom
  33.             document.querySelector('#app').textContent = data[key]
  34.           }
  35.         })
  36.       })
  37.     }
  39.     vm.msg = 'hello world';
  40.     console.log(vm.msg)
  41. ...

3 响应式核心vue3

用 proxy 对象，直接监听对象而非属性，ES6中新增，ie不支持，性能由浏览器优化

  1. ...
  2.   <div id="app"></div>
  3.   <script>
  4.     // 模拟 vue 中的 data
  5.     let data = {
  6.       msg: 'hello',
  7.       count: 20
  8.     }
  10.     // 模拟 Vue 的实例
  11.     let vm = new Proxy(data, {
  12.       // 执行代理行为的函数
  13.       get(target, key) {
  14.         console.log('get, key:', key, target[key])
  15.         return target[key]
  16.       },
  17.       set(target, key, value) {
  18.         console.log('set, key:', key, target[key])
  19.         if(target[key] === value) return
  20.         target[key] = value
  21.         document.querySelector('#app').textContent = target[key]
  22.       }
  23.     })
  25.     vm.msg = 'hello world';
  26.     console.log(vm.msg)
  27. ...

4 发布订阅模式

  • 订阅者
  • 发布者
  • 信号中心

假设疫情期间，各地的疾控中心每天统计确诊病例，然后发布到疫情发布平台，我们就可以通过订阅疫情发布平台去获取疫情的信息，从而就可以知道周边有没有确认病例
vue 的自定义事件

  1.     // 注册事件
  2.     vm.$on('datachange', () => {
  3.       console.log('data change')
  4.     })
  6.     vm.$on('datachange', () => {
  7.       console.log('data change1')
  8.     })
  9.     // 触发事件
  10.     vm.$emit('datachange')

兄弟组件的通信过程

  1. // eventBus.js
  2. // 事件中心
  3. let eventHub = new Vue()
  5. // ComponentA.vue
  6. // 发布者
  7. addTodo: function() {
  8.     // 发布消息（事件）
  9.   eventHub.$emit('add-todo', {text: this.newTodoText})
  10.   this.newTodoText = ''
  11. }
  12. // ComponentB.vue
  13. // 订阅者
  14. created: function() {
  15.     // 订阅消息（事件）
  16.   eventHub.$on('add-todo', this.addTodo)
  17. }

模拟vue的事件机制

  1. class EventEmitter {
  2.       constructor() {
  3.         this.subs = Object.create(null)
  4.       }
  6.       $on(eventType, handler) {
  7.         this.sub[eventType] = this.sub[eventType] || [];
  8.         this.sub[eventType].push(handler)
  9.       }
  11.       $emit(eventType) {
  12.         if(this.sub[eventType]) {
  13.           this.sub[eventType].forEach( handler => {
  14.             handler()
  15.           })
  16.         } else {
  17.           console.log('事件未挂载')
  18.         }
  19.       }
  20.     }
  22. let vm = new EventEmitter()
  24. vm.$on('click', function(){
  25.   console.log('click1')
  26. })
  27. vm.$on('click', function(){
  28.   console.log('click2')
  29. })
  31. vm.$emit('click')

5 观察者模式

  • 观察者（订阅者） watcher

update(): 当事件发生时，具体要做的事情

  • 目标（发布者）Dep
    • subs数组：存储所有的观察者
    • addSub(): 添加观察者
    • notify(): 当事件发生时，调用所有观察者的update 方法

  • 没有事件中心 ```javascript // 目标-发布者 class Dep { constructor() { this.subs = [] }

    addSub(sub) { if(sub && sub.update) {

    1. this.subs.push(sub)

    } }

    notify() { this.subs.forEach( sub => {

    1. sub.update()

    }) } }

// 观察者-订阅者 class Watcher { update() { console.log(‘update’) } }

let dep = new Dep() let watcher = new Watcher()

dep.addSub(watcher) dep.notify();

  1. 总结<br />观察者模式：由具体目标调度，比如当事件触发，Dep 就会去调用观察者的方法，所以观察者模式的发布者和订阅者是存在依赖关系的<br />发布订阅模式：由统一的调度中心调用，因此发布者和订阅者不需要知道对方的存在
  2. <a name="8uxVr"></a>
  3. #### 6 Vue 响应式原理模拟
  4. Vue类<br /> 功能
  6. - 负责接收初始化的参数
  7. - 负责把 data 中的属性注入到 Vue 的实例，转换成 getter/setter
  8. - 负责调用 observer 监听 data 中所有属性的变化
  9. - 负责调用 compiler 解析指令/插值表达式
  11.  结构
  13. - 类名 vue
  14. - 属性 $options $el $data
  15. - 方法 _proxyData()
  16. ```javascript
  17. // vue.js
  18. class Vue {
  19.   constructor(options) {
  20.     // 1 通过属性保存选项的数据 
  21.     this.$options = options || {}
  22.     this.$data = options.data || {}
  23.     this.$el = typeof options.el === 'string'? document.querySelector(options.el) : options.el
  24.     // 2 把data 中的成员转换成getter/setter, 注入到 vue 的实例中
  25.     this._proxyData(this.$data)
  26.     // 3 调用 observer 对象，监听数据的变化
  27.     // 4 调用 compiler 对象，解析指令和插值表达式
  28.   }
  30.   _proxyData(data){
  31.     // 遍历data 中的所有属性
  32.     Object.keys(data).forEach(key => {
  33.       // 把 data 的属性注入到 vue 实例中
  34.       Object.defineProperty(this, key, {
  35.         enumerable: true,
  36.         configurable: true,
  37.         get () {
  38.           return data[key]
  39.         },
  40.         set(newValue) {
  41.           if(newValue === data[key]) {
  42.             return
  43.           }
  44.           data[key] = newValue
  45.         }
  46.       })
  47.     })
  48.   }
  49. }

Observer类
功能

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

结构

  • walk(data) 方法，遍历属性

  • defineReactive(data,key,value) 通过调用Object.defineProperty方法把属性转换成getter、setter ```javascript class Observer { constructor(data) {

    1.   this.walk(data);

    }

    walk(data) { // 1 判断data 是否对象 if(!data || typeof data !== ‘object’) {

    1. return

    } // 2 遍历对象的所有属性 Object.keys(data).forEach( key => {

    1. this.defineReactive(data, key, data[key])

    }) }

    defineReactive(obj, key, value) { let that = this // 如果 value 是对象，把对象的属性转换为响应式数据 this.walk(value) Object.defineProperty(obj, key, {

    1. enumerable: true,
    2. configurable: true,
    3. get () {
    4.   // 此处不返回obj[key]的原因是 在vue.js中对obj有get方法，这样就会导致次递归循环调用，堆栈溢出
    5.   // 此处在外部有调用就会形成闭包，所有可以拿到值
    6.   return value
    7. },
    8. set (newValue) {
    9.   if(newValue === value) {
    10.     return
    11.   }
    12.   value = newValue
    13.   // 赋值的是对象，把对象的属性也转换成响应式数据
    14.   that.walk(newValue)
    15.   // 发送通知
    16. }

    }) } }

  1. <a name="bXsDE"></a>
  2. #### 7 Compiler 类
  3. 功能
  5. - 负责编译模板、解析指令、插值表达式
  6. - 负责页面的首次渲染
  7. - 当数据变化时重新渲染视图
  9. 结构
  11. - el 存储模板
  12. - vm 存储实例
  13. - compiler(el)方法 编译模板、处理文本节点和元素节点
  14. - compilerElement(el)方法 编译元素节点、处理指令
  15. - compilerText(el)方法 编译文本节点、处理插值表达式
  16. - isDirective(attrName)方法 判断元素是否是指令
  17. - isTextNode(node)方法 判断节点是否是文本节点
  18. - isElementNode(node)方法 判断节点是否是元素节点
  20. 在new Compiler 的时候，传入了 vue 的实例，在compiler 构造函数内部存储实例和实例的$el，然后调用编译的方法，在编译的方法中根据传入的$el，去遍历它的所有子节点，然后根据节点类型是元素节点还是文本节点去执行对应的编译方法，执行完毕后判断遍历的当前节点是否有子节点，再递归调用。编译文本节点，通过正则表达式，获取到插值表达式的name，然后根据name去找实例的属性对应的值，替换进节点中；编译元素节点，遍历节点的所有属性，判断属性是否是指令，根据不同指令执行不同的编译方法。
  21. ```javascript
  22. class Complier {
  23.   constructor(vm) {
  24.     this.el = vm.$el
  25.     this.vm = vm
  26.     this.complier(this.el)
  27.   }
  28.   // 编译模板，处理文本节点和元素节点
  29.   complier (el) {
  30.     let childNodes = el.childNodes
  31.     Array.from(childNodes).forEach( node => {
  32.       if(this.isTextNode(node)) {
  33.         this.compilerText(node)
  34.       } else if(this.isElementNode(node)) {
  35.         this.complierElement(node)
  36.       }
  37.       // 判断node 节点是否有子节点，如果有子节点，要递归调用compiler
  38.       if(node.childNodes && node.childNodes.length) {
  39.         this.complier(node)
  40.       }
  41.     })
  42.   }
  43.   // 编译元素节点，处理指令
  44.   complierElement (node) {
  45.     // console.log(node.attributes)
  46.     // 遍历所有属性节点
  47.     Array.from(node.attributes).forEach( attr => {
  48.       // 判断是否是指令
  49.       let attrName = attr.name
  50.       if(this.isDirective(attrName)) {
  51.         // v-text => text
  52.         attrName = attrName.substr(2)
  53.         let key = attr.value
  54.         this.update(node, key, attrName)
  55.       }
  56.     })
  58.   }
  59.   // 调用指令的方法
  60.   update (node, key, attrName) {
  61.     let updateFn = this[attrName + 'Updater']
  62.     updateFn && updateFn(node, this.vm[key])
  63.   }
  64.   // 处理 v-text 指令
  65.   textUpdater (node, value) {
  66.     node.textContent = value
  67.   }
  68.   // 处理 v-model 指令 
  69.   modelUpdater (node, value) {
  70.     node.value = value
  71.   }
  72.   // 编译文本节点，处理插值表达式
  73.   compilerText (node) {
  74.     // console.dir(node)
  75.     let reg = /\{\{(.+?)\}\}/
  76.     let value = node.textContent
  77.     if(reg.test(value)) {
  78.       let key = RegExp.$1.trim()
  79.       node.textContent = value.replace(reg, this.vm[key])
  80.     }
  81.   }
  82.   // 判断元素属性是指令
  83.   isDirective (attrName) {
  84.     return attrName.startsWith('v-')
  85.   }
  86.   // 判断节点是否是文本节点
  87.   isTextNode (node) {
  88.     return node.nodeType === 3
  89.   }
  90.   // 判断节点是否是元素节点
  91.   isElementNode (node) {
  92.     return node.nodeType === 1
  93.   }
  94. }

8 Dep(Dependency)类

功能

  • 收集依赖，添加观察者
  • 通知所有观察者
  • subs 存储所有观察者 watcher
  • addSub(sub)方法 添加watcher

  • notify() 数据变化时通知所有的观察者

    1. class Dep {
    2. constructor () {
    3.   // 存储所有的观察者
    4.   this.subs = []
    5. }
    6. // 添加观察者
    7. addSub (sub) {
    8.   if(sub.update) {
    9.     this.subs.push(sub)
    10.   }
    11. }
    12. // 发送通知
    13. notify () {
    14.   this.subs.forEach( sub => {
    15.     sub.update()
    16.   })
    17. }
    18. }

    9 Watcher 类

    功能

  • 当数据变化触发依赖， dep 通知所有的 watcher 实例更新视图

  • 自身实例化的时候往 dep 对象中添加自己

结构

  • vm 实例
  • key 属性名称
  • cb 回调函数，如何更新视图
  • oldValue 记录数据变化之前的值

  • update()方法 更新视图，可以拿到最新的值，比对旧的值，发生变化的情况下再去更新视图

    1. class Watcher {
    2. constructor (vm, key, cb) {
    3.   this.vm = vm
    4.   // data 中的属性名称
    5.   this.key = key
    6.   // 更新视图的回调函数
    7.   this.cb = cb
    9.   // 把 watcher 对象记录到 Dep 类的静态属性 target 中
    10.   Dep.target = this
    11.   // 触发 get 方法，在 get 方法中调用 addSub 方法
    12.   this.oldValue = vm[key]
    13.   // 把target 设为空，防止重复渲染
    14.   Dep.target = null
    15. }
    17. // 当数据发生变化的时候更新视图
    18. update () {
    19.   let newValue = this.vm[this.key]
    20.   if(this.oldValue === newValue) {
    21.     return
    22.   }
    23.   this.cb(newValue)
    24. }
    25. }

    添加 watcher 到文本节点编译方法

    1. // compiler.js
    2. ...
    3. compilerText (node) {
    4.   ...
    5.     // 创建 watcher 对象，数据改变时更新视图
    6.     new Watcher(this.vm, key, newValue => {
    7.       node.textContent = newValue
    8.     })
    9.   ...
    10. }
    11. ...

    添加 watcher 到元素节点

    1. ...
    2. // 调用指令的方法
    3. update (node, key, attrName) {
    4.   let updateFn = this[attrName + 'Updater']
    5.   updateFn && updateFn.call(this, node, this.vm[key], key)
    6. }
    7. // 处理 v-text 指令
    8. textUpdater (node, value, key) {
    9.   node.textContent = value
    10.   new Watcher(this.vm, key, newValue => {
    11.     node.textContent = newValue
    12.   })
    13. }
    14. // 处理 v-model 指令 
    15. modelUpdater (node, value, key) {
    16.   node.value = value
    17.   new Watcher(this.vm, key, newValue => {
    18.     node.value = newValue
    19.   })
    20. }
    21. ...

    10 双向绑定

    通过给model指令处理函数绑定事件来更新 data 数据

    1. ...
    2. // 处理 v-model 指令 
    3. modelUpdater (node, value, key) {
    4.   ...
    5.   // 双向绑定
    6.   node.addEventListener('input', () => {
    7.     this.vm[key] = node.value
    8.   })
    9. }
    10. ...

    11 调试首次渲染

    1 new Vue 处断点，进入vue.js 的构造函数中，存储选项中到属性，遍历data 设置为setter/getter存储到属性中
    2 vue.js 实例化 Observer 对象，构造函数中传入data，observer 中遍历data 对象所有属性设为getter/setter，在每个属性遍历的时候新建 dep 实例，在getter 中如果 Dep 有target 就把 Dep 的target 添加到 dep 实例中的subs 中，在setter 中，递归遍历属性，并且调用 dep 的通知方法，使每个 subs 中的 watcher 都调用 update;
    3 vue.js 实例化 Compiler 对象，构造函数中传入 vue 实例，调用 compiler 方法编译模板，根据 vue 实例的 el，递归遍历所有子节点，根据不同的节点类型执行不同的编译函数;
    4 compiler.js 在节点编译函数中新建 Water 的实例，Watcher 的构造函数中传入当前节点，编译的 data 对应的 key，和数据更新后的回调函数；在 Watcher 构造函数中，把 watcher 的实例挂载到 Dep 对象的target 上，然后在存储旧值时，触发 vue 中data 某属性的 getter，接着会触发 observer 中 data 某属性的 getter；在 observer 的get 中，此时 Dep 有target，就会把 target 上的 watcher 放入 Dep实例的 subs 数组中； watcher 实例在构造函数的做完这些后销毁 target；
    5 至此，首次渲染完成

    12 调试数据改变

    1 在 observer 中的set 方法中 dep 发送通知的地方断点，此时dep 中的 notify 执行，变量 dep 实例中的watcher 组成的 subs 数组，调用每个 watcher 的 update 方法
    2 watcher.js 中的update 方法会判断旧值和新值是否相等，不相等则调用watcher 的回调函数，回调函数是在 compiler 中定义的
    3 compiler 中定义的回调函数执行，更新节点
    4 至此，数据变化视图变化的逻辑完成

    13 总结

    问题：

  • 给属性重新赋值成对象，是否是响应式的

属性重新赋值会走 observer 的 set 方法，set 方法中对于新的值会递归设置成响应式的数据

  • 给Vue 实例新增一个成员是否是响应式的

vue实例成员变成响应式是在new 一个 vue 实例时做的，在new 完实例以后，再去新增成员显然不会变成响应式的。在vue 官网文档中提及，vue 不允许添加根级别的响应式属性，但是可以使用 Vue.set(vm.someObject, ‘b’, 2)来添加嵌套对象的响应式属性