框架

MVVM

● view：界面

● model：视图

● viewModel： 桥梁-负责沟通视图和界面

原生js或者jquery是先获取dom节点，再进行操作，影响性能的同时耦合还很严重

MVVM中，数据驱动视图，视图更新也会更改对应的数据。视图和数据完全独立，可复用的逻辑也可以放在viewmodel中，多个view都可以使用

MVVM的核心是双向绑定：如angluar的脏数据检测，vue的数据劫持

脏数据检测

触发指定事件会进入脏数据检测，用$digest遍历所有数据观察者，判断当前值和先前是否有区别，有变化的话调用$watch函数，然后再用$digest直到没有变化，循环至少两次，至多十次。

缺点：遍历多次，低效

优点：不关心数据是怎么改变的，都可以检测到，再统一更新ui，高效

数据劫持

Vue内部使用Object.defineProperty()实现双向绑定，通过这个函数监听set和get事件

发布订阅模式

核心思想是手动触发一次属性的getter来实现发布订阅的添加

Proxy和Object.defineProperty对比

Object.defineProperty已经能实现双向绑定，但是也有缺陷

1、只能对属性实行数据劫持，所以要深度遍历整个对象

2、对于数组不能监听到数据的变化

虽然vue能检测到数组的变化，但是是使用了hack的方法，并且也有缺陷

Proxy没有以上问题，可以支持监听原生数组变化，可以对整个对象进行拦截，Vue下个版本使用Proxy进行替换

路由原理

本质是监听url变化，匹配路由规则，跳转相应的页面，并且不需刷新。

目前单页面应用实现的两种方式：

● hash模式

● history模式

www.baidu.com/#/就是hash URL，带井号的就是hash。当井号后边的值变化，不会向服务器请求数据，可以通过hashchange时间监听URL的变化，从而跳转页面

history是H5新出的，需后台配置

Virtual Dom

操作真是dom很耗费性能，所以通过js对象来模拟dom对象

算法的实现为以下三步：

1、通过js模拟创建dom对象

2、判断两个对象的差异

3、渲染差异