手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

作者: 丽__ | 来源:发表于2022-02-17 16:46 被阅读0次

模拟 Vue.js 响应式原理

一、数据驱动

准备工作

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

数据驱动

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

二、数据响应式核心原理 -- Vue2 ------Object.defineProperty

Vue2.x

Vue 2.x 深入响应式原理：
https://cn.vuejs.org/v2/guide/reactivity.html
MDN - Object.defineProperty
浏览器兼容IE8以上（不兼容IE8）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>defineProperty</title>
</head>

<body>
    <div id="app">
        hello
    </div>
    <script>
        // 模拟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
                // 数据更改
                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 http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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) {
            Object.keys(data).forEach(key => {

                // 数据劫持：当访问或者设置vm中的成员的时候，做一些干预操作
                Object.defineProperty(vm, [key], {
                    // 是否可枚举（可遍历）
                    enumerable: true,
                    // 可配置（可以使用delete删除，可以通过defineProperty 重新定义）
                    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
                        // 数据更改
                        document.querySelector('#app').textContent = data[key]
                    }
                })
            })
        }

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

</html>

三、数据响应式核心原理 -- Vue3 ----- Proxy

MDN-Proxy:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
直接监听对象，而非属性
ES6 中新增，IE不支持，性能由浏览器优化

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>defineProperty</title>
</head>

<body>
    <div id="app">
        hello
    </div>
    <!-- vue2.x 数据响应式核心原理 -->
    <!-- <script>
        // 模拟Vue中的data选项
        let data = {
            msg: 'hello',
            count: 10
        }

        // 模拟Vue 实例
        let vm = {}
        proxyData(data)
        function proxyData(data) {
            Object.keys(data).forEach(key => {

                // 数据劫持：当访问或者设置vm中的成员的时候，做一些干预操作
                Object.defineProperty(vm, [key], {
                    // 是否可枚举（可遍历）
                    enumerable: true,
                    // 可配置（可以使用delete删除，可以通过defineProperty 重新定义）
                    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
                        // 数据更改
                        document.querySelector('#app').textContent = data[key]
                    }
                })
            })
        }

        // 测试
        vm.msg = 'Hello World'
        console.log(vm.msg);
    </script> -->
    <!-- vue3.x 数据响应式核心原理 -->
    <script>
        // 模拟Vue中的data选项
        let data = {
            msg: 'hello',
            count: 10
        }

        // 模拟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 (newValue === target[key]) return;
                target[key] = newValue
                // 数据更改
                document.querySelector('#app').textContent = target[key]
            }
        })

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

</html>

四、发布订阅模式

发布订阅模式和观察者模式，是两种设计模式，在 Vue 中有各自的应用场景，本质相同，但存在一定的区别

发布/订阅模式
- 订阅者
- 发布者
- 信号中心
  我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心“发布”（publish）一个信号，其他任务可以向信号中心“订阅”（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式（publish-subscribe pattern）”
Vue 的自定义事件
- https://v3.cn.vuejs.org/guide/component-custom-events.html

// Vue 自定义事件
        let vm = new Vue()

        // 注册事件（订阅消息）
        vm.$on( 'dataChange', () => {
            console.log( 'dataChange' )
        } )
        vm.$on( 'dataChange', () => {
            console.log( 'dataChange1' )
        } )
        // 触发事件
        vm.$emit('dataChange')

兄弟组件通信过程

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

        // ComponentA.vue
        // 发布者
        addTodo: function () {
            eventHub.$emit( 'add-todo', { text: this.newTodoText } )
            this.newTodoText = ''
        }

        // ComponentB.vue
        // 订阅者
        created: function() {
            // 订阅消息（事件）
            eventHub.$on( 'add-todo', this.addTodo )
        }

发布订阅模式

// 事件触发器
        class EventEmitter {
            constructor() {
                // {'click':[fn1,fn2],'change':[fn]}
                this.subs = Object.create( 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')

五、观察者模式

Vue 的响应式机制中使用了观察者模式，所以要了解观察者模式是如何实现的，观察者模式和发布订阅者模式的区别是没有事件中心，只有发布者和订阅者，并且发布者要知道订阅者的存在。

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

<script>
    // 发布者- 目标
    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()
</script>

总结

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

image.png

六、模拟Vue响应式原理 - 分析

整体分析：

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

image.png

Vue
- 把data中的成员注入到Vue实例，并且把data中的成员转换成getter和setter,Vue 内部会调用Observer和Compiler
Observer
- 能够对数据对象的所有属性进行监听，如果有变动可拿到最新值并通知Dep
Compiler
- 解析每个元素中的指令，以及插值表达式，并替换成相应的数据
Dep 发布者
- 添加观察者，当数据发生变化的时候，通知所有观察者
Watcher 观察者
- Watcher 内部有update方法负责更新视图

七、Vue

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

image.png

vue.js

class Vue {
  constructor(options) {
    // 1、通过属性保存选项的数据
    this.$options = options || {}
    this.$data = options.data || {}
    this.$el =
      typeof options.el === 'string'
        ? document.querySelector(options.el)
        : options.el
    // 2、把data中的成员转换成getter和setter，注入到vue实例中
    this._proxyData(this.$data)
    // 3、调用observer对象，监听数据的变化
    // 4、调用compiler对象，解析指令和插值表达式
  }
  _proxyData(data) {
    //  遍历data中的data属性
    Object.keys(data).forEach((key) => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return data[key]
        },
        set(newValue) {
          if (newValue === data[key]) {
            return
          }
          data[key] = newValue
        },
      })
    })
    // 把data的属性注入到vue实例中
  }
}

八、Observer

功能
- 负责把data选项中的属性转换成响应式数据
- data中的某个属性也是对象，把该属性转换成响应式数据
- 数据变化发送通知（结合观察者模式实现）
结构
- walk(data) 用来遍历所有属性
- defineEeactive(data,key,value) 定义响应式数据，通过调用此方法把属性转换成getter和setter
  
  image.png

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
    // 如果val 是对象，把val内部的属性转换成响应式数据
    this.walk(val)
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get() {
        return val
      },
      set(newValue) {
        if (newValue === val) {
          return
        }
        val = newValue
        // 将新的值也转换成响应式数据
        that.walk(newValue)
      },
    })
  }
}

九、compiler

功能
- 负责编译模板，解析指令和插值表达式
- 负责页面的首次渲染
- 当数据变化后重新渲染视图
结构
- el
- vm
- compile(el) 遍历dom对象的所有节点，并且判断这些节点，如果是文本节点解析插值表达式，如果是元素节点解析指令
- compileElement(node) 如果是元素节点，解析指令
- compileText(node) 如果是文本节点，解析插值表达式
- isDirective(attrName) 判断当前属性是否是指令
- isTextNode(node) 判断是文本节点
- isElementNode(node) 判断是元素节点

image.png

class Compiler {
  constructor(vm) {
    this.el = vm.$el
    this.vm = vm
    this.compile(this.el)
  }
  // 编译模板，处理文本节点和元素节点
  compile(el) {
    let childNodes = el.childNodes
    Array.from(childNodes).forEach((node) => {
      if (this.isTextNode(node)) {
        //判断是否为文本节点
        this.compileText(node) //处理文本节点
      } else if (this.isElementNode(node)) {
        //判断是否为元素节点
        this.compileElement(node) //处理元素节点
      }

      // 判断node节点是否有子节点，如果有子节点，要递归调用compiler
      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) {
    let updateFn = this[attrName + 'Updater']
    updateFn && updateFn(node, this.vm[key])
  }
  // 处理v-text指令
  textUpdater(node, value) {
    node.textContent = value
  }
  // 处理v-model
  modelUpdater(node, value) {
    node.value = value
  }
  // 编译文本节点，处理插值表达式
  compileText(node) {
    // console.dir(node)
    // {{ msg }}
    let reg = /\{\{(.+?)\}\}/
    let value = node.textContent
    if (reg.test(value)) {
      let key = RegExp.$1.trim()
      node.textContent = value.replace(reg, this.vm[key])
    }
  }
  // 判断元素属性是否为指令  判断是否为v- 开头
  isDirective(attrName) {
    return attrName.startsWith('v-')
  }
  // 判断节点是否为文本节点
  isTextNode(node) {
    return node.nodeType === 3
  }
  // 判断节点是否为元素节点
  isElementNode(node) {
    return node.nodeType === 1
  }
}

十、Dep

Dep(Dependency)

image.png
功能
- 收集依赖，添加观察者
- 通知所有观察者
结构
- subs 是一个数组，用来存储Dep中的所有的watcher
- addSub(sub) 添加watcher
- notify() 发布通知
  
  image.png

class Dep{
    constructor(){
        // 存储所有的观察者
        this.subs = []
    }
    // 添加观察者
    addSub(sub){
        if(sub && sub.update){
            this.subs.push(sub)
        }
    }
    // 发送通知
    notify(){
        this.subs.forEach(sub =>{
            sub.update()
        })
    }
}

十一、Watcher

image.png

功能
- 当数据变化触发依赖，dep通知所有的Watcher实例更新视图
- 自身实例化的时候往dep对象中添加自己
结构
- vm 实例
- key data中的属性名称
- cb 回调函数
- oldValue 数据变化之前的值
- update()
  
  image.png

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

十二、问题总结

问题
- 给属性重新赋值成对象，是否是响应式的（是）
- 给Vue实例新增一个成员是否是响应式的（不是）
  
  image.png
回顾整体流程

image.png

十三、完整案例

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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/dep.js"></script>
    <script src="js/watcher.js"></script>
    <script src="js/compiler.js"></script>
    <script src="js/observer.js"></script>
    <script src="js/vue.js"></script>
    <script>
        let vm = new Vue( {
            el: '#app',
            data: {
                msg: 'Hello Vue',
                count: 100,
                person: {
                    name: 'jack'
                }
            }
        } )
        console.log( vm.msg )
        
        // vm.msg = { text: '123' }
    </script>
</body>

</html>

vue.js

class Vue {
  constructor(options) {
    // 1、通过属性保存选项的数据
    this.$options = options || {}
    this.$data = options.data || {}
    this.$el =
      typeof options.el === 'string'
        ? document.querySelector(options.el)
        : options.el
    // 2、把data中的成员转换成getter和setter，注入到vue实例中
    this._proxyData(this.$data)
    // 3、调用observer对象，监听数据的变化
    new Observer(this.$data)
    // 4、调用compiler对象，解析指令和插值表达式
    new Compiler(this)
  }
  _proxyData(data) {
    //  遍历data中的data属性
    Object.keys(data).forEach((key) => {
      Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get() {
          return data[key]
        },
        set(newValue) {
          if (newValue === data[key]) {
            return
          }
          data[key] = newValue
        },
      })
    })
    // 把data的属性注入到vue实例中
  }
}

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
    // 收集依赖并且发送通知
    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()
      },
    })
  }
}

compiler.js

class Compiler {
  constructor(vm) {
    this.el = vm.$el
    this.vm = vm
    this.compile(this.el)
  }
  // 编译模板，处理文本节点和元素节点
  compile(el) {
    let childNodes = el.childNodes
    Array.from(childNodes).forEach((node) => {
      if (this.isTextNode(node)) {
        //判断是否为文本节点
        this.compileText(node) //处理文本节点
      } else if (this.isElementNode(node)) {
        //判断是否为元素节点
        this.compileElement(node) //处理元素节点
      }

      // 判断node节点是否有子节点，如果有子节点，要递归调用compiler
      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) {
    let updateFn = this[attrName + 'Updater']
    updateFn && updateFn.call(this, node, this.vm[key], key)
  }
  // 处理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)) {
      let key = RegExp.$1.trim()
      node.textContent = value.replace(reg, this.vm[key])

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

dep.js

class Dep{
    constructor(){
        // 存储所有的观察者
        this.subs = []
    }
    // 添加观察者
    addSub(sub){
        if(sub && sub.update){
            this.subs.push(sub)
        }
    }
    // 发送通知
    notify(){
        this.subs.forEach(sub =>{
            sub.update()
        })
    }
}

watcher.js

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

手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

模拟 Vue.js 响应式原理

一、数据驱动

二、数据响应式核心原理 -- Vue2 ------Object.defineProperty

三、数据响应式核心原理 -- Vue3 ----- Proxy

四、发布订阅模式

五、观察者模式

六、模拟Vue响应式原理 - 分析

七、Vue

八、Observer

九、compiler

十、Dep

十一、Watcher

十二、问题总结

十三、完整案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

大前端

手写 Vue Router、手写响应式实现、虚拟 DOM 和 D

模拟 Vue.js 响应式原理

一、数据驱动

二、数据响应式核心原理 -- Vue2 ------Object.defineProperty

三、 数据响应式核心原理 -- Vue3 ----- Proxy

四、发布订阅模式

五、观察者模式

六、模拟Vue响应式原理 - 分析

七、Vue

八、Observer

九、compiler

十、Dep

十一、Watcher

十二、问题总结

十三、完整案例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

大前端

三、数据响应式核心原理 -- Vue3 ----- Proxy