Vue.js的技术发展

技术发展"/>

Vue.js的技术发展

1.前端技术的发展

1.1XML

• XML 指可扩展标记语言（EXtensible Markup Language），是独立于软件和硬件的信息传输工具

• 用来传输和存储数据，焦点是数据的内容，而HTML用于格式化并显示数据.

• XML 文档不做任何事情，在 XML 标签中包装的是纯粹的信息。我们需要编写软件或者程序，才能传送、接收和显示出这个文档

• XML 语言没有预定义的标签，允许创作者定义自己的标签和自己的文档结构

1.2CGI

CGI：通用网关接口（Common Gateway Interface）是一个Web服务器主机提供信息服务的标准接口。通过CGI接口，Web服务器就能够获取客户端提交的信息，转交给服务器端的CGI程序进行处理，最后返回结果给客户端。

1.3AJAX

• AJAX(Asynchronous JavaScript And XML, 异步JavaScript 和XML)通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新, 无需重新加载整个网页的情况下，能够更新部分网页。

• Ajax 不是一种新的编程语言,是一种借助XML，HTML，CSS和Java Script创建更好，更快，更交互的Web应用程序的新技术。

• AJAX 工作原理
  

1.4 Node.js

• Node.js是一个可以让JavaScript运行在服务器端的平台，作为服务器向用户提供服务。
• 实时响应、事件驱动、非阻塞I/O，超大规模数据要求下架构的可扩展性等特点
• 异步I/O
  在Node中，绝大多数的操作都以异步的方式进行调用。在Node中，我们可以从语言层面很自然地进行并行I/O操作。每个调用之间无须等待之前的I/O调用结束。在编程模型上可以极大提升效率。
• 事件
  随着Web 2.0时代的到来，JavaScript在前端担任了更多的职责，事件也得到了广泛的应用。 Node将前端浏览器中应用广泛且成熟的事件引入后端， 配合异步I/O，将事件点暴露给业务逻辑。事件的编程方式具有轻量级、松耦合、只关注事务点等优势，但是在多个异步任务的场景下，事件与事件之间各自独立，如何协作是一个问题。
• 单线程
  JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。JavaScript的单线程，与它的用途有关。作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。这决定了它只能是单线程，否则会带来很复杂的同步问题。
  Node保持了JavaScript在浏览器中单线程的特点。而且在Node中，JavaScript与其余线程是无法共享任何状态的。单线程的最大好处是不用像多线程编程那样处处在意状态的同步问题，这里没有死锁的存在，也没有线程上下文交换所带来的性能上的开销。

2.1 MVVM

• MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷.

• 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 来统一管理。

2.2Vue.js

• Vue.js 可以说是MVVM 架构的最佳实践，专注于 MVVM 中的 ViewModel，不仅做到了数据双向绑定，而且也是一款相对来比较轻量级的JS 库，并且提供尽可能简单的API 以实现数据绑定、组件复用等机制，且非常容易学习并混入其他库。同时， Vue 也完全有能力支持采用SPA 设计和组合其他Vue 生态库的系统。

• 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 方法，订阅者收到通知后对视图进行相应的更新。