Vue In Action 实战Vue–Vue.js介绍(一)

18 1月

什么是 Vue.js

Vue.js 是一款基于组件化的 MVVM 前端 JS 框架.

什么叫组件化, 即除了基础的数据绑定, 页面渲染等功能外, 你可以选择性地添加比如 URL 路由, HttpResource 请求(Ajax), resource loader 等等功能组件.

什么叫 MVVM 模式, 即不同与MVC, MVP 的 Model-View-ViewModel 模型. View 层的变化会自动同步更新到 ViewModel 中, 同时 ViewModel 的变化也会同步到 View 上:

为什么使用 Vue.js

1.轻量级

打包后的 Vue.js差不多只有50来 kb, 在不依赖其他库还包含这么全的功能的前端 JS 框架, 它已经是非常令人吃惊的了.

2.易上手

它的 API 设计非常的人性化和优美, 我在学习的时候不禁感叹, 我想要的就是这样的 API 啊! 另外, 你如果熟悉 React, 你可以在这里找到很多 component 的影子, 如果你熟悉 Angular, 你也可以找到很多 html 数据绑定和渲染的方式! 没错, 它就是这么”平易近人”!

3.效率高

如果你去网上搜一下 Vue 和 React/Angular 渲染效率对比, 你会发现 Vue 要好非常多, 就不附上网上搜出来的图了. Vue 主要采用的是 DOM 模板, 模板中提供了很多指令和过滤器. Vue2.0 也支持虚拟 DOM ( Virtual DOM ).

4.插件化

Vue 可以实现包含渲染, 数据绑定, http Resource 请求, resource load, url router 等等功能, 这些都是以插件化的形式存在的. 也就是说, 如果你需要, 你可以只使用其中部分功能来减少依赖 js 的大小, 或者你选择其他 js 库来替代其中的功能等.

5.GitHub以及第三方社区

Vue.js 在 Github 上已经有近4万颗星了, 第三方社区也相当的活跃, 如果遇上了问题, 那么会有很多的渠道去寻找答案, 你也可以向很多人寻求帮助. 不要担心知识库不够! 而且开发工具众多, 包括 IDE 的支持, 以及 Chrome Debug插件等等. 非常方便.

与 React 和 Angular 的区别

Angular:

都支持指令, 比如 ng-if / ng-show / ng-model等等, 只不过 Vue 的换成了v-*开头, 同时也支持自定义指令.

都支持数据的双向绑定和数据过滤. 用过 Angular 的小伙伴可能比较熟悉双向绑定, 无论 js 修改数据, 还是页面修改数据, 都会相互更新. 也支持类似 | 操作符去过滤数据, 比如: “date | json”.

Vue 有着比 Angular 更全更优雅的 API, 比如 Validation. 后文实战中我们会细讲.

性能上 Angular 会对数据做脏检查, 绑定的数据越多越慢. 而 Vue 实现的方式是 Observer 观察异步队列更新. 所以数据绑定越多, 相对优势就更明显.

React:

Component 可能都是两者推崇的. 你会发现 html 几乎全是由各种 component 组成的. Vue 也会有自己的约定文件 .vue 结尾.

都是插件化, 类似前面说的 Ajax, URL router 等都是可定制加载的.

但是 React 是依赖纯 Virtual DOM, 而且会做脏检查, Vue 不仅支持 DOM 模板, 也支持 Virtual DOM. 性能也会快很多.

下一篇: Vue In Action 实战Vue–搭建一个空项目(二)

发表评论

电子邮件地址不会被公开。