网站建设

mfshop 提供专业shopify js冲突资讯，平台拥有众多shopify js冲突词分析师，帮助您解决您的问题，有任何疑问：shopify js冲突均可点击右侧客服进行咨询，我们为您提供一站式shopify js冲突服务，感谢您的访问！

Vue.js 是我在2014年2月开源的一个前端开发库，通过简洁的 API 提供高效的数据绑定和灵活的组件系统。在前端纷繁复杂的生态中，Vue.js有幸受到一定程度的关注，目前在 GitHub上已经有5000+的star。本文将从各方面对Vue.js做一个深入的介绍。

开发初衷

2013年底，我还在谷歌创建实验室工作。 当时在项目中使用了Angular一段时间，在哀叹数据绑定提高生产力的同时，也觉得Angular的API设计过于繁琐，学习曲线变得陡峭。 出于对Angular数据绑定原理的好奇心，我开始“制造车轮”，自己实现了一个基于非常粗略依赖收集的数据绑定库。 这就是Vue.js的前身。 另外，在实际开发中，我们还发现用户界面可以在嵌套组件树中完全编写，而单个组件可以与MVVM的ViewModel兼容。 因此，我决定将数据绑定实验改进为真正的开源项目。 其核心思想是“数据驱动组件系统”。

MVVM 数据绑定

MVVM的本质是通过数据绑定链接View和Model，并将数据更改自动映射到视图更新。 Vue.js在数据绑定的API设计中参考了Angular的指令机制。 用户可以使用具有特殊前缀的HTML属性实现数据绑定，使用常规大括号模板进行插值，以及在表单元素中使用双向绑定。

！ -命令-

span v-text='msg'/span

！ 插值-

span{{msg}}/span

！ -双向绑定-

input v-model='msg '插值本质上也是指令，只是为了方便模板的写入。 编译模板时，Vue.js会为需要动态更新的每个DOM节点创建指令对象。 每当指令对象观测到的数据发生变化时，都会对绑定的目标节点执行相应的DOM操作。 基于指令的数据绑定将所有特定的DOM操作合理地封装在指令定义中，业务代码只能涉及模板和数据状态操作，大大提高了APP应用程序的开发效率和可维护性。

图1 Vue.js的MVVM体系结构

与Angular不同，Vue.js中的API没有复杂的模块、控制器、scope、factory和service等概念，而是全部以“ViewModel实例”为基本单元。

！ -模板-

div id='app '

{{msg}}

/div//作为本机对象的数据

var data={

msg: 'hello！'

}

创建ViewModel实例

var vm=new Vue({ (

//选择目标元素

El : ' # APP '，

//提供初始数据

data :数据

} )渲染结果：

div id='app '

你好！

/div在渲染的同时，Vue.js也完成了数据的动态绑定。 如果此时更改data.msg的值，DOM将自动更新。 不是很容易理解吗？ 此外，Vue.js还大大简化了自定义命令和过滤器的API。 有了Angular的开发经验，得到的速度会非常快。

数据观测的实现

Vue.js的数据观测实现原理与Angular有本质区别。 了解Angular的读者可能知道Angular的数据观测采用了脏检查机制。 每个指令都有一个对象，称为watcher，用于观测数据；一个范围中有很多watcher。 每次需要更新接口时，Angular都会遍历当前范围中的所有watcher，逐一评估它们，并将其与以前保存的旧值进行比较。 当评估结果发生变化时，将触发相应的更新。 此过程称为digest cycle。 污渍检查有两个问题：

数据更改意味着必须重新评估当前范围内的所有watcher，因此，随着watcher数量的增加，不可避免地会影响APP应用程序的性能，从而使优化变得困难。 如果数据发生更改，框架将无法积极检测更改的发生。 必须手动启动digest cycle才能启动相应的DOM更新。 虽然Angular通过在DOM事件处理程序中自动触发digest cycle节避免了此问题，但用户可能需要手动触发它。 Vue.js采用了基于依赖收集的观测机制。 原理上与老字号MVVM框架Knockout相同。 依存收集的基本原理如下

将本地数据改造为“可观察的对象”。 可观察的对象可以取值，也可以赋值。 在watcher评估过程中，所有取值的可观察对象都将当前watcher注册为其订阅者，并成为当前watcher的依赖关系。 一旦分配了依赖的可观察对象，它就会通知所有订阅者对其watcher的重新评估，并触发相应的更新。 相关性收集的优点是可以准确主动地跟踪数据的变化，没有上述脏检查这两个问题。 但是，传统的依赖收集实现(如Knockout )通常需要包装本机数据以创建可观察的对象，在取值和赋值时需要采用函数调用的形式，在进行数据操作时书写复杂且不直观Vue.js利用ES5的Object.defineProperty方法将本机数据对象的属性直接改造为getter和setter，在这两个函数内部实现依赖收集和触发，从而实现嵌套对象结构对于数组，通过包装数组的push等可变方法监听数组的变化。 这样，在处理Vue.js的数据和处理本机对象之间几乎没有差别。 [注意：如果添加/删除：属性或更改数组的特定位置元素，则必须调用特定函数，如obj.$add(key，value )才能触发更新。 这受限于ES5的语言特性。 ]，数据操作逻辑更清晰、更顺畅，也更容易与第三方数据同步方案集成。

图2 Vue.js的数据观测和数据绑定实现图解

组件系统

大型APP应用程序需要将APP应用程序抽象为多个相对独立的模块，以实现分工、复用和可维护性。 在传统的开发模式中，只有在考虑重用时，才会将某个部分作为组件。 但实际上，可以认为APP应用类UI都由组件树组成： 。

图3 UI=组件树

因此，Vue.js的设计以组件为核心概念。 可以说所有的vue.js APP应用程序都是围绕组件开发的。

注册Vue.js组件很容易。

vue.com ponent (我的组件)，

//模板

template : ' div { { msg } } { privatemsg }/div }，

//接受参数

props: {

msg: Stringbr

(，

//私有数据必须用函数返回，以便多个实例不共享一个对象

data :功能{

返回{

privateMsg: 'component！'

}

}

} )注册后，可以在父组件模板中将子组件作为自定义元素调用。

我的组件msg=' hello ' /我的组件渲染结果：

div hello组件！ /divVue.js的组件可以理解为预定义行为的ViewModel类。 一个组件可以预定义许多选项，但最重要的是：

模板：模板声明数据与最终呈现给用户的DOM之间的映射关系。 初始数据(data ) :组件的初始数据状态。 对于可复用组件，这通常是私人状态。 接受的外部参数(props ) :在组件之间通过参数传递和共享数据。 参数的缺省设置是从上到下的单向绑定，但也可以显式声明为双向绑定。 方法(methods ) :对数据的更改操作通常在组件的方法中发生。 可以使用v-on命令绑定用户输入事件和组件方法。 生命周期挂接函数(lifecycle hooks ) :一个组件调用多个生命周期挂接函数(created、attached、destroyed等)。 这些挂接函数可以封装自定义逻辑。 与传统的MVC相比，控制器的逻辑可以理解为分散在这些挂钩函数中。 专用资源(assets ) :在Vue.js中，用户自定义的命令、过滤器、组件等统称为资源。 因为全局注册资源容易导致名称冲突，所以一个组件可以声明自己的专用资源。 专用资源只能由该组件及其子组件调用。 此外，同一组件树中的组件之间还可以通过内置事件API进行通信。 Vue.js为定义、重用和嵌套组件提供了完善的API，使开发人员能够像积木一样在组件中组装整个APP应用程序的接口。 这一观点的可行性在Facebook开源React中也得到了证实。

基于构建工具的单文件组件格式

Vue.js核心库只提供基本的API，本身对如何组织APP应用程序的文件结构没有太大的限制。 但是，如果要构建大型APP应用程序，建议使用Webpack vue-loader组合来更高效地开发组件。

Webpack是由Tobias Koppers开发的开源前端模块构建工具。 基本功能是将以模块格式编写的多个JavaScript文件打包到一个文件中，同时支持CommonJS和AMD格式。 但是，与此不同的是，它提供了一个强大的loader API，用于定义各种文件格式的预处理逻辑，使CSS、模板和自定义文件格式可以用作JavaScript模块。 Webpack还提供了许多高级功能，包括基于loader的自动分块按需加载功能、自动定位图像资源引用、确定是否根据图像大小在base64线上进行，以及在开发时热交换模块

我以Webpack的loader API为基础开发了Vue-loader插件，可以用这种单文件格式*.vue编写vue组件。

斯泰尔斯

. my-component h2 {

color: red；

}

/style

模板

div class='my-component '

h2Hello from {{msg}}/h2

other-component/other-component

/div

/template

脚本

遵循CommonJS模块格式

varother component=require './other-component ' )

//导出组件定义

module.exports={

data :功能{

返回{

msg: 'vue-loader '

}

(，

组件： {

' other-component ' : other component

}

}

在/script的同时，也可以将其他预处理器用于*.vue文件。 只需安装对应的Webpack loader。

style lang='stylus '

. my-component h2

颜色红色

/style

template lang='jade '

div.my-component

h2 Hello from {{msg}}

/template

脚本lang=' babel '

用Babel编译ES2015

导出默认值{

数据{

返回{

msg: 'Hello from Babel！'

}

}

}

像/script这样的组件格式可以将一个组件的模板、样式和逻辑三个元素组合到一个文件中，从而使开发变得更容易，也更容易重用和维护。 Vue.js本身还支持组件异步加载，并且与Webpack的块打包功能配合使用，可以非常轻松地实现组件的异步按需加载。

其他特性

Vue.js有几个有趣的特性：

批量更新异步DOM :大量数据更改时，所有受影响的watcher都会推入一个队列，每个watcher只进行一次队列。 此队列在进程的下一个“tick”中异步运行。 此机制可避免因同一数据多次波动而导致的额外DOM操作，确保所有DOM写入操作一起执行，并避免因读写DOM而导致的布局。 动画系统： Vue.js提供了一个简单强大的动画系统，当一个元素的可见性发生变化时，用户不仅可以方便地定义相应的CSS Transition或Animation效果，而且可以方便地定义丰富的JavaScript效果可扩展性：除了自定义命令、过滤器和组件之外，Vue.js还提供灵活的mixin机制，允许用户在多个组件中重用通用功能。

了解

与Web Components的异同

web组件的读者看到这里可能会产生疑问。 Vue.js的组件和web组件的区别在哪里呢？ 现在让我们来简单分析一下。

更好的比较对象可能是Polymer，因为Web Components是基础规范，不具有数据绑定、动画系统等高级功能。 Polymer与API在功能上类似于Vue.js，但由于对Web Components的高度依赖，浏览器支持存在问题。 不支持—— web组件规范的浏览器需要加载大量的poly文件，不仅具有性能，还有ShadowDOM等功能，同时web组件规范本身还不确定相反，Vue.js在支持的浏览器(IE9 )中没有任何依赖关系。

此外，在支持web组件的环境中，通过使用web组件的底层API将Vue.js组件封装到真正的自定义元素中，可以将Vue.js组件和其他框架封装到框架中

总结

发布之初，Vue.js原本着眼于轻量级嵌入式设备的使用场景。 即使在今天，Vue.js也适用于这样的场景。 重量轻(22kb min gzip )，性能高，所以也很适合移动场景。 更重要的是，要设计完整的组件系统及其相应的构建工具和插件，使Vue.js在保持简单API的同时，完全有能力开发复杂的大型APP应用程序。

在从诞生到现在的一年半的历史中，Vue.js经历了彻底的重构，经历了多次API的设计改进，现在已经稳定，测试覆盖率长期保持在100%，github bug的数量长期保持在一位数，在世界各地已经是公司Vue.js将在2015年晚些时候发布1.0版，敬请期待。

【参考链接】

Vue.js官网： http://vuejs.org

本文选自程序员电子版2015年8月a刊。 这段时间的更多文章请看这里。 自2000年创刊以来，所有的文章目录都请看程序员的封面表演。 欢迎使用面向程序员的电子版(包括iPad版、安卓版和PDF版)。

欢迎来到CSDN前端交流集团2:465281214。 进行前端技术交流。

扫描以下二维码，加入CSDN前端大礼堂微信群，享受高含金在线公开课的同时，还可以与专家讲师在线切磋交流。 如果组受到限制，请以“Rachel_qg”为朋友，注明“参加CSDN前端大礼堂”，申请加入组。 ）

最近的CSDN前端大礼堂课程预告：

分享主题概述： React带来的革命性创新是前端世界过去几年中最令人兴奋的变化。 自从接触到React以来，React确信它将彻底改变客户端开发人员(包括前端、iOS和安卓)的开发体验。 本公开课将从目标平台(targets )、数据处理(data )、工具)、新挑战四个大方向分享React生态系统和社区发展及未来趋势。 它还在线回答前端开发人员在使用React时遇到的困难。

主讲人介绍：郭达峰，Strikingly.com CTO，联合创始人，有多年前端开发经验。 2010年开发了3个Facebook平台APP，获得千万以上的用户。 2012年成立台站平台Strikingly，成为首批进入YC孵化器的中国人团队。 Strikingly.com已经使用React重写了大部分的APP应用程序，是国内经常使用React的公司之一。