MVVM 模型之下的 VUE框架

MVVM（Model View ViewModel）

• 一、VUE 的简介
  • VUE 就是基于 MVVM 模型实现的一套框架，在 VUE 中：Model 指的是 js 中的数据，如对象、数组等等。View 指的是页面视图。ViewModel指的是 VUE 实例化对象。
• 二、为什么说VUE 是一个渐进式的 javascript 框架，渐进式是什么意思？
  • 1、如果你已经有一个现成的服务端应用，你可以将 VUE 作为该应用的一部分嵌入其中，带来更加丰富的交互体验；
  • 2、如果你希望将更多的业务逻辑放到前端当中来实现，那么 VUE 的核心库及其生态系统也可以满足你的各种需求（core+vuex+vue-router）.和其他的框架一样，VUE 允许你将一个网页分割成可复用的组件，每个组件都将包含属于自己的 HTML、CSS、JAVASCRIPT以用来渲染网页中相应的地方；
  • 3、如果我们构建一个大型的应用，在这一点上，我们可能需要将东西分割成为各自的组件和文件，VUE 有一个命令行工具，可以快速的初始化一个真实的工程变得非常的简单（vue init webpack my-project）。我们可以使用 VUE 的单文件组件，它包含了各自的 HTML、CSS、JAVASCRIPT以及带有作用域的 CSS或CASS；
  • 以上的三个例子，是一步一步递进的，也就是说对 VUE 的作用可大可小，他都会有相应的方式来整合到你的项目当中。所以说它是一个渐进式的框架。VUE 最独特的特性：响应式系统 VUE 是响应式的（reactive），也就是说当我们的数据变更时，VUE 会帮你更新所有网页中用到它的地方。
• 三、ANGULAR 脏值检查：angular.js 是通过脏值检查的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动当然 Google 不会这么 low，angular 只有在指定的事件触发时进入脏值检测，大致如下：DOM事件，譬如用户输入文本，点击按钮等。（ng-click）XHR相应事件（$http）浏览器Location变更事件（$location）Timer 事件（$timeout，$interval）执行 $digest() 或 $apply() 在 Angular 中组件是以树的形式组织起来的，相应的，检测器也是一棵树的形状。当一个异步事件发生的时候，脏值检查会从组件开始，自上而下对树上的所有子组件进行检查，但是这种检查的方式性能存在很大的问题。
• 四、VUE 观察者-订阅者（数据劫持）：
  • Observer 数据监听器，把一个普通的 JavaScript 对象传给 VUE 实例的 data 选项，VUE 将遍历此对象的所有属性，并使用 Object.defineProperty()方法把这些属性全部转换成 setter、getter 方法。当 data 中的某个属性被访问，则会调用 getter 方法，当 data 中的属性被改变时，则会调用 setter 方法；
  • Compile 指令解析器，它的作用对每个元素节点的指令进行解析，替换模板数据，并把绑定对应的更新函数，初始化相应的订阅；
  • Watcher 订阅者，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数；
  • Dep消息订阅器，内部维护了一个数组，用来收集订阅者（Watcher），数据变动触发 notify 函数，再调用订阅者的 update 方法。执行流程如下：