企业网站建设的优缺点,太原百度关键词推广,网页设计与制作微课教程第4版李敏,北京优化网站外包公司Vue.js 作为一个优秀的前端框架#xff0c;方便前端开发者快速开发应用的前端#xff0c;在实际项目中使用得比较普遍。 当然 Vue.js 也不是实际项目中唯一的前端框架#xff0c;比较优秀的前端框架还有 React、AngularJS 和 Angular等。接下来就介绍一下 Vue.js 同这3个框架…Vue.js 作为一个优秀的前端框架方便前端开发者快速开发应用的前端在实际项目中使用得比较普遍。 当然 Vue.js 也不是实际项目中唯一的前端框架比较优秀的前端框架还有 React、AngularJS 和 Angular等。接下来就介绍一下 Vue.js 同这3个框架的对比。
1. Vue.js 同 React 的对比
React 和 Vue.js 有许多相似之处主要有下几点
使用虚拟 DOM。提供了响应式Reactive和组件化Composable的视图组件。将注意力集中在核心库而将其他功能如路由和全局状态管理交给相关的库。 Vue.js 同 React 的不同之处有以下几方面。
1) 运行时性能
React 和 Vue.js 的运行速度都是非常快的所以速度并不是在它们之间做选择的决定性因素但是在 React 应用中当某个组件的状态发生变化时它会以该组件为根重新渲染整个组件的子树。如果要避免不必要的子组件重新渲染开发者需要使用 PureComponent 或手动实现 shouldComponentUpdate() 方法而且需要非常细心。 而在 Vue.js 应用中组件的依赖是在渲染过程中自动追踪的所以系统能精确知晓哪个组件确实需要被重新渲染从而使开发者不再需要考虑此类优化只需更好地专注于应用本身。
2) HTML CSS
在 React 中所有组件的渲染都依靠 JSXJavaScript XML完成。使用 JSX 的渲染函数有下面几点优势。
可以使用完整的编程语言 JavaScript 的功能来构建视图页面。例如可以使用临时变量、JS 自带的流程控制以及直接引用当前 JS 作用域中的值等。开发工具对 JSX 的支持相比于现有可用的其他 Vue.js 模板还是比较先进的例如linting、类型检查、编辑器的自动完成等。 Vue.js 中默认推荐的是模板Vue.js 内部也提供了渲染函数甚至支持JSX。任何合乎规范的 HTML 都是合法的 Vue.js模板这也带来了以下几点特有的优势。
对于很多习惯了 HTML 的开发者来讲模板比 JSX 读写起来更自然。基于 HTML 的模板使将已有的应用逐步迁移到 Vue.js 更为容易。使设计师和新人开发者更容易理解和参与到项目中。可以使用其他模板预处理器例如 Pug来书写 Vue.js 的模板。 在 React 中通过 CSS-in-JS 方案实现 CSS 作用域这引入了一个新的面向组件的样式范例它和普通的 CSS 的撰写过程是有区别的。 另外虽然在构建时支持将 CSS 提取到一个单独的样式表但 bundle 中通常还需要一个运行时程序来让这些样式生效。开发者在能够利用 JavaScript 灵活处理样式的同时也需要权衡 bundle 的大小和运行时的开销。 Vue.js 样式设置的默认方式是在单文件组件里用 style 的标签定义。同时还可以使用 style 标签的 scoped 属性来指定样式的作用域。
3) 规模
从向上扩展的角度来讲Vue.js 和 React 都提供了强大的路由来应对大型应用。
React 社区在状态管理方面非常有创新精神例如 Flux、Redux而这些状态管理模式使得甚至 Redux 本身也可以非常容易地被集成在 Vue.js 应用中。实际上Vue.js 更进一步地采用了这种模式Vuex更加深入集成了 Vue.js 的状态管理解决方案 Vuex能为开发者带来更好的开发体验。 两者的另一个重要差异是
Vue.js 的路由库和状态管理库都由官方维护且与核心库同步更新。React 则选择把这些问题交给社区维护因此创建了一个更分散的生态系统但相对地React 的生态系统相比 Vue.js 更加繁荣。 最后Vue.js 提供了 CLI 脚手架能让开发者通过交互式的脚手架引导非常容易地构建项目。开发者甚至可以使用它快速开发组件的原型。 React 在这方面也提供了 createreact-app但是现在还存在以下局限性
它不允许在项目生成时进行任何配置而 Vue CLI 运行于可升级的运行时依赖之上该运行时可以通过插件进行扩展。它只提供了一个构建单页面应用的默认选项而 Vue.js 提供了各种用途的模板。它不能用用户自建的预设配置构建项目而这对企业环境下预先建立约定是特别有用的。 从向下扩展的角度来讲React 学习曲线陡峭在开发者开始学 React 前需要知道 JSX 和 ES2015因为许多示例用的是这些语法。开发者需要学习构建系统虽然在技术上可以用 Babel 来实时编译代码但是这种做法并不推荐用于生产环境。 就像 Vue.js 向上扩展后类似于 React 一样Vue.js 向下扩展后就类似于 jQuery。开发者只要把如下标签放到页面中就可以运行。
script srchttps://cdn.jsdelivr.net/npm/vue/script
然后就可以编写 Vue.js 代码并应用到生产中只要用 min 版 Vue.js 文件替换掉即可不用担心其他的性能问题。 由于起步阶段不需学习 JSX、ES2015 及构建系统所以开发者只需不到一天的时间阅读指南就可以建立简单的应用程序。
4) 原生渲染
React Native 能使开发者用相同的组件模型编写有本地渲染能力的 AppiOS和Android。能同时跨多平台开发对开发者来讲是非常棒的。 相应地Vue.js 和 Weex 会进行官方合作。 Weex 是阿里巴巴发起的跨平台用户界面开发框架同时也正在 Apache 基金会进行项目孵化Weex 允许使用 Vue.js 语法开发不仅可以运行在浏览器端还能被用于开发 iOS 和 Android 上的原生应用的组件而且 Weex 还在积极发展尽管成熟度还不能和 React Native 相抗衡但是Weex 的发展是由世界上最大的电子商务企业的需求在驱动而 Vue.js 团队也会和 Weex 团队积极合作相信会为开发者带来更好的开发体验。
2. Vue.js 同 AngularJSAngular 1的对比
Vue.js 的一些语法和 AngularJS 的语法很相似例如 v-if VS ng-if因为 AngularJS 是 Vue.js 早期开发的灵感来源而 AngularJS 中存在的许多问题在 Vue.js 中已经得到解决。 Vue.js 同 AngularJS 的区别可以体现在如下几方面。
1)复杂性
在 API 与设计两方面上Vue.js 都比 AngularJS 简单得多因此开发者可以快速地掌握它的全部特性并投入开发。
2) 灵活性和模块化
Vue.js 是一个更加灵活开放的解决方案。它允许开发者以希望的方式组织应用程序而不是在任何时候都必须遵循 AngularJS 制定的规则这让 Vue.js 能适用于各种项目。
由开发者把握决定权是非常必要的。
Vue CLI 旨在成为 Vue.js 生态系统中标准的基础工具。它使多样化的构建工具通过妥善的默认配置无缝协作在一起这样开发者就可以专注于应用本身而不会在配置上花费太多时间。 同时它也提供了根据实际需求调整每个工具配置的灵活性。
3) 数据绑定
AngularJS 使用双向绑定而 Vue.js 在不同组件间强制使用单向数据流这使应用中的数据流更加清晰易懂。
4) 指令与组件
在 Vue.js 中指令和组件分得更清晰。指令只封装了 DOM 操作而组件代表了一个自给自足的独立单元——有自己的视图和数据逻辑。 在 AngularJS 中每件事都由指令来做而组件只是一种特殊的指令。
5) 运行时性能
Vue.js 有更好的性能并且非常容易优化因为它不使用脏检查。 在 AngularJS 中当 watcher 越来越多时会变得越来越慢因为作用域内的每一次变化之后所有 watcher 都要重新计算并且如果一些 watcher 触发了另一个更新则脏检查循环Digest Cycle可能要运行多次。 AngularJS 用户常常要使用深奥的技术以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。 Vue.js 则根本没有这个问题因为它使用基于依赖追踪的观察系统并且采用异步队列更新的方式所有的数据变化都是独立触发的除非它们之间有明确的依赖关系。
3. Vue.js 同 AngularAngular 2的对比
Angular 同 AngularJS 的名称虽然差不多但是它们是两个完全不同的框架。Angular 具有优秀的组件系统并且很多实现都重写了API 也完全改变了。 Vue.js 同 Angular 的区别主要体现在以下几方面。
1) TypeScript
Angular 事实上必须用 TypeScript 来开发因为它的文档和学习资源绝大部分是面向 TypeScript 的。TypeScript 有很多好处——静态类型检查在大规模的应用中非常有用同时对于拥有 Java 和 C# 背景的开发者也非常容易提升开发效率。 然而并不是所有人都想用 TypeScript——在中小型项目中引入 TypeScript 可能并不会带来太多明显的优势。在这种情况下用 Vue.js 会是更好的选择因为在不用 TypeScript 的情况下使用 Angular 会很有挑战性。 最后虽然 Vue.js 和 TypeScript 的整合可能不如 Angular 那么深入但 Vue.js 也提供了官方的类型声明和组件装饰器并且已有大量用户在生产环境中使用 Vue.jsTypeScript 的组合。 Vue.js 也和微软的 TypeScript/VSCode 团队进行着积极的合作其目标是为 Vue.jsTypeScript 用户提供更好的类型检查和 IDE 开发体验。
2) 体积
在体积方面最近的 Angular 版本在使用了 AOT 和 tree-shaking 技术后最终的代码体积减小了许多但即使如此一个包含了 VuexVue Router 的 Vue.js 项目的大小gzip 之后在大约为 30KB相比上述优化后的 angular-cli 生成的默认项目的大小大约为65KB还是要小得多。
3) 灵活性
Vue.js 相比于 Angular 更加灵活Vue.js 官方提供了构建工具来协助开发者构建项目但它并不限制开发者如何组织他们的应用代码。 有人可能喜欢严格的代码组织规范但也有开发者喜欢更灵活自由的方式。
4) 学习曲线
要学习 Vue.js开发者只需有良好的 HTML 和 JavaScript 基础。有了这些基本的技能开发者就可以非常快速地通过阅读指南投入开发。 Angular 的学习曲线是非常陡峭的——作为一个框架它的 API 比 Vue.js 要大得多开发者也因此需要理解更多的概念才能开始有效率地工作。 当然Angular 本身的复杂度是因为它的设计目标就是只针对大型的复杂应用但不可否认的是这也使它对于经验不甚丰富的开发者相当不友好。
