简简单单的Vue1（MVVM与Vue的双向绑定原理）

既然选择了远方，便只顾风雨兼程 __ hans许

系列：

 

• • • • • vue

 

在此我们讲述了前端开发的工具，语言的知识，接下来我们从头开始学习一个万丈的前框框架-vue。

vue

vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
vue 只关注视图层， 采用自底向上增量开发的设计。
vue 的目标是通过尽可能简单的 api 实现响应的数据绑定和组合的视图组件。

了解vue先知道下mvvm

1. mvvm
   mvvm 是model-view-viewmodel的缩写，它是一种基于前端开发的架构模式，其核心是提供对view 和 viewmodel 的双向数据绑定，这使得viewmodel 的状态改变可以自动传递给 view，即所谓的数据双向绑定。

   vue.js 是一个提供了 mvvm 风格的双向数据绑定的 javascript 库，专注于view 层。它的核心是 mvvm 中的 vm，也就是 viewmodel。 viewmodel负责连接 view 和 model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。

2. 为啥会有mvvm

   • mvc
     要解决这个问题，我们就要先了解mvc，mvc 即 model-view-controller 的缩写，就是 模型-视图-控制器 , 也就是说一个标准的web 应用程序是由这三部分组成的。

     view 用来把数据以某种方式呈现给用户。
     model 其实就是数据。
     controller 接收并处理来自用户的请求，并将 model 返回给用户。

   • 前端的工程化，mvc
     随着html5的流行，使得前后端分离成为了趋势。相对 html4 , html5 最大的亮点是它为移动设备提供了一些非常有用的功能，使得 html5 具备了开发app的能力, html5开发app 最大的好处就是跨平台、快速迭代和上线，节省人力成本和提高效率。

     既然要用h5 来构建 app, 那view 层所做的事，就不仅仅是简单的数据展示了，它不仅要管理复杂的数据状态，还要处理移动设备上各种操作行为等等。因此，前端也需要工程化，也需要一个类似于mvc 的框架来管理这些复杂的逻辑，使开发更加高效。 但这里的 mvc 又稍微发了点变化：

     view ui布局，展示数据。
     model 管理数据。
     controller 响应用户操作，并将 model 更新到 view 上。

   • 简单的前端工程化，出现问题？
     上面 mvc 架构模式对于简单的应用来看起是ok 的，也符合软件架构的分层思想。 但实际上，随着h5 的不断发展，人们更希望使用h5 开发的应用能和native（原生程序编写的第三方应用） 媲美，或者接近于原生app 的体验效果，于是前端应用的复杂程度已不同往日，今非昔比。这时前端开发就暴露出了三个痛点问题：

     1. 开发者在代码中大量调用相同的 dom api, 处理繁琐 ，操作冗余，使得代码难以维护。
     2. 大量的dom 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
     3. 当 model 频繁发生变化，开发者需要主动更新到view ；当用户的操作导致 model 发生变化，开发者同样需要将变化的数据同步到model 中，这样的工作不仅繁琐，而且很难维护复杂多变的数据状态。

   • mvvm的解决
     mvvm 由 model,view,viewmodel 三部分构成，model 层代表数据模型，也可以在model中定义数据修改和操作的业务逻辑；view 代表ui 组件，它负责将数据模型转化成ui 展现出来，viewmodel 是一个同步view 和 model的对象。

     在mvvm架构下，view 和 model 之间并没有直接的联系，而是通过viewmodel进行交互，model 和 viewmodel 之间的交互是双向的， 因此view 数据的变化会同步到model中，而model 数据的变化也会立即反应到view 上。

     viewmodel 通过双向数据绑定把 view 层和 model 层连接了起来，而view 和 model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作dom, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 mvvm 来统一管理。

3. vue的mvvm
   vue.js 可以说是mvvm 架构的最佳实践，专注于 mvvm 中的 viewmodel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的js 库，api 简洁，很容易上手。

   vue.js 是采用 object.defineproperty() 的 getter 和 setter，并结合观察者模式来实现数据绑定的。当把一个普通 javascript 对象传给 vue 实例来作为它的 data 选项时，vue 将遍历它的属性，用 object.defineproperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 vue 追踪依赖，在属性被访问和修改时通知变化。
   

   observer 数据监听器，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者，内部采用object.defineproperty的getter和setter来实现。
   compile 指令解析器，它的作用对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数。
   watcher 订阅者， 作为连接 observer 和 compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数。
   dep 消息订阅器，内部维护了一个数组，用来收集订阅者（watcher），数据变动触发notify 函数，再调用订阅者的 update 方法。

   从图中可以看出，当执行 new vue() 时，vue 就进入了初始化阶段，一方面vue 会遍历 data 选项中的属性，并用 object.defineproperty 将它们转为 getter/setter，实现数据变化监听功能；另一方面，vue 的指令编译器compile 对元素节点的指令进行扫描和解析，初始化视图，并订阅watcher 来更新视图， 此时wather 会将自己添加到消息订阅器中(dep),初始化完毕。
   当数据发生变化时，observer 中的 setter 方法被触发，setter 会立即调用dep.notify()，dep 开始遍历所有的订阅者，并调用订阅者的 update 方法，订阅者收到通知后对视图进行相应的更新。

感谢：