模拟Vue.js响应原理

文章说明：本文章为拉钩大前端训练营所做笔记和心得，若有不当之处，还望各位指出与教导，谢谢 !

准备工作

数据驱动
响应式的核心原理
发布订阅模式和观察者模式

数据驱动

数据响应式、双向绑定、数据驱动

数据响应式

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

双向绑定

1.数据改变，视图改变；视图改变，数据也随之改变
2.我们可以使用 v-model 在表单元素上创建双向数据绑定

数据驱动是 Vue 最独特的特性之一

 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图

数据响应式核心原理-Vue2

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

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>defineProperty</title>
</head>
<body>
  <div id="app">
    hello
  </div>
  <script>
    // 模拟 Vue 中的 data 选项
    let data = {
     
     
      msg: 'hello'
    }

    // 模拟 Vue 的实例
    let vm = {
     
     }

    // 数据劫持：当访问或者设置 vm 中的成员的时候，做一些干预操作
    // Object.defineProperty方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
    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)
  </script>
</body>
</html>

如果有一个对象中多个属性需要转换 getter/setter时，可以将这个对象里面多个属性进行遍历：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>defineProperty 多个成员</title>
</head>
<body>
  <div id="app">
    hello
  </div>
  <script>
    // 模拟 Vue 中的 data 选项
    let data = {
     
     
      msg: 'hello',
      count: 10
    }

    // 模拟 Vue 的实例
    let vm = {
     
     }

    proxyData(data)

    function proxyData(data) {
     
     
      // 遍历 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]
          }
        })
      })
    }

    // 测试
    vm.msg = 'Hello World'
    console.log(vm.msg)
  </script>
</body>
</html>

数据响应式核心原理-Vue3

MDN - Proxy vue3中的数据劫持使用的是es6中新增的proxy代理对象
直接监听对象，而非属性，因此把多个属性转换为getter和setter的时候不需要循环
ES 6中新增，IE 不支持，性能由浏览器优化

例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Proxy</title>
</head>
<body>
  <div id="app">
    hello
  </div>
  <script>
    // 模拟 Vue 中的 data 选项
    let data = {
     
     
      msg: 'hello',
      count: 0
    }

    // 模拟 Vue 实例
    let vm = new Proxy(data, {
     
     
      // 执行代理行为的函数
      // 当访问 vm 的成员会执行
      get (target, key) {
     
     // 第一个参数是代理的目标对象data，第二个参数是要访问对象data的属性
        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)
  </script>
</body>
</html>

设计模式：发布/订阅模式和观察者模式

两者本质相同，但是还是有区别的。

发布/订阅模式
- 订阅者
- 发布者
- 信号中心

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

Vue自定义事件：链接
vue自定义事件和node中的事件机制都是基于发布订阅模式的

// Vue 自定义事件，创建一个实例
    let vm = new Vue()
    // { 'click': [fn1, fn2], 'change': [fn] } vm内部以一个对象的 形式帮我们存储注册的这些事件

    // 注册事件(订阅消息)，同一个事件可以注册多个处理函数
    // $on仅仅是注册事件，此时事件处理函数并没有执行，对在vm里面存储事件名称和时间处理函数
    // 注册事件的时候可以注册多个事件，也可以注册多个处理函数
    vm.$on('dataChange', () => {
    
    
      console.log('dataChange')
    })// 事件名称  事件处理函数

    vm.$on('dataChange', () => {
    
    
      console.log('dataChange1')
    })
    // 在特定的时机可以$emit触发事件(发布消息)
    vm.$emit('dataChange')

以上很难分析出哪个是发布订阅模式中的订阅者，发布者，以及信号中心，其实这三者都是vm。

为了回顾这三者，看下兄弟组件通信过程：

eventBus.js

// 事件中心 
let eventHub = new Vue()

兄弟组件A和B:
ComponentA.vue:

// 发布者，发布一条代办消息
     addTodo: function () {
    
     
       // 发布消息(事件)
        eventHub.$emit('add-todo', {
    
     text: this.newTodoText })
       this.newTodoText = '' 
      }

ComponentB.vue:

// 订阅者 把发布的代办消息渲染到界面上来
     created: function () {
    
     
       // 订阅消息(事件) 
       eventHub.$on('add-todo', this.addTodo) 
      }

模拟Vue自定义事件的实现

// 事件触发器
    class EventEmitter {
    
    
      // 记录所有的事件和事件对应的处理函数
      constructor () {
    
    
        // { 'click': [fn1, fn2], 'change': [fn] }
        // 初始化为对象存储键值对
        this.subs = Object.create(null) // 设置为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')

以上只是模拟自定义事件的实现机制，并没有体现发布者和订阅者，只体现了事件中心也就是eventEmitter对象，发布者和订阅者可以通过兄弟组件传值的方式来体会。

观察者模式
只有发布者和订阅者，并且发布者需要定位者的存在

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

例子：

// 发布者-目标
    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 就会去调用观察者的方法，所以观察者模式的订阅者与发布者之间是存在依赖的。观察者模式定义了对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并自动更新。观察者模式属于行为型模式，行为型模式关注的是对象之间的通讯，观察者模式就是观察者和被观察者之间的通讯。可以用报纸期刊的订阅的例子来说明，当你订阅了一份报纸，每天都会有一份最新的报纸送过来，报社会根据订阅报纸的人数来发送报纸，有多少送多少。
发布/订阅模式由统一调度中心调用，因此发布者和订阅者不需要知道对方的存在。举个例子：比如你在微博上关注了某个明星，同时其他很多人也关注了这个明星，那么当这个明星发布动态的时候，微博就会为你们推送这条动态。这个明星就是发布者，你是订阅者，微博就是调度中心，你和这个明星是没有直接的消息往来的，全是通过微博来协调的

在这里插入图片描述

Vue响应式原理模拟

整体分析

Vue基本结构
打印Vue实例观察
整体结构

vue基本结构：

在这里插入图片描述

实现Vue

功能：
负责接收初始化的参数(选项)
负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter
负责调用 observer 监听 data 中所有属性的变化
负责调用 compiler 解析指令/插值表达式
结构
类名，属性，私有方法。

目录：

index.html:

<!DOCTYPE html>
<html lang="cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mini Vue</title>
</head>
<body>
  <div id="app">
    <h1>差值表达式</h1>
    <h3>{
   
   { msg }}</h3>
    <h3>{
   
   { count }}</h3>
    <h1>v-text</h1>
    <div v-text="msg"></div>
    <h1>v-model</h1>
    <input type="text" v-model="msg">
    <input type="text" v-model="count">
  </div>
  <script src="./js/vue.js"></script>
  <script>
      let vm = new Vue({
     
     
          el:'#app',
          data:{
     
     
              msg:'Hello Vue',
              count:100
          }
      })
  </script>
</body>
</html>

vue.js:

class Vue {
    
    
    constructor(options){
    
    
        // 1.通过属性保存选项的数据
        this.options = options || {
    
    }
        this.$data = options.data|| {
    
    }
        // 如果是字符串则获取dom对象返回
        this.$el = typeof options.el === 'string'? document.querySelector(options.el) : options.el
        // 2.把data中的成员转换成getter和setter，注入到vue实例中
        this._proxyData(this.$data)
        // 3.调用observer对象，监听数据的变化
        new Obsever(this.$data) //在observer写完后添加
        // 4.调用compiler对象，解析指令和差值表达式
    }
    _proxyData(data){
    
    
        // 遍历data中的所有属性
        Object.keys(data).forEach(key => {
    
    
            // 把data的属性注入到vue实例中
            Object.defineProperty(this,key,{
    
    
                enumerable:true,
                configurable:true,
                get(){
    
    
                    return data[key]
                },
                set(newValue){
    
    
                    if(newValue === data[key]){
    
    
                        return
                    }
                    data[key] = newValue
                }
            })
        })
    }
}

实现Obsever
功能：监听data中属性变化并进行处理。

负责把data选项中的属性转换成响应式数据(getter和setter)
data中的某个属性也是对象，把该属性转换成响应式数据
数据变化发送通知(如何发送通知需要用观察者模式实现)

结构：
在这里插入图片描述
目录：

observer.js:

class Observer {
    
    
    constructor (data) {
    
    
      this.walk(data)
    }
    walk (data) {
    
    
      // 1. 判断data是否是对象
      if (!data || typeof data !== 'object') {
    
    
        return
      }
      // 2. 遍历data对象的所有属性
      Object.keys(data).forEach(key => {
    
    
        this.defineReactive(data, key, data[key])
      })
    }
    defineReactive (obj, key, val) {
    
    
        let that = this //此时的this为Observer的实例data
        // 负责收集依赖，并发送通知
        let dep = new Dep()
        // 如果val是对象，把val内部的属性转换成响应式数据
      this.walk(val)
      Object.defineProperty(obj, key, {
    
    
        enumerable: true,
        configurable: true,
        get () {
    
    
            // 收集依赖
            Dep.target && dep.addSub(Dep.target)
          return val
        },
        set (newValue) {
    
    
          if (newValue === val) {
    
    
            return
          }
          val = newValue
          that.walk(newValue)
          // 发送通知
          dep.notify()
        }
      })
    }
  }

在index.html中引入:

<script src="./js/observer.js"></script>
<script src="./js/vue.js"></script>

因为vue.js要用到observer，故observer.js要放到vue.js前面

实现Compiler
功能：操作dom

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

结构：
在这里插入图片描述
compiler.js:

class Compiler{
    
    
    constructor(vm){
    
    
        // 记录模板
        this.el = vm.$el
        // 记录实例
        this.vm = vm
        // 调用Compiler对象时立即编译模板
        this.compile(this.el)
    }
    // 编译模板，处理文本节点和元素节点
    compile(el){
    
    
        let childNodes = el.childNodes
        // childNodes 是伪数组需要转化为数组
        Array.from(childNodes).forEach(node =>{
    
    
            // 处理文本节点
            if(this.isTextNode(node)){
    
    
                this.compileText(node)
            }else if(this.isElementNode(node)){
    
    
                // 处理元素节点
                this.compileElement(node)
            }
            // 判断node节点，是否有子节点，如果有子节点，要递归调用compile
            if(node.childNodes && node.childNodes.length){
    
    
                this.compile(node)
            }
        })
    }
    // 编译元素节点，处理指令
    compileElement(node){
    
    
        // console.log(node.attributes)
        // 遍历所有的属性节点
        Array.from(node.attributes).forEach(attr => {
    
    
            // 判断是否是指令
            let attrName = attr.name
            if(this.isDirective(attrName)){
    
    
                // v-text -->text
                attrName = attrName.substr(2)
                // 获取属性对应的值
                let key = attr.value
                this.update(node,key,attrName)
            }
        })
    }
    update(node,key,attrName){
    
    
        // 根据指令名加updater灵活调用对应方法
        let updateFn = this[attrName + 'Updater']
        updateFn && updateFn.call(this,node,this.vm[key],key) //把this指向改变成compiler对象，此时就能通过this获取到vm
    }
    // 处理 v-text 指令
    textUpdater(node,value,key){
    
    
        node.textContent = value
        new Watcher(this.vm,key,(newValue) => {
    
    
            node.textContent = newValue
        })
    }
    // 处理 v-model
    modelUpdater(node,value,key){
    
    
        node.value = value
        new Watcher(this.vm,key,(newValue) => {
    
    
            node.value = newValue
        })
        // 双向绑定
        node.addEventListener('input',() => {
    
    
            this.vm[key] = node.value
        })
    }
    // 编译文本节点，处理差值表达式
    compileText(node){
    
    
        // console.dir(node)
        // {
    
    { msg }}
        // . 匹配任意的单个字符，不包括换行
        // + 匹配前面修饰的字符出现一次或多次
        // ? 表示非贪婪模式，即尽可能早的结束匹配
        // 在正则表达式中，提取某个位置的内容，即添加()，进行分组 
        let reg = /\{\{(.+?)\}\}/
        let value = node.textContent
        if(reg.test(value)){
    
    
            // 使用RegExp的构造函数，获取第一个分组的内容，即.$1 trim 是去掉空格
            let key = RegExp.$1.trim() // key:msg
            // 将文本中的插值表达式替换成vue实例中属性对应的值，重新赋给文本节点
            node.textContent = value.replace(reg,this.vm[key])

            // 创建watcher对象，当数据改变更新视图
            new Watcher(this.vm,key,(newValue) => {
    
    
                node.textContent = newValue
            })
        }
    }
    // 判断元素属性是否是指令
    isDirective(attrName){
    
    
        return attrName.startsWith('v-')
    }
    // 判断节点是否是文本节点
    isTextNode(node){
    
    
        return node.nodeType === 3
    }
    // 判断节点是否是元素节点
    isElementNode(node){
    
    
        return node.nodeType === 1
    }
}

Dep实现
在这里插入图片描述
每一个响应式的属性都会创建一个对应的Dep对象，负责收集所有依赖于该属性的地方，所有依赖于该属性的位置都会创建watcher对象，所以Dep收集的就是依赖于该属性的watcher对象，在set方法中会通知依赖，当属性值发生变化的时候会调用Dep的notify发送通知调用watcher对象的update方法。
功能：

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

Dep.js:

class Dep{
    
    
    constructor(){
    
    
        // 存储所有观察者
        this.subs = []
    }
    // 添加观察者
    addSub(sub){
    
    
        if(sub && sub.update){
    
    
            this.subs.push(sub)
        }
    }
    // 发送通知
    notify(){
    
    
        // 遍历subs数组里的所有观察者，调用每一个观察者的update方法去更新视图
        this.subs.forEach(sub => {
    
    
            sub.update()
        })
    }
}

在observer中创建Dep对象，在observer.js中：defineReactive方法中，把data中的每一个属性创建一个dep对象，让dep对象收集依赖，并且在set方法中发送通知也就是调用dep对象的notify方法。代码在上面的observer.js当中
Watcher实现
在这里插入图片描述
功能：data中的每一个属性创建一个dep对象，在收集依赖的时候把依赖该数据的所有watcher(观察者)对象添加到dep对象中的subs数组里，在setter方法中会调用dep对象中的notify方法通知所有关联的watcher对象，watcher对象则负责更新对应的视图

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

vm: vue实例；key: 属性名 – > 属性值；cb: 不同的watcher对应不同的回调函数；oldValue:数据变化之前的值；update：更新视图

class Watcher {
    
    
    constructor(vm,key,cb){
    
    
        this.vm = vm
        // data中的属性名称
        this.key = key
        // 回调函数负责更新视图
        this.cb = cb

        // 把watcher对象记录到Dep类的静态属性target
        Dep.target = this
        // 触发get方法，在get方法中会调用addSub
        this.oldValue = vm[key]
        // 防止重复添加
        Dep.target = null
    }
    // 当数据发生变化的时候更新视图
    update(){
    
    
        let newValue = this.vm[this.key]
        if(this.oldValue === newValue){
    
    
            return
        }
        // 当数据变化时，需要将新的值传递给回调函数，更新视图
        this.cb(newValue)
    }
}

整体流程
问题：给属性重新赋值成对象，是否是响应式的
observer里把data中的属性转化为getter和setter，当数据变化的时候触发了set方法，就会通知变化，告诉Dep，然后Dep调用notify方法，notify方法中又去调用watcher里的update方法也就是发送通知，通知watcher数据发生变化，然后watcher里的update方法去更新视图。当创建watcher对象的时候，会把当前的watcher对象添加到Dep的subs数组当中，也就是收集依赖。
页面首次加载的时候会调用compiler里面的方法去更新视图。