手写vue响应式原理

响应式原理图：
1.通过Object.defineProperty来实现监听数据的改变和读取（属性中的getter和setter方法）实现数据劫持；

2.观察者模式（发布者-订阅者）
观察者(订阅者) – Watcher：
update()：当事件发生时，具体要做的事情

目标(发布者) – Dep:
①deps 数组：存储所有的观察者
②addDep()：添加观察者
③notify()：当事件发生，调用所有观察者（全部的依赖）的 update() 方法

3.当数据发生改变通过发布者订阅者模式来进行通知进行界面刷新

直接看代码：

<script>//依赖let Dep = (function() {function Dep() {this.deps = [];  // 用来存储全部的依赖watcher};// 收集依赖Dep.prototype.addDep = function (watcher) {this.deps.push(watcher);console.log("收集依赖的列表", this.deps);};// 通知依赖Dep.prototype.notify = function(params) {console.log('params', params)this.deps.forEach(item => {item.update(params);  //  通过watch中的update，通知页面更新});};return Dep;})();  // 立即执行函数体//属性全部的依赖就是watcherlet Watcher = (function() {function Watcher(id) {this.id = id;};Watcher.prototype.update = (value) => {console.log("数据改变了，通知我要更新", value)document.getElementById("text").innerText = value;};return Watcher;})();let obj = {name: "nihao",age: 18};let dep = new Dep();    // 新建用于存储watcher的数据let value = obj.age;// 响应式方法Object.definePropertyObject.defineProperty(obj, "age", {get() {let watcher = new Watcher("1"); // 实例化一个watcherconsole.log('watcher', watcher)dep.addDep(watcher);  // 收集依赖return value;  // return的值不能直接object.age，会溢出},set(value) {console.log('set调取')dep.notify(value);},});console.log(obj.age)  //  读取age，会调取get方法obj.age = 23;  // 改变age，会调取set方法document.getElementById("app").addEventListener("click", () => {obj.age = (Math.random()*20).toFixed();})</script>

手写vue响应式原理相关推荐

Vue响应式原理探究之“发布-订阅”模式
前言在面试题中经常会出现与"发布订阅"模式相关的题目,比如考察我们对Vue响应式的理解,也会有题目直接考验我们对"发布订阅"模式或者观察者模式的理解,甚至还会 ...
【2019 前端进阶之路】深入 Vue 响应式原理，活捉一个 MVVM
作者:江三疯,专注前端开发.欢迎关注公众号前端发动机,第一时间获得作者文章推送,还有各类前端优质文章,致力于成为推动前端成长的引擎. 前言作为 Vue 面试中的必考题之一,Vue 的响应式原理,想必 ...
vue 数组删除 dome没更新_详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...
Vue响应式原理的简单模型
1.前言最近在梳理vue响应式的原理,有一些心得,值得写一篇博客出来看看. 其实之前也尝试过了解vue响应式的原理,毕竟现在面试看你用的是vue的话,基本上都会问你几句vue响应式的原理.以往学习这 ...
Vue响应式原理（看这一篇就够了）
你肯定听说过Object.denfineProperty或是Proxy\reflect,这的确是在VUE响应式原理中起重要作用的一部分代码,但这远远不能代表整个流程的精妙.上图: 不懂没关系,请往下看 ...
Vue源码--解读vue响应式原理
原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...
深入理解Vue响应式原理
前言 Vue响应式原理是Vue最独特的特性之一,当数据模型进行修改时,视图就会进行更新,这使得状态管理简单直接,但是其底层的细节还是需要我们深入学习理解,这样遇到一些问题我们才能快速进行定位,并解决: ...
Vue学习 — Vue响应式原理
一. Object.defineProperty 在学习vue响应式原理之前,必须搞懂 Object.defineProperty. Object.defineProperty(obj, prop, ...
详解Vue响应式原理
摘要: 搞懂Vue响应式原理! 作者:浪里行舟原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

手写vue响应式原理

手写vue响应式原理相关推荐

最新文章

热门文章