Vue 响应式原理模拟

最新推荐文章于 2024-04-17 14:17:09 发布
最新推荐文章于 2024-04-17 14:17:09 发布
阅读量185 收藏
点赞数
分类专栏： vue # vue源码解析 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38074118/article/details/111766032
版权

Vue 响应式模拟原理

<!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>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: 20,
        items: ['a', 'b', 'c']
      }
    })
  </script>
</body>
</html>

数据驱动

响应式的核心原理

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

数据驱动

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

数据响应式的核心原理

Vue2.0 Object.defineProperty
Object.defineProperty 是 ES5 中一个无法 shim 的特性，
这也就是 Vue 不支持 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(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>

多个属性支持数据劫持

<!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>

Vue 3.0 数据劫持 proxy

proxy 直接监听对象，而非属性
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) {
        // target 代理的目标对象 key是访问的那个属性
        console.log('get, key: ', key, target[key])
        return target[key]
      },
      // 当设置 vm 的成员会执行
      set (target, key, newValue) {
        // 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>

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

发布订阅模式
订阅者
发布者
信号中心 —数据存储处

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()
// 发布者
addTODo:function(){
    // 发布事件
    eventHub.$emit("add-todo",{text:this.newTodoText})
    this.newTodoText = ""
}
// 订阅者
create:function(){
    // 订阅事件
    eventHub.$on('add-todo',this.addTodo)
}

模拟Vue 自定义事件的实现

    // 模拟事件中心
    // 发布者
    class EventEmitter{
        constructor(){
            // 订阅者 {eventType:[handler1,handler2]}
            // {'click':[fn1,fn2],"change":[fn]}
            this.subs = {}
        }
        // 订阅通知
        $on (eventType,handler){
            // 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')

观察者模式

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

// 发布者 - 目标
class Dep{
    constructor(){
        // 记录所有的订阅者
        this.subs = []
    }
    addSub(sub){
       // 将传递过来的订阅者存储到subs中
       // 存储之前需要先判断是否含有update方法
       if(sub&&sub.update){
           this.subs.push(sub)
       }
    }
    notify(){
       // 当事件发生时，调用notify方法，遍历所有的subs，调用对应的update方法
       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()

Vue响应式原理模拟

整体分析
vue基本结构
打印vue实例观察
整体结构
在这里插入图片描述

Vue 将data中的成员注入到Vue实例，并且把data中的成员转成getter/setter
Observer 能够对数据对象的所有属性进行监听，如有变动可以拿到最新值并通知Dep 需要模拟get set
注入到vue实例， d a t a , data, data,options,$el

模拟vue实现
Vue 功能

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

结构

 <!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/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: 'zs' }
      }
    })
    console.log(vm)

    console.log(vm.msg)
    // vm.msg = { test: 'Hello' }
    vm.test = 'abc'
  </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): el
        // 2. 把data中的成员转换成getter和setter，注入到vue实例中
        this._proxyData(this.$data)
        // 3. 调用observer对象，监听数据的变化
        // 4. 调用compiler对象，解析指令和插值表达式
    }

    _proxyData(data){
      // 遍历data中的所有属性
      Object.keys(data).forEach(key=>{
        // 将data的属性注入到vue实例中
        Object.defineProperty(this, key, {
            // configrable 描述属性是否配置，以及可否删除
            // enumerable 描述属性是否会出现在for in 或者 Object.keys()的遍历中
            enumerable: true,
            configurable: true,
            get(){
                return data[key]
            },
            set(newValue){
               if(newValue === data[key]){
                  return
               }
               data[key] = newValue
            }
        })
      })
    }
}

observer
功能

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

结构

Observer
walk（data）defineReactive（data，key，value）
// 负责数据劫持，监听data中的变化作出处理
// 把$data中的成员 转换成getter/setter


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内部的属性转换成响应式数据，将data数据里的对象结构转换成响应式的
       this.walk(val)
       Object.defineProperty(obj,key,{
           enumerable:true,
           configurable:true,
           get(){
               // 不使用obj[key]是因为会发送死递归，所以传val
               return val
           },
           set(newValue){
             if(newValue === val){
                return
             }
             val = newValue
             // 将从新赋值为对象结构也转换为响应式结构
             that.walk(newValue)
             // 发送通知
           }
       })
    }
}

将对应data中的数据转换成get，set方式

Compiler
功能

负责模板编译
负责页面的首次渲染
当数据变化后重新渲染视图

结构

Compiler
elvm
compile(el)
compileElement(node)
compileText(node)
isDirective（attrName）
isTextNode（node）
isElementNode（node）
不使用虚拟dom，直接改变dom结构

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节点，是否有子节点，若有，递归调用compile
           if(node.childNodes&&node.childNodes.length){
               this.compile(node)
           }
       })
    }

    // 编译元素节点，处理指令
    compileElement(node){
       // 根据attributes 找到带有v-开头的属性节点
       // 遍历所有的属性节点
       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])
       }

    }

    // 判断元素属性是否是指令
    isDirective(attrName){
       // 判断是不是以v-开头
       return attrName.startsWith('v-')
    }

    // 判断是否为文本节点
    isTextNode(node){
        // nodeType 3是文本
        return node.nodeType === 3
    }

    // 判断节点是否是元素节点
    isELementNode(node){
        // nodeType 1 是元素节点
        return node.nodeType === 1
    }
}

Dep
功能

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

结构

Dep
Subs
addSub(sub)
notify()

class Dep{
    constructor(){
        // 存储所有的观察者
        this.subs = [];
    }

    // 添加观察者
    addSub(sub){
      if(sub && sub.update){
        this.subs.push(sub)
      }
    }

    // 发送通知
    notify(){
      this.subs.forEach(sub =>{
          sub.update()
      })
    }
}

Watcher
功能

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

结构

Watcher
vmkeycboldValue
update（）

 class Watcher{
     constructor(vm,key,callback){
         this.vm = vm
         // data中的属性名称
         this.key = key
         this.callback = callback

         // 将watcher对象记录到Dep对象中的静态属性target去
         // 触发get方法，在get方法中会调用addSub
         Dep.target = this
         this.oldValue = vm[key]
     }
     // 当数据发生变化的时候更新视图
     update(){
         let newValue = this.vm[this.key]
         if(this.oldValue === newValue){
            return
         }
         this.callback(newValue)
     }
 }

当数据改变时，Dep通知所有的观察者重新渲染视图

双向绑定机制

数据发生变化，更新视图
视图发生变化，更新数据
文本框发生变化，触发一个事件，从新赋值给data的msg
触发input事件，会将文本框的值取出，从新赋值给vm.msg，触发了响应式机制

modelUpdater(node,value,key){
        node.value = value
        new Watcher(this.vm,key,(newValue)=>{
            node.value = newValue
        })
        // 双向绑定
        node.addEventListener('input',()=>{
            this.vm[key] = node.value
        })
    }

首次渲染

首次渲染会将 所有内容渲染到界面

直到执行 new Vue，进入Vue的构造函数，执行_proxyData,将所有的值添加到vue实例中

执行Observer，将所有的值添加set，get，执行到defineProperty，将所有的值添加到Dep的观察者对象

进入compiler解析对应模板，compile处理所有的文本节点，找到需要处理的v-节点，处理到_proxyData中的get()方法

此节点渲染完成之后，进入Watcher对象，进行监听，等待数据响应执行对应回调，

进入Watcher对象，执行到Dep.target，Dep.target执行的是对应的Watcher对象

this.oldValue，访问的就是Observer的get方法	，再给dep设为null

数据改变

数据改变时，执行到observer的 set方法  -------- dep.notify方法
找到dep对应的sub观察者对应的update方法，
找到对应update方法，进行判断前后的值是否相同，执行到compiler的对应watcher中的newValue，
更新dom的值执行到对应绑定的回调中

总结

在这里插入图片描述

Vue.js响应式原理（三）——发布订阅模式和观察者模式
xiaozidewawa的博客
09-03 3741
发布/订阅模式 订阅者 发布者 信号中心 我们假定，存在一个“信号中心”，某个任务执行完成，就向信号中心发布（publish）一个信号，其他任务可以向信号中心订阅（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做“发布/订阅模式”（publish-subscribe pattern） 常见的发布/订阅模式：Vue 的自定义事件、node的事件处理机制。 let vm = new Vue() vm.$on('dataChange', () => { console.lo
VUE响应式原理
qq_42489251的博客
10-15 1406
Vue的响应式原理核心是通过ES5的保护对象的Object.defineProperty中的访问器属性中的get和set方法，data中声明的属性都被添加了访问器属性，当读取data中的数据时自动调用get方法，从实际保存数据的半隐藏属性中，读取出现在的属性值，return外部；自动调用set方法，检测到数据的变化，会通知观察者Watcher，观察者Watcher自动触发重新render当前组件（子组件不会重新渲染），生成新的虚拟Dom树，Vue框架会遍历并对比新虚拟DOM树和旧虚拟DOM树中每个节点的差别
【Vue 响应式原理】发布订阅模式、观察者模式
zimeng303的博客
12-13 4447
响应式原理 课程目标 模拟 Vue 响应式原理。 准备工作 数据驱动 数据响应式 数据模型仅仅是普通的 JavaScript 对象，而当我们修改数据时，视图会进行更新，避免了繁琐的 DOM 操作，提高开发效率。 双向绑定 数据改变，视图改变；视图改变，数据也随之改变 我们可以使用 v-model 在表单元素上创建双向数据绑定 数据驱动（Vue 最独特的特性之一） 开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图 响应式的核心原理 Vue 2.x – 基于 Object.d
​vue中的观察者模式和发布订阅者模式​
包磊磊的博客
01-02 4238
观察者模式 目标者对象和观察者对象有相互依赖的关系，观察者对某个对象的状态进行观察，如果对象的状态发生改变，就会通知所有依赖这个对象的观察者， 目标者对象Subject，拥有方法：添加 / 删除 / 通知Observer； 观察者对象Observer，拥有方法：接收Subject状态变更通知并处理； 目标对象Subject状态变更时，通知所有Observer。 Vue中响应式数据变化是观察者模式 每个响应式属性都有dep，dep存放了依赖这个属性的watcher，watcher...
vue 响应式原理 发布订阅模型 对象赋值
wangc_gogo的博客
07-20 343
vue响应式原理主要靠两点： //vue响应是原理 //每个vue都包含一个对象实例，这个对象实例拥有defineProperty（）监听属性的改变并进行赋值操作； Object.keys(obj).forEach(key=>{ let value=obj[key]; Object.defineProperty(obj,key,{ ...
第16节，我都知道现在的盖房子都是按模块进行的，那我们搞前端vue开发又是怎样的呢，嘘，小声点别暴露了。
cyhlili100的博客
11-03 534
[video(video-6ibAJuYd-1604379072738)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=969636042&page=16)(image-https://ss.csdn.net/p?http://i1.hdslb.com/bfs/archive/442a5be2770107c47b3f83a6f317ce8e362f7664.jpg)(title-2021【前端VUE框架】vue实现年入3
Vue 响应式原理
php_martin的博客
08-13 532
Vue 响应式原理
Vue 响应式实现原理深入浅出
小王的技术库
09-30 2415
vue 是一个易上手的框架，许多便捷功能都在其内部做了集成，其中最有区别性的功能就是其潜藏于底层的响应式系统。组件状态都是响应式的 JavaScript 对象。当更改它们时，视图会随即更新，这让状态管理更加简单直观。那么，Vue 响应性系统是如何实现的呢？本文也是在阅读了 Vue 源码后的理解以及模仿实现，所以跟随作者的思路，我们一起由浅入深的探索一下vue吧！本文 Vue 源码版本：2.6.14，为了便于理解，代码都最简化。方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
浅谈Vue2.0响应式原理
qq_38019052的博客
10-11 557
Vue2.0响应式原理学习笔记
vue响应式核心原理手写源码
01-11
本文将深入探讨Vue响应式原理，并通过手写源码的方式帮助你理解这一关键机制。 Vue响应式系统的核心在于数据绑定和依赖追踪。当Vue实例创建时，它会遍历所有声明的data属性，并对它们进行观测（Observation）。这个...
vue a标签点击实现赋值方式
12-28
如下所示： v-for=“kf in kefu” function copy_fun(copy){ //参数copy是要复制的文本内容 上面的方法就可用了，亲测可用！ 补充知识：VUE 给类似a标签加点击事件不跳转的问题 VUE的@click事件修饰符 运用： .prevent 阻止默认行为 <a>点击</a> .stop 阻止冒泡，只执行 start 不执行 end <div id=app click=end> <input type=button
Vue响应式原理探究之“发布-订阅”模式
weixin_42296161的博客
08-26 3389
在面试题中经常会出现与“发布订阅”模式相关的题目，比如考察我们对Vue响应式的理解，也会有题目直接考验我们对“发布订阅”模式或者观察者模式的理解，甚至还会有一些手写算法题。笔者就在今年三月参加某安全公司的面试时被要求手写代码实现“发布订阅”模式，当时由于没有准备没有回答上来，悔不该当初。由此可见“发布订阅”模式是一个非常重要的设计模式，接下来我们一起学习下吧。...
vue发布订阅者模式(观察者模式)
最新发布
qq_48546536的博客
04-17 573
Vue数据响应式系统总体来说分为两步：1、劫持数据；2、将数据改变要触发的回调函数与数据关联起来。observe 函数的功能就是劫持数据，让数据在被读取时收集依赖，在改变时触发依赖。如果数据为纯对象，则将其属性转变成访问器属性；如果数据是数组类型，则通过重写能够改变自身的方法来实现。对象添加、删除属性以及数组通过直接赋值的方式改变并不会触发依赖，这时要使用 Vue.set()、Vue.delete() 方法来操作。Dep 函数是用来生成盛放依赖的容器。
vue @click 赋值_vue 手写一个时间选择器
weixin_39610353的博客
12-12 575
vue 手写一个时间选择器最近研究了 DatePicker 的实现原理后做了一个 vue 的 DatePicker 组件，今天带大家一步一步实现 DatePicker 的 vue 组件。原理 DatePicker 的原理是——计算日历面板中当月或选中月份的总天数及前后月份相近的日子，根据点击事件计算日历面板显示内容，以及将所选值赋值给<input/>标签。实现CSS 代码于文章末尾处1...
从Vue层面 - 解析发布订阅模式和观察者模式区别
铁锤妹妹的博客
07-26 3512
观察者模式和发布订阅模式作为日常开发中经常使用到的模式，我一直不能做到很好的区分。最近在看Vue的源码，里面设计到了观察者模式，比较感兴趣，就去学习了下，这里做个总结吧。
手写实现vue 发布 订阅模式和观察者模式
woyebuzhidao321的博客
12-09 1450
发布 订阅模式 // 事件触发器 class EventEmitter { constructor () { // { 'click': [fn1, fn2], 'change': [fn] } this.subs = Object.create(null) } // 注册事件 $on (eventType, handler) { debugger this.subs[eventTyp
观察者模式与发布订阅模式的相同点和不同点
qq_32021429的博客
11-23 256
观察者模式与发布订阅模式的联系和区别 有人说观察者模式是发布订阅的升级版，也有人说发布订阅是进阶版的观察者模式，但是无论是观察者模式还是发布订阅模式，它们都是定义了对象之间的一种一对多的依赖关系。 观察者模式 当目标对象的状态发生改变时，所有它里面的被观察的对象，都会得到通知，并执行相应的操作。 // 目标对象类 function Sub() { this.subs = []; // 观察者列表 } Sub.prototype = {
Vue 发布/订阅 与 观察者模式
Gibson的博客
12-29 1355
现在网上很多文章都讲不清楚什么是发布/订阅和观察者模式，要不就是复制粘贴过来的，百度都能查处一大推一模一样的文章。很气愤！！！ 那么我将根据自己的理解去解释发布/订阅和观察者模式，如果有大佬觉得不对，欢迎在评论区留下宝贵意见 发布/订阅模式 发布/订阅模包含： 发布者 订阅者 信号中心 假设你要买房子，但是你有没有房源信息，那么你会找到谁？你肯定会去问房屋中介，那么这个房屋中介就是一个信号中心。那么这个房子的主人也就是房东是一个发布者（publish），你或者其他需要买房的人就是订阅者（subs
vue响应式依赖的两种技术之-发布订阅模式的实现
codingWeb的博客
02-05 377
vue响应式依赖的两种技术： 1.Vue中修改数据，Vue内部是如何监听message数据的变化的 Object.defineProperty() -> 监听对象属性的改变 2.当数据发生改变，Vue是如何知道要通知哪些数据，界面发生刷新 发布订阅模式 继续上篇个人博客，实现下发布订阅模式， 发布订阅模式实现的时候有个坑：数组坍陷问题 这里采用es6的新语法封装发布订阅类，使用for...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值