2). hash 路由模式的实现主要是基于下面几个特性:
● URL 中 hash 值只是客户端的一种状态,也就是说当向服务器端发出请求时,hash 部分不会被发送;
● hash 值的改变,都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换;
● 我们可以使用 hashchange 事件来监听 hash 值的变化,从而进行路由跳转。
1). HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个:history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下,操作浏览器的历史纪录。唯一不同的是,前者是新增一个历史记录,后者是直接替换当前的历史记录,如下所示:
2). history 路由模式的实现主要基于存在下面几个特性:
● 我们可以使用 popstate 事件来监听 url 的变化,从而进行路由跳转;
Vue 主要通过以下 4 个步骤来实现数据绑定的:
1. 实现一个监听器 Observer:对数据对象进行遍历,包括子属性对象的属性,利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化。
2. 实现一个解析器 Compile:解析 Vue 模板指令,将模板中的变量都替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,调用更新函数进行数据更新。
3. 实现一个订阅者 Watcher:Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ,主要的任务是订阅 Observer 中的属性值变化的消息,当收到属性值变化的消息时,触发解析器 Compile 中对应的更新函数。
4. 实现一个订阅器 Dep:订阅器采用 发布-订阅 设计模式,用来收集订阅者 Watcher,对监听器 Observer 和 订阅者 Watcher 进行统一管理。
1). Proxy 可以直接监听对象而非属性;
2). Proxy 可以直接监听数组的变化;
4). Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改;
5). Proxy 作为新标准将受到浏览器厂商重点持续的性能优化,也就是传说中的新标准的性能红利;
兼容性好,支持 IE9,而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平,因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。
1). 保证性能下限: 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作,它的一些 DOM 操作的实现必须是普适的,所以它的性能并不是最优的;但是比起粗暴的 DOM 操作性能要好很多,因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下,依然可以提供还不错的性能,即保证性能的下限;
2). 无需手动操作 DOM: 我们不再需要手动去操作 DOM,只需要写好 View-Model 的代码逻辑,框架会根据虚拟 DOM 和 数据双向绑定,帮我们以可预期的方式更新视图,极大提高我们的开发效率;
3). 跨平台: 虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关,相比之下虚拟 DOM 可以进行更方便地跨平台操作,例如服务器渲染、weex 开发等等。
1). 首次显示要慢些: 首次渲染大量DOM时,由于多了一层虚拟DOM的计算, 会比innerHTML插入慢
2). 无法进行极致优化: 虽然虚拟 DOM + 合理的优化,足以应对绝大部分应用的性能需求,但在一些性能要求极高的应用中 无法进行针对性的极致优化。
虚拟 DOM 的简单实现原理主要包括以下 3 部分:
3. pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。
4). 长列表性能优化
6). 图片资源懒加载
8). 第三方插件的按需引入
9). 优化无限列表性能
7). 构建结果输出分析
11.29. 对于即将到来的 Vue3.0 特性你有什么了解的吗?
Vue 3.0 正走在发布的路上,Vue 3.0 的目标是让 Vue 核心变得更小、更快、更强大,因此 Vue 3.0 增加以下这些新特性:
1). 检测属性的添加和删除;
2). 检测数组索引和长度的变更;
模板方面没有大的变更,只改了作用域插槽,2.x 的机制导致作用域插槽变了,父组件会重新渲染,而 3.0 把作用域插槽改成了函数的方式,这样只会影响子组件的重新渲染,提升了渲染的性能。
3. 对象式的组件声明方式
1)Vue2.x 中的组件是通过声明的方式传入一系列 option,和 TypeScript 的结合需要通过一些装饰器的方式来做,虽然能实现功能,但是比较麻烦。3.0 修改了组件的声明方式,改成了类式的写法,这样使得和 TypeScript 的结合变得很容易。
1). 支持自定义渲染器,从而使得 weex 可以通过自定义渲染器的方式来扩展,而不是直接 fork 源码来改的方式。
2). 支持 Fragment(多个根节点)和 Protal(在 dom 其他部分渲染组建内容)组件,针对一些特殊的场景做了处理。
1). 都支持指令:内置指令和自定义指令。
2). 都支持过滤器:内置过滤器和自定义过滤器。
3). 都支持双向数据绑定。
4). 都不支持低端浏览器。
2). 在性能上,Angular依赖对数据做脏检查,所以Watcher越多越慢。
3). Vue使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。
1). React采用特殊的JSX语法,Vue在组件开发中也推崇编写.vue特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。
3). 中心思想相同:一切都是组件,组件实例之间可以嵌套。
4). 都提供合理的钩子函数,可以让开发者定制化地去处理需求。
5). 都不内置列数AJAX,Route等功能到核心包,而是以插件的方式加载。
6). 在组件开发中都支持mixins的特性。
1. $router是VueRouter的实例,包含了路由跳转的方法、钩子函数等。
11.33. 路由组件如何响应路由参数的变化
// 监听当前路由发生变化的时候执行 // 对路由变化做出响应
2. 方式二: 组件内导航钩子函数