vue.js响应式原理解析与实现

原创 Fly丶 教程 vue专题 1765阅读 29 天前 举报

从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染。之后,再接触了vue.js,当时也一度很好奇vue.js是如何监测数据更新并且重新渲染页面。今天,就我们就来一步步解析vue.js响应式的原理,并且来实现一个简单的demo

首先,先让我们来了解一些基础知识。

基础知识

Object.defineProperty
es5新增了Object.defineProperty这个api,它可以允许我们为对象的属性来设定gettersetter,从而我们可以劫持用户对对象属性的取值和赋值。比如以下代码:

我们通过Object.defineProperty劫持了obj[name]的取值和赋值操作,因此我们就可以在这里做一些手脚啦,比如说,我们可以在obj[name]被赋值的时候触发更新页面操作。

发布订阅模式

发布订阅模式是设计模式中比较常见的一种,其中有两个角色:发布者和订阅者。多个订阅者可以向同一发布者订阅一个事件,当事件发生的时候,发布者通知所有订阅该事件的订阅者。我们来看一个例子了解下。

动手实践

我们了解了Object.defineProperty和发布订阅者模式后,我们不难可以想到,vue.js是基于以上两者来实现数据监听的。

vue.js首先通过Object.defineProperty来对要监听的数据进行gettersetter劫持,当数据的属性被赋值/取值的时候,vue.js就可以察觉到并做相应的处理。
通过订阅发布模式,我们可以为对象的每个属性都创建一个发布者,当有其他订阅者依赖于这个属性的时候,则将订阅者加入到发布者的队列中。利用Object.defineProperty的数据劫持,在属性的setter调用的时候,该属性的发布者通知所有订阅者更新内容。
接下来,我们来动手实现(详情可以看注释):

结语
这样,一个简单的响应式数据监听就完成了。当然,这个也只是一个简单的demo,来说明vue.js响应式的原理,真实的vue.js源码会更加复杂,因为加了很多其他逻辑。

出处 https://www.jianshu.com/p/cbede8019237

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复