你为什么要使用前端框架Vue?
1.前端框架的根本意义
1.1 前端框架的好处
最开始学习前端框架的时候(我第一个框架是 React)并不理解框架能带来什么,只是因为大家都在用框架,最实际的一个用途就是所有企业几乎都在用框架,不用框架就 out 了.
随着使用的深入我逐渐理解到框架的好处:
- 1.组件化: 其中以 React 的组件化最为彻底,甚至可以到函数级别的原子组件,高度的组件化可以是我们的工程易于维护、易于组合拓展。
- 2.天然分层: JQuery 时代的代码大部分情况下是面条代码,耦合严重,现代框架不管是 MVC、MVP还是MVVM 模式都能帮助我们进行分层,代码解耦更易于读写。
- 3.生态: 现在主流前端框架都自带生态,不管是数据流管理架构还是 UI 库都有成熟的解决方案。
1.2 前端框架的根本意义
简单来说,前端框架的根本意义是解决了UI 与状态同步问题。
在 Vue 中我们如果要在todos
中添加一条,只需要app4.todos.push({ text: '新项目' })
,这时由于 Vue 内置的响应式系统会自动帮我们进行 UI 与状态的同步工作.
<div id="app-4"> <ol> <li v-for="todo in todos"> {{ todo.text }} </li> </ol> </div>
var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) //在此我向大家推荐一个前端全栈开发交流圈:619586920 突破技术瓶颈,提升思维能力
如果我们用 JQuery 或者 JS 进行操作,免不了一大堆li.appendChild
、document.createElement
等 DOM 操作,我们需要一长串 DOM 操作保证状态与 UI 的同步,其中一个环节出错就会导致 BUG,手动操作的缺点如下:
- 频繁操作 DOM 性能低下.
- 中间步骤过多,易产生 bug且不易维护,而且心智要求较高不利于开发效率
不管是 vue 的数据劫持、Angular 的脏检测还是 React 的组件级 reRender都是帮助我们解决 ui 与状态同步问题的利器。
这也解释了Backbone作为前端框架鼻祖在之后落寞的原因,Backbone只是引入了 MVC 的思想,并没有解决 View 与 Modal 同步的问题,相比于现代的三大框架直接操作 Modal 就可以同步 UI 的特性, Backbone 仍然与 JQuery 绑定,在 View 里操作 Dom来达到同步 UI 的目的,这显然是不符合现代前端框架设计要求的。
2.Vue 如何保证 UI 与状态同步
UI 在 MVVM 中指的是 View,状态在 MVVM 中指的是 Modal,而保证 View 和 Modal 同步的是 View-Modal。
Vue 通过一个响应式系统保证了View 与 Modal的同步,由于要兼容IE,Vue 选择了 Object.defineProperty
作为响应式系统的实现,但是如果不考虑 IE 用户的话,Object.defineProperty
并不是一个好的选择target=https%3A%2F%2Fjuejin.im%2Fpost%2F5acd0c8a6fb9a028da7cdfaf)。
我们将用 Proxy 实现一个响应式系统。
2.1 发布订阅中心
一个响应式系统离不开发布订阅模式,因为我们需要一个 Dep保存订阅者,并在 Observer 发生变化时通知保存在 Dep 中的订阅者,让订阅者得知变化并更新视图,这样才能保证视图与状态的同步。
/** * [subs description] 订阅器,储存订阅者,通知订阅者 * @type {Map} */ export default class Dep { constructor() { // 我们用 hash 储存订阅者 this.subs = new Map(); } // 添加订阅者 addSub(key, sub) { // 取出键为 key 的订阅者 const currentSub = this.subs.get(key); // 如果能取出说明有相同的 key 的订阅者已经存在,直接添加 if (currentSub) { currentSub.add(sub); } else { // 用 Set 数据结构储存,保证唯一值 this.subs.set(key, new Set([sub])); } } // 通知 notify(key) { // 触发键为 key 的订阅者们 if (this.subs.get(key)) { this.subs.get(key).forEach(sub => { sub.update(); }); } } }
2.2 监听者的实现
我们在订阅器 Dep
中实现了一个notify
方法来通知相应的订阅这们,然而notify
方法到底什么时候被触发呢?
当然是当状态发生变化时,即 MVVM 中的 Modal 变化时触发通知,然而Dep
显然无法得知 Modal 是否发生了变化,因此我们需要创建一个监听者Observer
来监听 Modal, 当 Modal 发生变化的时候我们就执行通知操作。
vue 基于Object.defineProperty
来实现了监听者,我们用 Proxy 来实现监听者.
与Object.defineProperty
监听属性不同, Proxy 可以监听(实际是代理)整个对象,因此就不需要遍历对象的属性依次监听了,但是如果对象的属性依然是个对象,那么 Proxy 也无法监听,所以我们实现了一个observify
进行递归监听即可。
/** * [Observer description] 监听器,监听对象,触发后通知订阅 * @param {[type]} obj [description] 需要被监听的对象 */ const Observer = obj => { const dep = new Dep(); return new Proxy(obj, { get: function(target, key, receiver) { // 如果订阅者存在,直接添加订阅 if (Dep.target) { dep.addSub(key, Dep.target); } return Reflect.get(target, key, receiver); }, set: function(target, key, value, receiver) { // 如果对象值没有变,那么不触发下面的操作直接返回 if (Reflect.get(receiver, key) === value) { return; } const res = Reflect.set(target, key, observify(value), receiver); // 当值被触发更改的时候,触发 Dep 的通知方法 dep.notify(key); return res; }, }); }; /** * 将对象转为监听对象 * @param {*} obj 要监听的对象 */ export default function observify(obj) { if (!isObject(obj)) { return obj; } // 深度监听 Object.keys(obj).forEach(key => { obj[key] = observify(obj[key]); }); return Observer(obj); }
2.3 订阅者的实现
我们目前已经解决了两个问题,一个是如何得知 Modal 发生了改变(利用监听者 Observer 监听 Modal 对象),一个是如何收集订阅者并通知其变化(利用订阅器收集订阅者,并用notify通知订阅者)。
我们目前还差一个订阅者(Watcher)
// 订阅者 export default class Watcher { constructor(vm, exp, cb) { this.vm = vm; // vm 是 vue 的实例 this.exp = exp; // 被订阅的数据 this.cb = cb; // 触发更新后的回调 this.value = this.get(); // 获取老数据 } get() { const exp = this.exp; let value; Dep.target = this; if (typeof exp === 'function') { value = exp.call(this.vm); } else if (typeof exp === 'string') { value = this.vm[exp]; } Dep.target = null; return value; } // 将订阅者放入待更新队列等待批量更新 update() { pushQueue(this); } // 触发真正的更新操作 run() { const val = this.get(); // 获取新数据 this.cb.call(this.vm, val, this.value); this.value = val; } }
2.4 批量更新的实现
我们在上一节中实现了订阅者( Watcher),但是其中的update
方法是将订阅者放入了一个待更新的队列中,而不是直接触发,原因如下:
因此这个队列需要做的是异步且去重,因此我们用 Set
作为数据结构储存 Watcher 来去重,同时用Promise
模拟异步更新。
// 创建异步更新队列 let queue = new Set() // 用Promise模拟nextTick function nextTick(cb) { Promise.resolve().then(cb) } // 执行刷新队列 function flushQueue(args) { queue.forEach(watcher => { watcher.run() }) // 清空 queue = new Set() } // 添加到队列 export default function pushQueue(watcher) { queue.add(watcher) // 下一个循环调用 nextTick(flushQueue) }
2.5 小结
我们梳理一下流程, 一个响应式系统是如何做到 UI(View)与状态(Modal)同步的?
我们首先需要监听 Modal, 本文中我们用 Proxy 来监听了 Modal 对象,因此在 Modal 对象被修改的时候我们的 Observer 就可以得知。
我们得知Modal发生变化后如何通知 View 呢?要知道,一个 Modal 的改变可能触发多个 UI 的更新,比如一个用户的用户名改变了,它的个人信息组件、通知组件等等组件中的用户名都需要改变,对于这种情况我们很容易想到利用发布订阅模式来解决,我们需要一个订阅器(Dep)来储存订阅者(Watcher),当监听到 Modal 改变时,我们只需要通知相关的订阅者进行更新即可。
那么订阅者来自哪里呢?其实每一个组件实例对应着一个订阅者(正因为一个组件实例对应一个订阅者,才能利用 Dep 通知到相应组件,不然乱套了,通知订阅者就相当于间接通知了组件)。
当订阅者得知了具体变化后它会进行相应的更新,将更新体现在 UI(View)上,至此UI 与 Modal 的同步完成了。
3.响应式系统并不是全部
响应式系统虽然是 Vue 的核心概念,但是一个响应式系统并不够.
响应式系统虽然得知了数据值的变化,但是当值不能完整映射 UI 时,我们依然需要进行组件级别的 reRender,这种情况并不高效,因此 Vue 在2.0版本引入了虚拟 DOM, 虚拟 DOM进行进一步的 diff 操作可以进行细粒度更高的操作,可以保证 reReander 的下限(保证不那么慢)。
除此之外为了方便开发者,vue 内置了众多的指令,因此我们还需要一个 vue 模板解析器.

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
通过MySQL存储原理来分析排序和锁
出自公众号 内核小王子 先抛出几个问题 1.为什么不建议使用订单号作为主键? 2.为什么要在需要排序的字段上加索引? 3.for update 的记录不存在会导致锁住全表? 4.redolog 和 binlog 有什么区别? 5.MySQL 如何回滚一条 sql ? 6.char(50) 和 varchar(50) 效果是一样的么? 索引知识回顾 对于 MySQL 数据库而言,数据是存储在文件里的,而为了能够快速定位到某张表里的某条记录进行查询和修改,我们需要将这些数据以一定的数据结构进行存储,这个数据结构就是我们说的索引。回忆一下我们大学里学过的算法与数据结构,能够支持快速查找的数据结构有:顺序数组、哈希、搜索树。 数组要求 insert 的时候保证有序,这样查找的时候可以利用二分查找法达到 O(log(N)) 的时间复杂度,对范围查询支持也很好,但是 insert 的时候如果不是在数组尾部,就需要摞动后面所有的数据,时间复杂度为 O(N) 。所以有序数组只适合存储静态数据,例如几乎很少变动的配置数据,或者是历史数据。这里应该会有人有疑问:我用另外一种线性数据结构链表来替代数组不就可...
- 下一篇
死磕 java集合之ConcurrentHashMap源码分析(三)——内含彩蛋
本章接着上两章,链接直达: 死磕 java集合之ConcurrentHashMap源码分析(一) 死磕 java集合之ConcurrentHashMap源码分析(二) 删除元素 删除元素跟添加元素一样,都是先找到元素所在的桶,然后采用分段锁的思想锁住整个桶,再进行操作。 public V remove(Object key) { // 调用替换节点方法 return replaceNode(key, null, null); } final V replaceNode(Object key, V value, Object cv) { // 计算hash int hash = spread(key.hashCode()); // 自旋 for (Node<K,V>[] tab = table;;) { Node<K,V> f; int n, i, fh; if (tab == null || (n = tab.length) == 0 || (f = tabAt(tab, i = (n - 1) & hash)) == null) // 如果目标key所...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- SpringBoot2更换Tomcat为Jetty,小型站点的福音
- Red5直播服务器,属于Java语言的直播服务器
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- CentOS关闭SELinux安全模块
- CentOS7编译安装Gcc9.2.0,解决mysql等软件编译问题
- SpringBoot2整合MyBatis,连接MySql数据库做增删改查操作
- SpringBoot2整合Redis,开启缓存,提高访问速度
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- CentOS7安装Docker,走上虚拟化容器引擎之路