我是这么理解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
本文来源:  掘金  如需转载请联系原作者
相关文章
|
1天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
4 0
|
2天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
5 0
|
3天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
3天前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
11 0
|
3天前
|
JavaScript
Vue项目使用bpmn预览流程图
Vue项目使用bpmn预览流程图
8 0
|
3天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
14 0
|
3天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
11 0
|
3天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
7 1
|
3天前
|
JavaScript
vue项目开发笔记记录(四)
vue项目开发笔记记录
40 0
|
3天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
43 0