JavaScript库介绍教程

Vue是一个小型且可移植的javascript库。它有一个易于理解的应用编程接口，这使得开发人员开发网络应用程序变得更加容易和方便。事实上，Vue一直以其便利性、执行力和灵活性而自豪。

本教程的目的是通过一些示例向您概述一些基本概念和功能。在接下来的其他教程中，您将学习Vue更多有用的特性，从而用Vue构建一个可扩展的项目。

MVVM数据绑定。

MVVM的本质是通过数据绑定将视图和模型链接起来，这样数据的变化就可以自动映射到视图的更新上。Vue.js在数据绑定的API设计中借鉴了Angular指令机制：用户可以通过带有特殊前缀的HTML属性实现数据绑定，也可以使用常用的花括号模板进行插值，或者对表单元素使用双向绑定；

！-说明-span v-text=' msg'/span！-插值-span {{msg}}/span！-双向绑定-输入v-model=' msg '插值本质上也是一个指令，只是为了方便编写模板。在编译模板的过程中，Vue.js会为每个需要动态更新的DOM节点创建一个指令对象。每当指令对象观察到的数据发生变化时，都会在绑定的目标节点上执行相应的DOM操作。基于指令的数据绑定使得具体的DOM操作能够合理地封装在指令定义中，业务代码只需要涉及模板和对数据状态的操作，大大提高了应用程序的开发效率和可维护性。

与Angular不同，Vue.js的API中没有模块、控制器、范围、工厂、服务等复杂的概念，一切都基于“ViewModel实例”:

！-template-div id=' app ' { msg } }/div//原始对象是data var data={msg: 'hello！'}//创建一个ViewModel实例var vm=new Vue({ //选择目标元素el: '#app '，//提供初始数据data: data})渲染结果：

div id='app '你好！/div在渲染的同时，Vue.js也完成了数据的动态绑定：此时如果data.msg的值发生变化，DOM会自动更新。很容易理解吗？此外，Vue.js大大简化了自定义指令和过滤器的API。如果你有Angular开发经验，你会很快上手。

数据观测的实现。

Vue.js的数据观测实现原理与Angular有本质区别。了解Angular的读者可能知道，Angular的数据观测采用了脏检查机制。每个指令将有一个相应的对象来观察数据，称为观察者；在一个范围内会有很多观察者。每当接口需要更新时，Angular将遍历当前范围内的所有观察器，逐个评估它们，然后将它们与之前保存的旧值进行比较。如果评估结果发生变化，将触发相应的更新。这个过程叫做消化循环。脏检有两个问题：

任何数据更改都意味着当前范围内的每个观察器都需要重新评估。因此，当观察者数量巨大时，应用的性能必然会受到影响，难以优化。当数据发生变化时，框架无法主动检测到变化，需要手动触发摘要周期来触发相应的DOM更新。Angular通过在DOM事件处理程序中自动触发摘要循环部分规避了这个问题，但是仍然有很多情况需要用户手动触发。Vue.js采用了基于依赖集合的观察机制。原则上与老MVVM框架淘汰赛相同。依赖项收集的基本原则是：

将原始数据转化为“可观察的对象”。一个可观察的对象可以被赋值或赋值。在观察者的评估过程中，每一个有值的可观察对象都会将当前观察者注册为自己的订阅者，成为当前观察者的依赖者。当一个依赖的可观察对象被分配时，它将通知所有订阅它的观察者重新评估并触发相应的更新。依赖项收集的优点是可以准确主动地跟踪数据的变化，没有上面提到的脏检查的两个问题。而依赖集合的传统实现，如敲除，通常需要对原始数据进行包装，使之成为可观察的对象，取值赋值时需要采用函数调用的形式，操作数据时繁琐且不直观。同时，对复杂嵌套结构的对象支持并不理想。Vue.js利用ES5的Object.defineProperty方法直接将原生数据对象的属性转化为getter和setter，实现了这两个函数内部依赖关系的收集和触发，完美支持嵌套对象结构。对于数组，通过换行。