Vue的学习Ⅺ（响应式原理）

我会带着你远行 2023-03-13 06:47 14阅读 0赞

想要搞定响应式原理必须搞定两个问题：

### 1、当Vue里面的data数据改变时，Vue内部是如何监听数据的改变？ ###

**Object.defineProperty里的set与get方法 -> 监听对象属性的改变**

let obj = { 								// 定义的obj对象
      name: '涂涂',
      age: 18,
      gender: 'male'
    }; Object.keys(obj).forEach(key => { 		// 遍历得到obj对象的每个key
      let value = obj[key]; // 取出key对应的键值 Object.defineProperty(obj, key, { 		// 使用Object.defineProperty来对obj对象里面的属性实施监听 set(newValue) { 						// 只要属性名一改变，则调动set方法
          console.log('set');
          value = newValue;
        }, get() { 								// 只要属性名一调用，则调动get方法
          console.log('get');
          return value;
        }
      })
    });

### 2、当数据发生改变后，Vue是如何知道需要通知哪些地方进行数据更新呢？ ###

**发布者订阅者模式**

let obj = { 
      name: '涂涂',
      age: 18,
      gender: 'male'
    }; class Dependence {             		// 发布者 constructor() { 
        this.subscribes =[];      		// 记录订阅者
      }
    
      addSub(watcher) { 				 	// 给发布者添加订阅者 
        this.subscribes.push(watcher)
      }
    
      notify() { 						// 当数据发生改变时调用notify方法，通知订阅者数据已改变 this.subscribes.forEach(item => { 
          item.undate();
        })
      }
    }
    
    class Watcher {                  // 订阅者 constructor(value) { 			// 订阅者本身的讯息
        this.value= value;	
      }
    
      undate() { 					// 当数据改变时，订阅者的具体操作
        console.log('属性值: ' + this.value + ' 发生update');
      }
    }
    
    Object.keys(obj).forEach(key => { 
      let value = obj[key];
      const dep = new Dependence();		// 实例化发布者，注意这里必须是为每个属性都添加一个发布者，当那个属性对应的发布者发生改变的时候对应的订阅者就会收到讯号
      dep.addSub(new Watcher(value)); // 添加订阅者 Object.defineProperty(obj, key, { 
        set(newValue) { 
          value = newValue;
          
          dep.notify()					// 当数据改变时，发布者调用notify方法告诉订阅者数据已改变
        }, get() { 
          return value;
        }
      })
    });

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]  
**开始时：**

data数据 .

el模板 ,

通知变化 ,

通知变化 ,

添加订阅者 ,

new Vue .

Observer .

Compile ,

Dep ,

Watcher ,

**数据改变时：**

data数据 .

el模板 ,

通知变化 ,

初始化 ,

通知变化 ,

添加订阅者 ,

更新视图 ,

new Vue .

Observer .

Compile ,

Dep ,

View ,

Watcher ,

**要注意这里的一个属性对应一个发布者**

本文只用于个人学习与记录

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTk2OTc3Nw_size_16_color_FFFFFF_t_70]: /images/20230312/b009f6469ff6427095db611487cb9d68.png

发表评论取消回复

表情：

评论列表（有 0 条评论，14人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue响应式原理

响应式原理 * 概述 * 如何追踪变化 * 检测变化的注意事项 * 声明响应式属性 * 异步更新队列概述现在是时候深入一下了！Vu...

小灰灰/ 2024年04月17日 05:49/ 0 赞/ 88 阅读

相关简述Vue的响应式原理

. 当一个Vue实例创建时，vue会遍历data选项的属性，用 Object.defineProperty 将它们转为 getter/setter并且在内部追踪相关依赖...

拼搏现实的明天。/ 2024年04月17日 05:26/ 0 赞/ 62 阅读

相关 Vue响应式原理

一、简介 > Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简

ゞ浴缸里的玫瑰/ 2023年06月22日 13:47/ 0 赞/ 48 阅读

相关 vue学习之深入响应式原理

vue的响应式原理当你把一个普通的 JavaScript 对象传入 Vue 实例作为 `data` 选项，Vue 将遍历此对象所有的属性，并使用 [`Object.def

待我称王封你为后i/ 2023年05月30日 08:49/ 0 赞/ 14 阅读

相关 Vue的学习Ⅺ（响应式原理）

想要搞定响应式原理必须搞定两个问题： 1、当Vue里面的data数据改变时，Vue内部是如何监听数据的改变？ Object.defineProperty里的set与ge

我会带着你远行/ 2023年03月13日 06:47/ 0 赞/ 15 阅读

相关 vue响应式原理

//响应式原理 let obj = { name: 'yangedong', age: 12 } O

我不是女神ヾ/ 2022年12月29日 09:45/ 0 赞/ 245 阅读

相关 Vue 响应式原理模拟

![e7f790c9060b53fa65d38f59830c7611.png][] 转载自：昆兰 https://juejin.cn/post/69461205117

喜欢ヅ旅行/ 2022年11月18日 05:58/ 0 赞/ 313 阅读

相关 Vue数据响应式原理

响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。在具体实现上，vue用到了几个核心部件： 1. Observer

灰太狼/ 2022年10月16日 09:53/ 0 赞/ 285 阅读

相关详解Vue响应式原理

摘要：搞懂Vue响应式原理！作者：[浪里行舟][Link 1] 原文：[深入浅出Vue响应式原理][Vue] [Fundebug][]经授权转载，版权归原作

r囧r小猫/ 2021年12月11日 06:37/ 0 赞/ 407 阅读

相关 vue响应式原理

vue的响应式，数据模型仅仅是普通的Javascript对象。当你修改它们时，视图会进行更新那么如何追踪变化：当把普通的js对象传给vue实例的data选项，Vue将遍

布满荆棘的人生/ 2021年09月30日 10:02/ 0 赞/ 413 阅读