Vue.js特点

Vue.js的核心

通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 的数据驱动,即数据改变驱动了视图的自动更新,传统的做法你得手动改变 DOM 来改变视图,Vue.js 只需要改变数据,就会自动改变视图。再也不用你去操心 DOM 的更新了,这就是 MVVM 思想的实现。

视图组件化,即把整一个网页的拆分成一个个区块,每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。

Vue.js的优点

双向数据绑定

也就是所谓的响应式数据绑定。即 Vue.js 会自动对页面中某些数据的变化做出同步的响应。

也就是说,Vue.js 会自动响应数据的变化情况,并且根据用户在代码中预先写好的绑定关系,对所有绑定在一起的数据和视图内容都进行修改。而这种绑定关系,就是以 input 标签的 v-model 属性来声明的,因此你在别的地方可能也会看到有人粗略的称 Vue.js 为声明式渲染的模版引擎。

这也是 Vue.js 最大的优点,通过 MVVM 思想实现数据的双向绑定,让开发者不用再操作 dom 对象,有更多的时间去思考业务逻辑。

组件化开发

在前端应用,我们是否也可以像编程一样把模块封装呢?这就引入了组件化开发的思想。

Vue.js 通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。

Virtual DOM

现在的网速越来越快了,很多人家里都是几十甚至上百 M 的光纤,手机也是 4G 起步了,按道理一个网页才几百 K,而且浏览器本身还会缓存很多资源文件,那么几十 M 的光纤为什么打开一个之前已经打开过,已经有缓存的页面还是感觉很慢呢?这就是因为浏览器本身处理 DOM 也是有性能瓶颈的,尤其是在传统开发中,用 JQuery 或者原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候,浏览器要不停的渲染新的 DOM 树,导致页面看起来非常卡顿。

而 Virtual DOM 则是虚拟 DOM 的英文,简单来说,他就是一种可以预先通过 JavaScript 进行各种计算,把最终的 DOM 操作计算出来并优化,由于这个 DOM 操作属于预处理操作,并没有真实的操作 DOM,所以叫做虚拟 DOM。最后在计算完毕才真正将 DOM 操作提交,将 DOM 操作变化反映到 DOM 树上。

易于使用

Vue.js 包含基于 HTML 的标准模板,可以更轻松地使用和修改现有应用程序。

顺畅的集成

无论是单页应用程序还是复杂的 Web 界面,Vue.js 都可以更平滑地集成更小的部件,而不会对整个系统产生任何影响。

轻量高效

Vue.js 通过简洁的 API 提供高效的数据绑定和灵活的组件系统

动画系统

Vue.js 提供了简单却强大的动画系统,当一个元素的可见性变化时,用户不仅可以很简单地定义对应的 CSS Transition 或 Animation 效果,还可以利用丰富的 JavaScript 钩子函数进行更底层的动画处理。

Vue.js的缺点

与 Angular 和 React 相比,Vue.js 框架的市场份额仍然很小。它正在快速流行,但与此同时,在使用 Vue.js时,可能会出现大规模应用程序开发方面的问题。

Vue.js与Angularjs对比

Vue.js与Angularjs相同点

  • 都支持指令:内置指令和自定义指令。
  • 都支持过滤器:内置过滤器和自定义过滤器。
  • 都支持双向数据绑定。
  • 都不支持低端浏览器。

Vue.js与Angularjs不同点

  • AngularJS 的学习成本高,比如增加了 Dependency Injection 特性,而 Vue.js 本身提供的 API 都比较简单、直观。
  • 在性能上,AngularJS 依赖对数据做脏检查,所以 Watcher 越多越慢。
  • Vue.js 使用基于依赖追踪的观察并且使用异步队列更新。所有的数据都是独立触发的。对于庞大的应用来说,这个优化差异还是比较明显的。

Vue.js与React对比

Vue.js与React 相同点

  • React 采用特殊的 JSX 语法,Vue.js 在组件开发中也推崇编写 .vue 特殊文件格式,对文件内容都有一些约定,两者都需要编译后使用。
  • 中心思想相同:一切都是组件,组件实例之间可以嵌套。
  • 都提供合理的钩子函数,可以让开发者定制化地去处理需求。
  • 都不内置列数 AJAX,Route 等功能到核心包,而是以插件的方式加载。
  • 在组件开发中都支持 mixins 的特性。

Vue.js与React 不同点

  • React 依赖 Virtual DOM,而 Vue.js 使用的是 DOM 模板。React 采用的 Virtual DOM 会对渲染出来的结果做脏检查。
  • Vue.js 在模板中提供了指令,过滤器等,可以非常方便,快捷地操作 DOM。

Vue.js适用场景

如果你还在用 jquery 频繁操作你的 DOM 来更新页面的话,那么,你可以用 Vue.js 来解放你的 DOM 操作了。

如果你的项目中有多个部分是相同的,并可以封装成一个组件,那么,你可以试试用 Vue.js。

此外,Vue.js 的核心实现中使用了 ES5 的 Object.defineProperty 特性,IE8 及以下版本浏览器是不兼容的,所以,你的项目需要兼容这些较低版本的浏览器的话,那么,Vue.js 就不适用了。

Vue.js特点教程总结

Vue.js 特点是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue 的数据驱动,即数据改变驱动了视图的自动更新,传统的做法你得手动改变 DOM 来改变视图,Vue.js 只需要改变数据,就会自动改变视图。再也不用你去操心 DOM 的更新了,这就是 MVVM 思想的实现。

视图组件化,即把整一个网页的拆分成一个个区块,每个区块我们可以看作成一个组件。网页由多个组件拼接或者嵌套组成。