Vue.js 2.0 和 React、Augular等其他前端框架大比拼(2)

你可以使用的完整的编程语言JavaScript来构建你的视图页面。
工具对JSX的支持相比于现有可用的其他Vue模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)。
在 Vue 中,由于有时需要用那些功能,我们也提供了渲染功能 并且 支持JSX 。然而,对于大多数组件来说,渲染功能是不推荐使用了。

在这方面,我们提供的是个更简单的模板:

<template> <div> <ul v-if="items.length"> <li v-for="item in items"> {{ item.name }} </li> </ul> <p v-else>No items found.</p> </div> </template>

优势如下:

在写模板的过程中,样式风格已确定和更少地涉及业务逻辑。

一个模板总是被声明的。

模板中任何 HTML 都是有效的。

阅读起来更像英语(比如,for each item in items)。

高级版本的 JavaScript 增加可读性。

这样,不仅开发人员更容易编写代码,设计人员和开发人员也可以更容易的分析代码和贡献代码。

还没有结束。Vue拥抱HTML,而不是用JavaScript重塑它。在模板内,Vue也允许你用预处理器比如Pub(原名 Jade) 。

React 生态也有一个项目允许你写模板,但是有一些缺点:

功能远没有 Vue 模板系统的丰富。

需要从组件文件中分离出HTML代码。

这是个第三方库,而非官方支持,可能未来核心库更新就不再支持。

CSS的组件作用域

除非你把组件分布在多个文件上(例如 CSS Modules),要不作用域内的CSS就会暴警告。非常简单的CSS还可以工作,但是稍微复杂点的,比如悬停状态、媒体查询、伪类选择符要么会被修改要么就不能用。

Vue让你可以完全访问 单文件组件 。

<style scoped> @media (min-width: 250px) { .list-container:hover { background: orange; } } </style>

这个可选 scoped 属性自动添加一个唯一的属性(比如 data-v-1 )为组件内CSS指定作用范围,编译的时候 .list-container:hover 会被编译成类似.list-container[data-v-1]:hover。

最后,你可以选择自己偏爱的CSS预处理器编写CSS。这可以让你围绕设计为中心展开工作,而不是引入库来增加你应用的容量和复杂度。

规模

扩大

Vue和React都提供了强大的路由来应对对于大型应用。React社区在状态管理方面非常有创新精神(比如Flux、Redux),而这些状态管理模式甚至 Redux本身 也是非常容易能够集成在Vue应用中的。实际上,Vue更进一步地采用了这种模式(Vuex),把Vuex集成进Vue能带来更好的开发体验。

两者另一个重要差异是,Vue伴随的路由库和状态管理库都是由官方支持维护且和核心库同步更新的。React 生态更成熟,选择是把这些问题交给社区维护。

最后,Vue 提供了一个Vue-cli 脚手架,能让你非常容易地构建项目,可以包含 Webpack, Browserify, 或者 no build system。React在这方面也提供了create-react-app,但是现在还有一些局限性:

它不允许在项目生成时进行任何配置,而Vue运行Yeoman-like定制。

它只提供一个构建单页面应用的单一模板,而Vue 提供各种用途的多种模板。

它不能用用户自建的模板构建项目,而这对企业环境预先建立协议是很有用。

注意这些限制是故意设计的,这有它的优势。例如,如果你的项目需求非常简单,你就不需要自定义生成过程。你能把它作为一个依赖来更新。如果阅读更多关于不同的设计理念。

缩小

React学习曲线陡峭,在你开始学 React 前,你需要知道 JSX 和 ES2015,因为许多示例用的是这些语法。你需要学习构建系统,虽然你可以在技术上可以用 Babel Standalone 来编译代码,但是不推荐用于生产。

Vue样扩大后就像React,缩小后就像 Jquery。你需要做的就是把如下标签放到页面就行:

<script src="https://unpkg.com/vue/dist/vue.js"></script>

然后就可编写Vue代码并应用到生产中,而不用担心性能问题。

由于起步阶段不需学JSX,ES2015 或构建系统,所以建立应用花的时间会更少。

本地渲染

ReactNative能使你用相同的组件模型编写有本地渲染能力的APP(IOS或Android)。能同时跨多平台开发,对开发者是非常棒的。相应地,Vue和Weex会进行官方合作,Weex是阿里的跨平台用户界面开发框架,Weex 的 JavaScript 框架运行时用的就是Vue。这以为着不仅在浏览器,在 IOS 和 Android 上面也可以用 Vue 来进行开发。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjyzs.html