MVC MVVM 的区别

MVVM模式的优点:

1. 低耦合: View可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
2. 可重用性: 可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
3. MVVM v 和 vm 是双向绑定，所以免除了不必要的 dom 操作

MVVM与MVC设计模式区别

MVC，MVP 和 MVVM 的图示

MVVM 的实现

可以结合 Object.defineProperty 的数据劫持方案和发布订阅模式实现，MVVM 各模块职责：

• MVVM: Vue 实例初始化，调用 Observer 数据劫持，调用 Compiler 解析模板；
• Observer: 劫持 data 全部属性，定义 setter 、getter，添加和通知订阅者；
• Compiler: 解析模板初始化视图，收集模板中的数据依赖，创建订阅者订阅变化，绑定更新函数；
• Dep：订阅中心，提供添加、移除、通知订阅的接口；
• Watcher: data 属性的订阅者，收到变化通知后调用更新函数更新视图。

数据劫持 Object.defineProperty 不可以监控数组的变化，要实现只能修改数组原型方法，增加渲染视图的操作。但是 proxy 可以。

Vue MVVM 实现（defineProperty 篇）

模拟 Vue 手写一个 MVVM

Differ 算法

不同框架对于 DOM Diff 的理解并不完全一致，但有一点可以达成共识：由于 DOM 本身是树形（Tree）结构，不同层级之间的节点（Node）没有必要对比，因为这可能会带来 O(N³) 的计算复杂度，很可能还不如直接操作 Real DOM 来的快。因此，狭义的 DOM Diff 算法，一般指的是同一层级兄弟节点的范围之内。

• tree 级别，忽略跨层级，只比对同级
• component 级别，如果是相同组件，比对 Virtual DOM；如果已经替换了别的组件，则直接替换整个组件下所有子节点
• element 级别，对于同一层级的一组子节点，它们可以通过唯一 id 即 key 值进行区分。这里具体移动、插入、删除的逻辑，是 React 和 Vue 的 diff 真正区别。vue 使用了头部尾部双指针比对，用空间换时间，执行上会更快。

虚拟DOM与DIFF算法学习

浅谈 React/Vue/Inferno 在 DOM Diff 算法上的异同

传统diff、react优化diff、vue优化diff

Virtual DOM

好处

1. Virtual DOM 是以对象的方式来描述真实dom对象的，那么在做一些update的时候，可以在内存中进行数据比对，只更新需要更新的内容，减少对真实dom的操作减少浏览器重排重绘的次数，减少浏览器的压力
2. 开发更加便利
3. 数据驱动的编程思想引入，使框架可以处理 DOM 外的事务，如服务端渲染等。

AOP

面向侧面的程序设计（aspect-oriented programming，AOP，又译作面向方面的程序设计、观点导向编程、剖面导向程序设计）是计算机科学中的一个术语，指一种程序设计范型。侧面的概念源于对面向对象的程序设计的改进，解决横切关注点（Cross-Cutting Concerns）的问题，但并不只限于此，它还可以用来改进传统的函数。

AOP 是针对业务处理过程中的切面(即非业务逻辑部分，例如错误处理，埋点，日志等)进行提取。

Mixins、HOC（高阶组件）、React Hooks 这些都是 AOP 的具体实现。

路由

HashRouter：

• 原理是使用 onhashchange
• 兼容性高

BrowserRouter：

• 更美观，符合标准
• 可以使用锚点定位
• 可以使用浏览器 history API
• 会带到 http 请求头，后端可以根据 url 地址判断 404

在微信中分享到朋友圈或好友时，分享出去的路由被破坏，打开分享的链接，路由中的“#”会被去掉并追加？fromTimeline之类的后缀参数，这就造成了分享出去的链接只能进入首页，无法正常跳转到其他路由。

hash模式下微信分享后打开首页，三种完美解决方案