在过去的十年中，由于有了JavaScript，网页已变得动态和强大。成都网站建设已经将更多代码从服务器端移到了浏览器，这使我们的代码变得混乱。这就是JavaScript开发人员开始使用Angular和React之类的JavaScript框架的原因。
Angular和React非常流行，尽管也出现了许多新的前端JavaScript框架。一个迅速流行的新贵是Vue.js。根据NPM软件包管理器报告的下载趋势，截至2018年2月，Vue略落后于Angular。
Vue易于学习，因此您可以立即开始构建第一个应用程序。Vue采用了React和Angular的最佳概念，使其简洁，简洁，并让开发人员专注于完成工作。
Vue继承了React和Angular的那些概念是什么，它们有助于解决什么问题？
我们将立即发现答案。
Vue是一个用于构建用户界面的渐进框架。这意味着，如果您有现有的服务器端应用程序，则可以将Vue仅插入应用程序中需要更多生产性和交互式体验的特定部分。
与其他整体框架不同，Vue从头开始设计以逐渐采用。
Vue是一种平易近人，功能强大且性能卓越的JavaScript框架，可帮助您创建可维护的代码库。到目前为止，一些开发人员认为这是对JavaScript的最重大更改。
它的核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。但是，它还完全能够为复杂的单页应用程序（SPA）提供支持，并提供现代工具和支持库。
Vue的最大好处是没有血统书。它是新鲜的，几乎没有行李。它是从React和Angular的错误和成功中学到的。
Angular是一个包含其工具和最佳实践的完整框架。反过来，React则是一个库。尽管如此，两者都有各自的长处，这是Vue最好的继承自React和Angular的东西。
React和Angular都有基于组件的模型，而Vue继承了这一重要概念。
基于组件的模型是一种抽象，使您可以构建由小型，自包含且经常可重复使用的组件组成的大规模应用程序：标题，导航栏，主布局，侧边栏，页脚等。
使用多个独立组件是构建SPA的正确方法。该概念为前端开发人员提供了一组可扩展的，建立良好的和可重用的组件，并有助于加快开发速度。
动画是2010年代后期的王者。与广告牌如何从静态变为动画一样，网站和应用程序也正在变得动画化。
React和Angular都有内置的动画解决方案，并通过功能性的动画组件增强Vue的功能。
AngularJS中的动画完全基于CSS类，并通过ngAnimate模块实现。只要您在应用程序中的HTML元素上附加了CSS类，就可以对其应用动画。
至于React，它有一个受ngAnimate启发的动画高级API （ReactCSSTransitionGroup）。
Vue允许您执行单个组件动画，列出动画，初始渲染时的过渡，元素和组件之间的过渡以及动态过渡。
使用Vue，您可以与观察者一起创建状态转换，以动画化数字和计算，颜色，SVG节点的位置，大小以及元素的其他属性。Vue允许您使用第三方库，反应性和组件系统将这些状态更改动画化为补间状态。
Vue及其过渡包装器组件中语法的简单性使您可以在任何元素或组件上执行过渡。
实施方法如下：
现成组件的可用性有助于减少代码量，使模板更易于阅读，并简化您的生活。
JavaScript框架在客户端呈现页面。但是，也可以在服务器上将相同的组件呈现为HTML，然后将它们直接发送到浏览器。
服务器端渲染是在客户端上构建应用程序的一种方法。简而言之，服务器端渲染有助于在屏幕上显示信息。默认情况下，Vue组件在浏览器中构建和处理DOM。但是，您也可以在服务器上通过HTML呈现相同的组件，将它们发送到浏览器，并将静态标记“添加”到交互式客户端应用程序中。
服务器端渲染旨在在屏幕上显示信息。它通过将服务器中的HTML文件转换为浏览器的可用信息来工作。这种方法还使搜寻器可以接收完整的网站内容，从而使搜索引擎更容易分析和索引您的网站。
从本质上讲，服务器端渲染对SEO很有好处。确保在社交网络上共享内容；改善用户体验，缩短发布时间和提高性能；并且可以处理高流量。
这三个框架（React，Angular和Vue）都有库来帮助服务器端渲染。对于React，有内置的ReactDOMServer对象和Next.js框架，Angular具有Angular Universal，Vue具有Nuxt.js。
Nuxt.js是建立在Vue生态系统之上的高级框架。它为编写通用Vue应用程序提供了极为精简的开发经验。更好的是，您甚至可以将其用作静态站点生成器。
通过本机渲染，您可以跨多个平台应用对一个框架的了解，从而仅使用JavaScript构建移动应用程序。您可以使用React Native在React中构建跨平台应用程序，并相应地将Ionic和NativeScript与Angular结合使用。
在这一方面，Vue与跨平台UI框架Weex进行了正式合作。Weex允许您从同一代码库为Web（HTML），Android和iOS生成构建。
Vue开发人员的另一个选择是通过社区驱动的插件的NativeScript。
Weex和NativeScript都可以帮助您创建自适应的平台本地UI，并针对特定设备和屏幕进行量身定制。
React和Vue非常相似。两者都是用于创建应用程序前端的JavaScript库。它们各自的生态系统使我们能够轻松地围绕React和Vue构建框架。让我们看一下从React继承的使Vue功能强大且高效的组件。
React和Vue都有一个虚拟DOM（文档对象模型），可以提高性能。
DOM是树状结构文本的抽象。因此，虚拟DOM依次是抽象的抽象。虚拟DOM包含由JavaScript对象组成的轻量级树，这些对象是DOM树的轻量级副本。
如今，DOM树非常庞大。由于我们越来越倾向于SPA，因此我们需要大量修改DOM树。这就是Vue和React所设计的。
他们的虚拟DOM是轻量级且跨浏览器的。这种方法使您可以提高开发速度。在这种情况下，Vue对虚拟DOM的实现更加轻巧，这使Vue表现出了更好的性能。
Vue在模板到虚拟DOM的编译阶段应用了一些高级优化：
它确定静态类的名称和属性，以确保它们在初始渲染后不会发生变化。
它检测没有动态绑定的最大静态子树并将其从渲染函数中选取。因此，在每次重新渲染时，Vue都会跳过差异并重新使用相同的虚拟节点。
在React中，可以使用JSX在渲染函数中用其UI来表示响应元，JSX是一种在JavaScript中工作的类似于XML的声明性语法。
JSX的渲染功能具有一些优势。它们使您可以利用JavaScript的全部功能来构建视图并为JSX提供广泛的工具支持：插入，类型检查，编辑器自动完成等。
Vue还具有渲染功能和JSX支持。此外，Vue提供了一种基于常规HTML的替代语法。使用基于HTML的模板，可以通过减少学习时间来提高开发人员的生产力，并使他们更容易解析和贡献代码库。
基于HTML的模板旨在简化现有应用程序的迁移，使用预处理器（HAML，Pug），并导致完全实现Vue的反应性功能。
我们可以将框架组件分为两类：表现型和逻辑型。对于呈现组件，建议使用模板语法，而对于逻辑组件，建议使用呈现功能和JSX。
JSX为开发提供了很大的优势，因为它将所有内容放在一个地方，使代码完成和编译时检查更好地工作，并且作为以前的React概念，它以JS为中心。
为了支持JSX，Vue需要babel-plugin-transform-vue-jsx。
让我们看一下渲染功能和JSX在Vue和React中的外观。
视图层是现代SPA框架的关键部分。毕竟，这就是SPA的重点：它们简化了获取丰富的交互式视图的方式。基本上，视图层是用于将数据传入和传出应用程序的通道。
视图负责完成以下任务：
渲染模板。我们需要一种将数据映射到HTML的方法。
更新视图以响应更改事件。当模型数据更改时，我们需要更新相关视图以反映新数据。
通过事件处理程序将行为绑定到HTML。当用户与视图HTML交互时，我们需要一种触发行为的方法。
提供执行这些任务的标准机制或约定。
由于Vue和React的核心库专注于视图层，因此配套库可以处理其他任务，例如路由和全局状态管理。React的配套库是react-router和redux，而Vue具有vue-router和vuex库。
专注于视图层使Vue或React与第三方库和现有项目的集成变得容易。反过来，这使Vue和React比Angular更灵活。
Angular是一个成熟的Web框架，具有全套工具和概念，可简化前端开发人员的生活。以下是Vue继承的一些内容。
指令是引入新语法的内容。伪指令是DOM元素上的标记，这些标记将特殊行为附加到其上。指令的工作是在其表达式的值发生更改时以响应方式将副作用施加到DOM。
如果您之前编写过Angular应用程序，那么无论您是否意识到，都曾经使用过指令。您可能使用了简单的指令，例如ng-model，ng-repeat，ng-show等。所有这些指令将特殊行为附加到DOM元素。
Vue继承了Angular基于指令的语法。特别是，Vue具有带有v-前缀的特殊指令，该指令在表单元素和变量之间提供双向数据绑定，我们将在下一节中介绍。
除了默认的Vue核心指令集（v-model和v-show），Vue还允许您注册自定义选项。当涉及对普通元素的低级DOM访问时，自定义指令很有用。
数据绑定是将数据模型连接到用户界面的机制。数据绑定有三种主要形式：一次性，单向和双向。选择正确的选择涉及很多考虑。
通过单向和单向数据绑定，数据从模型流到用户界面。双向数据绑定包括单向绑定，并且还允许从DOM绑定回JavaScript。
这就是Angular的亮点：它鼓励在组件内使用双向数据绑定技术来进行琐碎的Model-UI更新。Angular在范围之间使用双向绑定，而Vue在组件之间强制执行单向数据流。这使数据流在非平凡的应用程序中更易于理解。
我们可以使用Vue中的v-model指令和Angular中的ng-model来执行数据绑定：
尽管对于观察者及其有用性存在不同的观点，但仍有一些时候需要自定义观察者。
在Angular中，您基本上可以在使用内置Angular指令（ng-show，ng-if，ng-repeat）的任何时间创建观察者。对于每个观察者，都将相应的功能添加到摘要循环。摘要循环又使双向数据绑定成为可能。尽管如此，使用观察程序仍然有其缺点，性能问题是最重要的。
Vue通过watch选项提供了一种更通用的方式来处理数据更改。在大多数情况下，计算属性是一个更合适的解决方案。但是，在Vue中，当您要执行异步或昂贵的操作以响应更改的数据时，监视程序最有用。
观察者还有助于限制执行异步或昂贵操作的频率以及设置中间状态。这是计算属性无法完美应对的。
Vue和Angular都实现了可在标记内使用的特殊过滤器语法。过滤器是必不可少的功能，它可以选择一个值，对其进行处理，然后返回处理后的值。这两个框架都具有有用的内置过滤器以及对自定义过滤器的支持。
Vue允许您定义可用于应用通用文本格式的过滤器。过滤器在两个地方可用：小胡子插值和 v-bind 表达式。在这里，您可以找到 Vue提供的过滤器列表。
除此之外，Angular和Vue的实现是相同的。
在本概述中，我们只是从头开始，但我们希望这些关键点能帮助您了解Vue专注于保持轻快。尽管如此，其生态系统中还有很多可以帮助您构建，组织和扩展前端应用程序的东西。
Vue为React和Angular问题提供了成都网站建设更多的解决方案，并为您提供了一种更加简单易用的编码方式。我们相信，如果JavaScript对您不再有乐趣，Vue将帮助您再次找到乐趣。
