我是这么理解Vue中的响应式系统的

简介: 遇到知识,尤其是复杂的概念,我不能类比的话,我很难接收(所以学习很差...)。在看了大神染陌同学的Vue源码解析后,我想分享一下我所类比的Vue响应式系统,您得先看他的文章(至少看他写的Vue的响应式)。

遇到知识,尤其是复杂的概念,我不能类比的话,我很难接收(所以学习很差...)。在看了大神染陌同学的Vue源码解析后,我想分享一下我所类比的Vue响应式系统,您得先看他的文章(至少看他写的Vue的响应式)。

这是我自己的想法,或许适合您,或许也不适合您,还望多多指点。本文没有代码。

在此之前就当您看过《生化危机》。

我是这样理解vue中的响应式系统原理的: 

new Vue({options}),就像《生化危机》中的世界,Vue中的data里的数据就像每一个与这个世界有必然接触的生物(无论你是爱丽丝、丧史、还是丧狗)只要你与这个世界产生了互动,你都会被Vue内部的一个庞大团体‘保护伞公司’(对应Vue源码中的observer)所影响,



ccc97a6b729d289622c5e9d9833570dcdf86a033

它可以观察一切生物。保护伞公司通过遍布全球的基地“就拿内达华沙漠中的地下实验室”(对应Vue中的defineReactive)对区域范围内的生物进行监控(让生物变成可观察的)。

acc102297454b1b8f6cc61b0a8407a55401c4821

而这一基地具体的操控者又是“艾萨克博士”(对应Vue中的Object.defineprototy)。 Object.defineprototy方法中的3个参数(且说3个),入参是一个obj(他是生物中的一个个体,就像爱丽丝),第二个参数key就像爱丽丝的技能点——是用枪、还是用土耳其军刀,第三个参数vaule是对应技能点的值。 艾萨克博士对每一个‘实验品’进行改造(他们是丧尸、是爱丽丝的克隆体、还更有爱丽丝本人,但他们都是data)。

艾萨克博士(Object.defineprototy)通过reactiveGetter对每一个data(生物,丧尸...)进行基因读取(这一个过程包括Vue中的“依赖收集”)。


ab4128160effb4313ae7a9d8c64011d2e570c7c4

通过reactiveSetter对每一个data进行写(就像基因改造,就像《生化3》中改造爱丽丝的克隆体)。 reactiveGetter时,主要是对data进行依赖收集,这一点很中重要(这关乎着为什么Vue中的数据发生改变,其view层也会改变)。

这个重要是如何维护的呢? 首先,依赖收集会让“可观察的”data知道,‘有地方依赖我的数据,我变化时要通知他们’。这个时候“红皇后”登场了,红皇后她(利用强大AI技术)能监视每一个生物(data)的信息,她就像Vue中的订阅者Dep。


2bce41408bdd01c11732490ad0eb8bd938891a51
红皇后能够为保护伞公司的那些利益集团高层(就像Vue中的Watcher)提供一切信息。
dc54c169f4280e25c371975a31df9dd7cfddafec

但她首先得知道哪些人是高层(这就像订阅者Dep有一个功能addSub用来存放Watcher观察者对象)。红皇后会在得知依赖收集对象发生改变(data数据变化)时通知这帮Watcher,对象视图要更新了...


原文发布时间为:2018年06月27日
作者: Panthon
本文来源:  掘金  如需转载请联系原作者
相关文章
|
8天前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
57 1
|
19天前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
2月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
35 1
|
2月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
2月前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
|
2月前
|
JavaScript 前端开发 API
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
Vue.js响应式原理深度解析:从Vue 2到Vue 3的演进
68 0
|
2月前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客!我是瑞雨溪,一名热爱前端的大一学生,专注于JavaScript与Vue,正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我,持续更新中!🎉🎉🎉
50 1
vue学习第一章
|
2月前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令,包括基本使用、动态绑定class及style等,希望能为你的前端学习之路提供帮助。持续关注,更多精彩内容即将呈现!🎉🎉🎉
34 1
|
2月前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客!我是瑞雨溪,一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用,请关注我,将持续更新更多优质内容!🎉🎉🎉
41 1
vue学习第四章