您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net框架存在的根本原因,更轻更快的V

新葡亰496net框架存在的根本原因,更轻更快的V

发布时间:2019-11-10 05:56编辑:新葡亰官网浏览(93)

    现代 js 框架存在的根本原因

    2018/06/05 · JavaScript · 1 评论 · 框架

    原文出处: [Alberto

    新葡亰496net 1

    我们今天讨论争论的MVC、MVP、MVVM、Code Behind等等都源自于职能分化和规划的思想与目的,MVC不是它们的开始,但是一个很好的开始。

    这篇文章主要是对知乎上关于react的讨论,做一些整理。观点都来自于网络上他人的说法。希望通过这些观点,可以形成自己的关于react的理解。

    更轻更快的Vue.js 2.0

    Gimeno]()   译文出处:[众成翻译

    sea_ljf]()   

    新葡亰496net 2

    我曾见过很多很多人盲目地使用(前端)框架,如 React,Angular 或 Vue等等。这些框架提供了许多有意思的东西,然而通常人们(自以为)使用框架是因为:

    • 它们支持组件化;
    • 它们有强大的社区支持;
    • 它们有很多(基于框架的)第三方库来解决问题;
    • 它们有很多(很好的)第三方组件;
    • 它们有浏览器扩展工具来帮助调试;
    • 它们适合做单页应用。

    新葡亰496net 3

    但这些都不是使用框架的根本原因。

    最最本质的原因是:

    新葡亰496net 4

    (UI 与状态同步非常困难)

    用原生JavaScript开发web应用?恐怕是“石乐志”。在互联网技术更迭如此迅速的时代,我们需要更好的方式来快速开发交互式Web应用程序,这就不得不提JavaScript框架了。JavaScript框架是单页面的Web应用程序开发的核心,并给html和JavaScript注入新的强大的能量。

    MVC

    Model-View-Controller 是最常见的软件架构之一,业界有着广泛应用。

    • 视图(View):用户界面。
    • 控制器(Controller):业务逻辑
    • 模型(Model):数据保存

    新葡亰496net 5

    mvc

    • View 传送指令到 Controller
    • Controller 完成业务逻辑后,要求 Model 改变状态
    • Model 将新的数据发送到 View,用户得到反馈

    崭露头角的JavaScript框架Vue.js 2.0版本已经发布,在狂热的JavaScript世界里带来了让人耳目一新的变化。

    是的,就是这原因,让我们来看看为什么

    假设你正在设计这样一个 Web 应用:用户可以通过群发电子邮件来邀请其他人(参加某活动)。UX/UI 设计师设计如下:(在用户填写任何邮箱地址之前,)有一个空白状态,并为此添加一些帮助信息;(当用户填写邮箱之后,)展示邮箱的地址,每个地址的右侧均有一个按钮用于删除对应的地址。

    新葡亰496net 6

    这个表单的状态,可以被设计为一个数组,里面包含若干对象,对象由邮箱地址和唯一标识组成。开始的时候,数组为空。当(用户)输入邮箱地址并按下回车键之后,往数组中添加一项并更新 UI。当用户点击删除按钮时,删除(数组中对应的)邮箱地址并更新 UI。你感觉到了吗?每当你改变状态时,你都需要更新 UI

    (你可能会说:)那又怎样?好吧,让我们看看如何在不用框架的情况下实现它:

    原生的JavaScript和jQuery一起已经被使用多年,用以构建复杂的网络接口,但在代码开发和维护上需要需要付出巨大的精力。JavaScript框架使用给你足够的空间,去专注于开发用户界面的互动元素,而不用担心太多的代码结构和代码维护。

    MVP

    MVC顺着需求把UI相关的工作分化成了三份,这点经过实践证明无可厚非。但是它们的三角关系却被一些人认为带来了一些问题,或者应该说他们有“更好的”解决方案。

    MVP(Model-View-Presenter) 模式将 Controller 改名为 Presenter,同时改变了通信方向。

    MVP定义了Presenter和View之间的接口,让一些可以根据已有的接口协议去各自分别独立开发,以此去解决界面需求变化频繁的问题。

    新葡亰496net 7

    mvp

    • 各部分之间的通信,都是双向的。

    • View 与 Model 不发生联系,都通过 Presenter 传递。

    • View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

    一个用来构建用户界面的 javascript 库

    react是起源于facebook内部的项目,当时fb的前端团队对当时市面上所有的javascript mvc框架都不满意,决定自己写一套,用来架设Instagram。做出来之后,发现这套东西很好,于是在2013年5月开源了。


    Vue创建者尤雨溪称,Vue 2.0 在性能上有显著的提升,同时保持轻量的文件下载:

    用原生(JS)实现相对复杂的 UI

    以下代码很好地说明了使用原生 JavaScript 实现一个相对复杂的 UI 所需的工作量,使用像 jQuery 这样经典的库也需要差不多的工作量。

    在这个例子中,HTML 负责创建静态页面,JavaScript 通过 document.createElement 动态改变(DOM 结构)。这引来了第一个问题:构建 UI 相关的 JavaScript 代码并不直观易读,我们将 UI 构建分为了两部分(译者注:应该是指 HTML与 JavaScript 两部分)。尽管我们使用了 innerHTML,可读性是增强了,但降低了(页面的)性能,同时可能存在 CSRF 漏洞。我们也可以使用模板引擎,但如果是大面积地修改 DOM,会面临两个问题:效率不高与需要重新绑定事件处理器。

    但这也不是(不使用框架的)最大问题。最大的问题是每当状态发生改变时都要(手动)更新 UI。每次状态更新时,都需要很多代码来改变 UI。当添加电子邮件地址时,只需要两行代码来更新状态,但要十三行代码更新 UI。(此例中)我们已经让 UI (界面与逻辑)尽可能简单了!!

    新葡亰496net 8

    代码既难写又难理解,更麻烦的是它非常脆弱。假设我们需要(添加)同步服务器数据到邮件地址列表的功能,我们需要对比服务器返回结果与数组中数据的差异。这涉及对比所有数据的标识与内容,(当用户修改后,)可能需要在内存中保留一份标识相同但内容不同的数据。

    为了高效地改变 DOM,我们需要编写大量点对点(译者注:指状态到 UI)的代码。但只要你犯下了很小的错误,UI 与状态将不再保持同步:(可能会出现)丢失或呈现错误的信息、不再响应用户的操作,更糟糕的是触发了错误的动作(如点了删除按钮后删除了非对应的一项)。

    因此,保持 UI 与状态同步,需要编写大量乏味且非常脆弱的代码。

    JavaScript框架现在如雨后春笋般到来。让我们来看看截止2017年,最好、最流行、功能最强大的10款JavaScript框架。

    MVVM

    ViewModel大致上就是MVP的Presenter和MVC的Controller了,而View和ViewModel间没有了MVP的界面接口,而是直接交互,用数据“绑定”的形式让数据更新的事件不需要开发人员手动去编写特殊用例,而是自动地双向同步。

    数据绑定你可以认为是Observer模式或者是Publish/Subscribe模式,原理都是为了用一种统一的集中的方式实现频繁需要被实现的数据更新问题。

    比起MVP,MVVM不仅简化了业务与界面的依赖关系,还优化了数据频繁更新的解决方案,甚至可以说提供了一种有效的解决模式。

    新葡亰496net 9

    mvvm

    react产生过程

    1. 在写前端应用时,手动管理 DOM 和控件状态是没有规范化的操作,繁琐又容易出错。在大规模应用的情境下维护起来太困难。
    2. 既然在DOM手动管理太繁琐,那就在每次状态有更新的情况下重新渲染整个UI好了,这样可以省去一次次手动改变DOM的操作,也可以避免把组件状态存储在DOM当中的情况。
    3. 每次都重新渲染整个UI在很多时候会效率低下,所以就加上一个Virtual DOM来做different,把手动管理DOM的步骤隔离开来,把所有基本组件都变成JavaScript object。
    4. 既然在把所有的 HTML 组件都抽象化成js object了,也就不需要HTML为基础的模版了,应该直接写组件。Facebook在PHP已经使用XHP很久了,把那套方法搬到JavaScript上就成了JSX。
    5. UI的状态和获取的数据需要分开处理,使用state和props的概念来区分它们。

    react的思想独特,性能出众,代码逻辑简单。

    渲染层基于一个轻量级的Virtual DOM实现进行了重写,该Virtual DOM实现fork自snabbdom。新的渲染层相比v1带来了巨大的性能提升,也让Vue 2.0成为了最快速的框架之一。

    响应式 UI 拯救一切

    新葡亰496net 10

    所以,(之所以使用框架,)不是因为社区,不是因为工具,不是因为生态,不是因为第三方库……

    目前为止,框架最大的改进是(为我们)提供了应用内部状态与 UI 同步的可靠保证。

    只要你清楚特定框架的某些(特定)规则(如不可变状态),就差不多(可以正常使用)了。

    我们只需要定义一次 UI 界面,不再需要为每个操作编写特定的 UI 代码,同时,每个相同的状态均有相同的输出(译者注:指 UI 一致):当状态改变后,框架自动更新(对应的)视图。

    1. Angular.js

    AngularJS,由谷歌提供支持,是JavaScript最大的框架。它于2009年发布,并遵循MIT开源协议。从其发展至今,生态系统的发展已经超出想象。它目前拥有的开发人员最大的社区,是开发Web应用程序最常用的JavaScript框架

    AngularJS框架给HTML中注入了构建动态视图(交互式用户界面)所需的必要功能。AngularJS通过指令扩展了HTML,且通过表达式绑定数据到HTML。

    双向数据绑定是Angular.js的核心。当用户与界面交互,并提供一个输入操作时,视图和模型(JavaScript对象)是同步的,在模型中,逻辑被执行,同时DOM也得到更新。相反的情况也是如此,如果模型得到更新,视图将被重新渲染。这基本上解决了所有的编写DOM操作时的痛苦**

    Vue.js

    Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用。

    Vue.js 是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

    react的官方说明的理解

    1.JUST THE UI. react可以认为只是一个模板引擎,使用在任何mv*新葡亰496net,(mvc,mvp,mvvvm等)的框架中做view层,使用react的组件化思想。
    2.VIRTUAL DOM. 这是由react提出的概念,虚拟 DOM 会使得应用只关心数据和组件的执行结果,中间产生的DOM操作不需要应用干预。现在的很多前端框架都有开始使用虚拟DOM这个概念,可以提高js渲染的速度。
    3.DATA FLOW. 单向数据流,只需要关心从数据怎么得出界面就行。由数据驱动页面的方式,可以轻松让用户界面和数据保持一致。当底层的数据变了,React 会自动处理所有用户界面的更新。可以让UI组件状态的维护管理更加清晰。

    理解虚拟DOM:

    虚拟 DOM 是在 DOM 的基础上建立了一个抽象层,我们对数据和状态所做的任何改动,都会被自动且高效的同步到虚拟 DOM,最后再批量同步到 DOM 中。

    React 会在内存中维护一个虚拟 DOM 树,当我们对这个树进行读或写的时候,实际上是对虚拟 DOM 进行的。当数据变化时,然后 React 会自动更新虚拟 DOM,然后拿新的虚拟 DOM 和旧的虚拟 DOM 进行对比,找到有变更的部分,得出一个Patch,然后将这个 Patch 放到一个队列里,最终批量更新这些 Patch 到 DOM 中。


    这样的机制可以保证即便是根节点数据的变化,最终表现在 DOM 上的修改也只是受这个数据影响的部分,可以保证非常高效的渲染。

    理解单向数据流:

    在jquery时代,我们都是基于事件驱动,对于简单的交互需求而言,这确实足够了,而且开发起来非常迅速。但业务一旦复杂,这种基于事件驱动的东西就会变得很乱,页面需要更新的DOM很多,就容易出错。

    单向数据流的概念就出现了。更新 DOM 的数据总是从顶层流下来,用户事件不直接操作 DOM,而是操作顶层数据。这些数据从顶层流下来同时更新了DOM。你的代码就很少会直接处理DOM,而是只处理数据的变更。这样会很大程度上简化代码和逻辑。

    举个例子:我点击一个button,然后页面上一个span里数字 1,原有的思考逻辑是“点击发生,然后数据变化,然后UI跟着变化 1”。而现在的思考逻辑是我的数据变化了,那么我的UI会自动更新,那么我只用考虑“点击发生,数据变化”。甚至可以把UI和数据变化分层然后处理。

    根据1.0到2.0迁移指南,“大约90%的API是相同的”。不同于一些JavaScript框架,从一个版本到下一个版本会有巨大的变化,在Vue 2.0中“核心概念没有改变”。

    框架是如何工作的呢?

    基于两个基本的策略:

    • 重新渲染整个组件,如React。当组件中的状态发生改变时,在内存中计算出(新的)DOM 结构后与已有的 DOM 结构进行对比。实际上,这是非常昂贵的。因而采取(将真实 DOM)映射为虚拟 DOM ,通过对比状态变化前后虚拟 DOM 的不同,计算出变化后再改变真实 DOM 结构。这个过程称为调和(reconciliation)。
    • 通过(添加)观察者监测变化,如 Angular 和 Vue.js。应用中状态的属性会被监测,当它们发生变化时,只有依赖了(发生变化)属性的 DOM 元素会被重新渲染。

    2.React.js

    作为Facebook和Instagram的开发框架,采用了它进行开发的还有Yahoo、Airbnb等等。官网上的描述是「A JavaScript library for building user interfaces」React.js是用来构造UI的框架。不是一个framework,只是用来构造UI的library,提供MVC中View的机能。

    React.js首次发布了作为下BSD许可证在2013年开源。自发布以来,社区正在迅速日益增长,瞩目的而是,React.js是增长最快的JavaScript框架。ReactJS最擅长渲染复杂与高性能的用户界面。ReactJS利用虚拟DOM技术,可呈现所有客户端或服务器端的来回通信。

    当处理动态和复杂的数据时,ReactJS处理流程为:

    ·渲染在服务器端的DOM,虚拟DOM。

    ·虚拟DOM与浏览器实际DOM比较,找出差异。

    ·仅更新差异的DOM节点而不是重新呈现整个DOM。

    响应的数据绑定

    Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单。在使用 jQuery 手工操作 DOM 时,我们的代码常常是命令式的、重复的与易错的。Vue.js 拥抱数据驱动的视图概念。通俗地讲,它意味着我们在普通 HTML 模板中使用特殊的语法将 DOM “绑定”到底层数据。一旦创建了绑定,DOM 将与数据保持同步。每当修改了数据,DOM 便相应地更新。这样我们应用中的逻辑就几乎都是直接修改数据了,不必与 DOM 更新搅在一起。这让我们的代码更容易撰写、理解与维护。

    新葡亰496net 11

    响应的数据绑定

    React解决的前端痛点

    在app和H5时代,业务逻辑反而比较简单,复杂的业务逻辑通常也都是交由后端进行处理,前端页面上最难的逻辑是交互,视图嵌套,网络交互,内容更新这块的体验逻辑。
    开发前端的思路已不是当年的 Web page,而是 Application。
    前端经常要涉及因为状态的改变而进行视图的改变,这时候往往会有复杂的DOM操作。

    组件化

    在Web前端,组件化现在是一个普遍性的需求。
    react使用的js为中心,把"HTML"放到js里的组件化思想,是现在前端组件化实践中比较优秀的一个方案。
    使用ES6语法写组件,可以开发规范化的自定义ui组件库,也可以使用第三方的组件库(例如antd-design)。

    单向数据流

    复杂的交互操作时,你需要做的,只是更新你的数据源,React会把你的数据从顶层组件一层一层地传下去,React甚至会帮你优化刷新数据时对DOM节点的复用,所以你也无需关注绘制的效率问题。(FB甚至给了接口让我们能够自己手动优化这些细节,但同时也狂妄地跟我们说大可不必这样。)React把你从复杂的DOM操作中解放出来,让你专注于应用中本身的逻辑。

    React可以提升你的开发体验,使用熟悉的js语法,新的JSX语法标签使用方式与HTML标签一样。采用函数式编程的理念,可以让代码更简洁。
    Virtual DOM 隔离DOM操作,让渲染后端不局限于浏览器。

    除了核心库,vue-router和vuex库已经更新到2.0版本,vue-cli已经默认生成了 2.0 的脚手架。

    那 Web components 呢?

    很多时候,人们会把 React、 Angular 和 Vue.js (等框架)与 Web components 进行对比。这显然体现了人们并不理解这些框架所提供的最大好处:保持 UI 与状态同步。Web components 并不提供这种同步机制。它仅仅提供了一个<template>标签,但它不提供任何(状态与 UI 之间的)协调机制。如果你在应用中使用 Web components 时,想保持 UI 与内部状态同步,则需要(开发者)手工完成,或者使用如 Stencil.js (内部和 React一样,使用虚拟 DOM)之类的库。

    让我们明确一点:框架表现出的巨大潜力并不体现在组件化上,保持 UI 与状态同步才是具体的体现。Web components 并未提供相关的功能,你必须手工或使用第三方库去解决(同步的)问题。使用原生 JavaScript 去编写复杂、高效且易于维护的 UI 界面基本上是不可能的。这就是你需要使用现代 JavaScript 框架的根本原因。

    3.Ember.js

    EmberJS是另一种强大的MVC JavaScript框架。Ember公司最初发布于2011年。*EmberJS竞争与角的喜好并做出反应***,当谈到构建交互式前端用户界面,也有开发商一个非常活跃的社区。

    Ember公司还骑在双向数据像AngularJS结合本金,即更新视图时,模型的变化和更新模型时视图的变化,无论是在同步保持所有的时间。

    Ember公司的管理由自身不断用新的超级大国加强成为世界一流的JavaScript框架之一。这是未来与Fastboot.js模块,允许DOM的服务器端渲染,类似于阵营已在使用的概念在复杂的UI渲染更好的性能

    Ember公司的目标最好的两个AngularJS(双向数据绑定)和ReactJS(服务器端渲染)的。该方法灰烬社会继续真棒功能提供动力的话,我肯定不只这将继续乘车日益增长波JavaScript框架。

    双向数据绑定

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
         <meta charset="utf-8">
        <script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
        <div id="app">
            <h1>{{msg}}</h1>
            <input type="text" v-model="msg">
        </div>
    </body>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    msg:'我是标题'
                }           
            })
        </script>
    </html>
    

    React与Angular的对比

    Angular是框架,React是类库。ng是一个完整的框架,提供了比 React 多得多的建议和功能,你只需要直接使用就可以了。而要用React,开发者通常还需要借助别的类库来打造一个真正的应用。比如你可能需要react-router库来处理路由、redux或flux管理state、额外的库做测试以及管理依赖等等。
    "如果仅从框架这一点来看,选择Angular还是React就像选择直接购买成品电脑还是买零件自己组装一样。"

    在大小方面,由于ng是一个大而全的框架,自带了更多的功能。而React只加载你需要的部件,react要比ng小得多。很多应用其实用不到这种大型框架提供的所有功能。在这个越来越拥抱微服务、微应用、单一职责模块(single-responsibility packages)的时代,React 通过让你自己挑选必要模块,让你的应用大小真正做到量身定做。

    React以JavaScript为中心,把"HTML"放到JS里,JavaScript远比HTML要强大。因此,增强JavaScript让其支持标签要比增强HTML让其支持逻辑要合理得多。无论如何,HTML与JavaScript 都需要某种方式以粘合在一起。
    Angular是以HTML而非JavaScrip为中心的,把“JS”放到HTML里。你必须学习学一大堆Angular特有的语法(标签),即ng框架特有的HTML补丁(shim),比如为HTML加入了循环语义的HTML特性。而React只需要你懂JS。

    在Vue 2.0第一次宣布发布时,尤雨溪说过滤器要离开了。然而随着时间的推移,这个立场改变了,Vue 2.0中仍然保留了文本插入过滤器。的确,在使用指南过滤器这一章节也指明了“Vue 2.x中过滤器仅能在mustache内部绑定使用。要在指令绑定中实现相同的行为,应该使用计算属性。”框架不再提供任何内置过滤器,并且数组过滤器(削减了基于标准的数组)也已经取消了。

    自己动手,丰衣足食

    如果热衷于了解底层原理,想知道虚拟 DOM 的具体实现。那,为何不试着在不使用框架的情况下,仅使用虚拟 DOM 来重写原生 UI呢?

    这里是框架的核心,所有组件的基础类。

    新葡亰496net 12

    这里是重写后的 AddressList 组件(借助 babel 来支持 JSX 的转换)。

    新葡亰496net 13

    现在 UI 是声明式的,我们并未使用任何框架。我们能任意添加新逻辑来改变状态的同时,不需要编写额外的代码来保持 UI 同步。问题解决了!

    现在,除了事件处理之外,这看起来就像个 React 应用对吧?我们有haverender()componentDidMount() 、setState() 等等。一旦解决了保持应用内 UI 与状态的同步问题,所有东西就会很自然地叠加起来(形成组件)。

    可以在这个 Github 仓库中找到完整的源代码。

    新葡亰496net 14

    4. Aurelia.js

    AureliaJS是由ob Eisenberg和Angular以及Durandal团队联合开发。Aurelia是下一代JavaScript客户端框架,利用简单的约定来激发你的创造力。凭借其强大的专注于开发经验,Aurelia可以使您不仅创造惊人的应用程序,同时也享受这个过程。它经过精心设计,高度模块化,并包括许多独立的库。开发者在使用时可选取特定的库甚至扩展创建自定义框架。

    过滤器

    类似于自定义指令,可以用全局方法 Vue.filter() 注册一个自定义过滤器,它接收两个参数:过滤器 ID 和过滤器函数。过滤器函数以值为参数,返回转换后的值:

    Vue.filter('reverse', function (value) {
      return value.split('').reverse().join('')
    })
    

    因为Vue主要不是由大型技术公司创建的,尤雨溪采取了不同的融资方式。尤雨溪能够在这个项目全职工作要感谢Patreon,在Patreon上尤雨溪设置的赞助方式是每月保证一定数量的金额。截至发稿时,Patreon每月为Vue的可持续发展赞助8853美元。除了尤雨溪之外,Vue.js核心团队还有18个人。

    结论

    • 现代 js 框架解决的主要问题是保持 UI 与状态同步。
    • 使用原生 JavaScript 编写复杂、高效而又易于维护的 UI 界面几乎是不可能的。
    • Web components 并未提供解决同步问题的方案。
    • 使用现有的虚拟 DOM 库去搭建自己的框架并不困难。但并不建议这么做!

    JAVASCRIPT DOM 应用VUE.JS REACT.JS

    2 赞 5 收藏 1 评论

    新葡亰496net 15

    5.Meteor.js

    Meteor在2012年4月首次发布。Meteor本质上是Node.JS应用的开发,继承了Ruby on Rails、Node.JS、MongoDB API等框架的基础特性,模糊了服务器端和客户端,弱化网络连接质量造成的影响。

    如果简单定义“现代网站”是一个实时交互、超高性能、具备非凡体验的网站,那么Meteor就是一个可为开发者以简单高效而且充满乐趣的方式进行现代网站开发的平台,以往开发周期需要几周到几个月的项目,现在可能只需要几个小时或者一个周末的时间就可以完成。Meteor构建的应用体验,会让人觉得浏览器的刷新按钮和地址栏是多余的。

    关于MeteorJS最好的事情是,你使用的只有JavaScript的端到端应用程序的开发,无需花费时间学习别的。服务器端软件包在Node.js的运行,除了MeteorJS包,你不需要任何东西来访问数据库,这使得MeteorJS能够应用于实时web应用程序。性能上,数据库中的任何更改将实时反映界面,反之亦然。

    渲染列表 绑定事件

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
         <meta charset="utf-8">
        <script type="text/javascript" src="vue.js"></script>
    </head>
    <body>
        <div id="app">
      <input v-model="newTodo" v-on:keyup.enter="addTodo">
      <ul>
        <li v-for="todo in todos">
          {{ todo.text }}
          <button v-on:click="removeTodo($index)">X</button>
        </li>
      </ul>
    </div>
    </body>
        <script>
            new Vue({
              el: '#app',
              data: {
                newTodo: '',
                todos: [
                  { text: 'Add some todos' }
                ]
              },
              methods: {
                addTodo: function () {
                  var text = this.newTodo.trim()
                  if (text) {
                    this.todos.push({ text: text })
                    this.newTodo = ''
                  }
                },
                removeTodo: function (index) {
                  this.todos.splice(index, 1)
                }
              }
            })
        </script>
    </html>
    

    社区里大多是积极的回应,“Vue比ng2更简洁”以及“我发现Vue 2.0介于Angular 1和React之间。它是现代化的并且很容易学习和使用”。

    6.Backbone.js

    您是否正在寻找一个轻量级的,但功能齐全的JavaScript框架?Backbone.js一定适合你!它于2010年首次发布,作者是Jeremy Ashkenas。

    作为如Pinterest, Foursquare, Walmart, Disqus和 Delicious等巨头公司的开发框架,Backbone.js当仁不让的出现在了这份榜单上。Backbone.js的好处是:简单、小尺寸封装、简单易学。你可以在短时间内开发应用程序。

    Backbone.js的使用方式非常灵活,你可以通过编写自己的代码或者使用第三方JavaScript框架搭建术语自己的Backbone.js。

    在过去的数个月左右,Backbone.js的用户增长数量逐渐放缓,造成这种情况的原因是Backbone.js缓慢的更新周期。

    组件系统

    组件系统是 Vue.js 另一个重要概念,因为它提供了一种抽象,让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点,几乎任意类型的应用的界面都可以抽象为一个组件树:

    新葡亰496net 16

    组件系统

    组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展。

    我们可以用 Vue.extend() 创建一个组件构造器:

    var MyComponent = Vue.extend({
      template: '<div>A custom component!</div>'
    })
    

    组件在注册之后,便可以在父实例的模块中以自定义元素 <my-component> 的形式使用。要确保在初始化根实例之前注册了组件:

    <div id="example">
      <my-component></my-component>
    </div>
    

    要把这个构造器用作组件,需要用 Vue.component(tag, constructor) 注册 :

    // 注册
    Vue.component('my-component', MyComponent)
    
    // 创建根实例
    new Vue({
      el: '#example'
    })
    

    Vue在官网上发布了对比指南(

    7.Polymer.js

    Polymer是在Google I/O 2013发布的一个新的Web UI框架。Polymer的核心原则是“Everything is an element”。它是一款实用、基于事件驱动、封装性和互操作性强的Web UI开发框架。Polymer沿袭了正统的HTML CSS JS思路进行革新,很多组件化的功能靠浏览器自身的功能去支持,用浏览器原生的接口去做组件的集成,使用了效率最高的Vanilla JS,易学易用。在加上Material Design的官方组件让人耳目一新。

    对比其它框架

    对比 React

    8.Knockout.js

    KnockoutJS是由史蒂夫·山德森在2010年以MIT开源JavaScript的框架。Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护。

    KnockoutJS已经走过了它的的黄金时间,截至目前,用户增长缓慢,开发者社区正慢慢转向其它框架。

    Angular

    选择 Vue 而不选择 Angular,有下面几个原因,当然不是对每个人都适合:

    • 在 API 与设计两方面上 Vue.js 都比 Angular 简单得多,因此你可以快速地掌握它的全部特性并投入开发。

    • Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是任何时候都必须遵循 Angular 制定的规则。它仅仅是一个视图层,所以你可以将它嵌入一个现有页面而不一定要做成一个庞大的单页应用。在配合其他库方面它给了你更大的的空间,但相应,你也需要做更多的架构决策。例如,Vue.js 核心默认不包含路由和 Ajax 功能,并且通常假定你在应用中使用了一个模块构建系统。这可能是最重要的区别。

    • Angular 使用双向绑定,Vue 也支持双向绑定,不过默认为单向绑定,数据从父组件单向传给子组件。在大型应用中使用单向绑定让数据流易于理解。

    • 在 Vue.js 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。

    • Vue.js 有更好的性能,并且非常非常容易优化,因为它不使用脏检查。Angular,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。 Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。Vue.js 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步列队更新,所有的数据变化都是独立地触发,除非它们之间有明确的依赖关系。唯一需要做的优化是在 v-for 上使用 track-by。

    有意思的是,Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题。

    React 和 Vue 有许多相似之处,它们都有:

    9. Vue.js

    Vue.Js是Evan you的创作。在2014年作为开源框架发布使用。

    VueJs将极简主义发挥到了极致,并允许您使用选择性模块满足设计要求。

    Vue由AngularJS,ReactiveJs,knockoutJS和RivetsJS启发,同样具有双向数据绑定的功能,但其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

    React

    React.js 和 Vue.js 确实有一些相似 —— 它们都提供数据驱动、可组合搭建的视图组件。当然它们也有许多不同。

    首先,内部实现本质上不同。React 的渲染建立在 Virtual DOM 上——一种在内存中描述 DOM 树状态的数据结构。当状态发生变化时,React 重新渲染 Virtual DOM,比较计算之后给真实 DOM 打补丁。

    Virtual DOM 提供了一个函数式的方法描述视图,这真的很棒。因为它不使用数据观察机制,每次更新都会重新渲染整个应用,因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。

    Vue.js 不使用 Virtual DOM 而是使用真实 DOM 作为模板,数据绑定到真实节点。Vue.js 的应用环境必须提供 DOM。但是,相对于常见的误解——Virtual DOM 让 React 比其它的都快, Vue.js 实际上性能比 React 好,而且几乎不用手工优化。而 React,为了最优化的渲染需要处处实现 shouldComponentUpdate 和使用不可变数据结构。

    在 API 方面,React(或 JSX)的一个问题是,渲染函数常常包含大量的逻辑,最终看着更像是程序片断(实际上就是)而不是界面的视觉呈现。对于部分开发者来说,他们可能觉得这是个优点,但对那些像我一样兼顾设计和开发的人来说,模板能让我们更好地在视觉上思考设计和 CSS。JSX 和 JavaScript 逻辑的混合干扰了我将代码映射到设计的思维过程。相反,Vue.js 通过在模板中加入一个轻量级的 DSL (指令系统),换来一个依旧直观的模板,且能将逻辑封装进指令和过滤器中。

    React 的另一个问题是:由于 DOM 更新完全交给 Virtual DOM 管理,当想要自己控制 DOM 时就有点棘手了(虽然理论上可以做到,但是这样做就本质上违背了 React 的设计思想)。如果应用需要特别的自定义 DOM 操作,特别是复杂时间控制的动画,这个限制就很讨厌。在这方面,Vue.js 更灵活,有许多用 Vue.js 制作的 FWA/Awwwards 获奖站点。

    再多说几句:

    • React 团队雄心勃勃,计划让 React 成为通用平台的 UI 开发工具,而 Vue 专注于为 Web 提供实用的解决方案。

    • React,由于它的函数式特质,可以很好地使用函数式编程模式。但是对于初级开发者和初学者这也导致较大的学习难度。Vue 更易学习并能快速投入开发。

    • 对于大型应用,React 社区已经创造了大量的状态管理方案,例如 Flux/Redux。Vue 本身不解决这个问题(React 内核也是),但是可以轻松地修改状态管理模式,实现一个类似的架构。Vue 有自己的状态管理方案 Vuex,而且 Vue 也可以与 Redux 一起用。

    • React 的开发趋势是将所有东西都放在 JavaScript 中,包括 CSS。已经有许多 CSS-in-JS 方案,但是所有的方案多多少少都有它的问题。而且更重要的是,这么做脱离了标准的 CSS 开发经验,并且很难和 CSS 社区的已有工作配合。Vue 的 单文件组件 在把 CSS 封装到组件模块的同时仍然允许你使用你喜欢的预处理器。

    使用 Virtual DOM

    10.Mercury.js

    新的语言和新的框架往往代表着活力与无限的未来。Mercury.JS就是这样的一个框架,它刚刚推出,也有着一个光明的未来。

    水星是由Raynos创建并在MIT上许可的开源项目。它很快得到了开发者的欢迎,并在JavaScript开发者社区中得到了很多的关注

    Mercury.js似乎是受React.js所启发,也运行于虚拟DOM。它作为新一代的JavaScript框架代表,具有完全模块化设计和丰富的扩展功能**

    结构紧凑,模块化的设计,良好的性能和兼容性使得Mercury.js在如今最好的10 JavaScript框架中榜上有名。

    构建大型应用

    提供了响应式(Reactive)和组件化(Composable)的视图组件。

    结论

    不同的框架提供了不同的概念和方法,但试图解决动态渲染复杂的用户界面,使单页的应用程序更加快速和有效是它们共同针对的问题。

    在这篇文章中提到的框架是现在互联网上最好的JavaScript框架。欢迎大家分享对于框架开发的经验。

    更多科技知识与资讯,欢迎加入公众号“科技浪花”。

    新葡亰496net 17

    模块化

    对于大型项目,为了更好地管理代码使用模块构建系统非常必要。推荐代码使用 CommonJS 或 ES6 模块,然后使用 Webpack 或 Browserify 打包。

    Webpack 和 Browserify 不只是模块打包器。两者都提供了源码转换 API,通过它可以用其它预处理器转换源码。例如,借助 babel-loader 或 babelify 代码可以使用 ES2015/2016 语法。

    如果你之前没有用过它们,我强烈推荐你阅读一些教程,了解模块打包器,然后使用最新的 ECMAScript 特性写 JavaScript。

    在典型的 Vue.js 项目中,我们会把界面拆分为多个小组件,每个组件在同一地方封装它的 CSS 样式,模板和 JavaScript 定义,这么做比较好。如上所述,使用 Webpack 或 Browserify 以及合适的源码转换器,我们可以这样写组件:

    新葡亰496net 18

    .vue

    将注意力集中保持在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库。

    路由

    对于单页应用,推荐使用官方库 vue-router。

    由于有着众多的相似处,我们会用更多的时间在这一块进行比较。这里我们不只保证技术内容的准确性,同时也兼顾了平衡的考量。我们需要指出 React 比 Vue 更好的地方,像是他们的生态系统和丰富的自定义渲染器。

    与服务器通信

    Vue 实例的原始数据 $data 能直接用 JSON.stringify() 序列化。社区贡献了一个插件 vue-resource,提供一种容易的方式与 RESTful APIs 配合。也可以使用任何自己喜欢的 Ajax 库,如 $.ajax 或 SuperAgent。Vue.js 也能很好地与无后端服务配合,如 Firebase 和 Parse。

    React社区为我们准确进行平衡的考量提供了非常积极地帮助,特别感谢来自 React 团队的 Dan Abramov 。他非常慷慨的花费时间来贡献专业知识,帮助我们完善这篇文档,最后我们对最终结果都十分满意。

    状态管理

    在大型应用中,状态管理常常变得复杂,因为状态分散在许多组件内。常常忽略 Vue.js 应用的来源是原生的数据对象—— Vue 实例代理访问它。因此,如果一个状态要被多个实例共享,应避免复制它:

    我们把所有的 action 放在 store 内,action 修改 store 的状态。集中管理状态更易于理解状态将怎样变化。组件仍然可以拥有和管理它的私有状态。

    新葡亰496net 19

    数据流

    如果我们约定,组件不可以直接修改 store 的状态,而应当派发事件,通知 store 执行 action,那么我们基本上实现了 Flux 架构。此约定的好处是,我们能记录 store 所有的状态变化,并且在此之上实现高级的调试帮助函数,如修改日志,快照,历史回滚等。

    vuejs.org
    《MVC,MVP 和 MVVM 的图示》
    《MVVM介绍》
    《从Script到Code Blocks、Code Behind到MVC、MVP、MVVM》

    有了上面这些内容,我们希望你能对下面这两个库的比较内容的公正性感到放心。

    性能简介

    到目前为止,针对现实情况的测试中,Vue 的性能是优于 React 的。如果你对此表示怀疑,请继续阅读。我们会解释为什么会这样(并且会提供一个与 React 团队共同约定的比较基准)。

    新葡亰496net框架存在的根本原因,更轻更快的Vue。渲染性能

    在渲染用户界面的时候,DOM 的操作成本是最高的,不幸的是没有库可以让这些原始操作变得更快。

    我们能做到的最好效果就是:

    尽量减少 DOM 操作。Vue 和 React 都使用虚拟 DOM 来实现,并且两者工作的效果一样好。

    尽量减少除 DOM 操作以外的其他操作新葡亰496net框架存在的根本原因,更轻更快的Vue。。这是 Vue 和 React 所不同的地方。

    在 React 中,我们设定渲染一个元素的额外开销是 1,而平均渲染一个组件的开销是 2。那么在 Vue 中,一个元素的开销更像是 0.1,但是平均组件的开销将会是 4,这是由于我们需要设定响应系统所导致的。

    这意味着:在典型的应用中,由于需要渲染的元素比组件的数量是更多的,因此 Vue 的性能表现将会远优于 React。然而,在极端情况下,比如每个组件只渲染一个元素,Vue 就会通常更慢一些。当然接下来还有其他的原因。

    Vue 和 React 也提供功能性组件,这些组件因为都是没有声明,没有实例化的,因此会花费更少的开销。当这些都用于关键性能的场景时,Vue 将会更快。为了证明这点,我们建立了一个简单的参照项目( 10,000 个列表项 100 次。我们鼓励你基于此去尝试运行一下。然而在实际上,由于浏览器和硬件的差异甚至 JavaScript 引擎的不同,结果都会相应有所不同。

    如果你懒得去做,下面的数值是来自于一个 2014 年产的 MacBook Air 并在 Chrome 52 版本下运行所产生的。为了避免偶然性,每个参照项目都分别运行 20 次并取自最好的结果:

    VueReact

    Fastest23ms63ms

    Median42ms81ms

    Average51ms94ms

    95th Perc.73ms164ms

    Slowest343ms453ms

    更新性能

    在 React 中,你需要在处处去实现shouldComponentUpdate,并且用不可变数据结构才能实现最优化的渲染。在 Vue 中,组件的依赖被自动追踪,所以当这些依赖项变动时,它才会更新。唯一需要注意的可能需要进一步优化的一点是在长列表中,需要在每项上添加一个key属性。

    这意味着,未经优化的 Vue 相比未经优化的 React 要快的多。由于 Vue 改进过渲染性能,甚至全面优化过的 React 通常也会慢于开箱即用的 Vue。

    开发中

    显然,在生产环境中的性能是至关重要的,目前为止我们所具体讨论的便是针对此环境。但开发过程中的表现也不容小视。不错的是用 Vue 和 React 开发大多数应用的速度都是足够快的。

    然而,假如你要开发一个对性能要求比较高的数据可视化或者动画的应用时,你需要了解到下面这点:在开发中,Vue 每秒最高处理 10 帧,而 React 每秒最高处理不到 1 帧。

    这是由于 React 有大量的检查机制,这会让它提供许多有用的警告和错误提示信息。我们同样认为这些是很重要的,但是我们在实现这些检查时,也更加密切地关注了性能方面。

    HTML & CSS

    在 React 中,它们都是 JavaScript 编写的,听起来这十分简单和优雅。然而不幸的事实是,JavaScript 内的 HTML 和 CSS 会产生很多痛点。在Vue 中我们采用 Web 技术并在其上进行扩展。接下来将通过一些实例向你展示这意味的是什么。

    JSX vs Templates

    在 React 中,所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 Javascript 的一种语法糖。这有一个通过React社区审核过的例子:

    新葡亰496net 20

    JSX 的渲染功能有下面这些优势:

    你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。

    工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的(比如,linting、类型检查、编辑器的自动完成)。

    在 Vue 中,由于有时需要用这些功能,我们也提供了渲染功能并且支持了 JSX。然而,对于大多数组件来说,渲染功能是不推荐使用了。

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

    新葡亰496net 21

    优点如下:

    在写模板的过程中,样式风格已定并涉及更少的功能实现。

    模板总是会被声明的。

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

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

    不需要高级版本的 JavaScript 语法,来增加可读性。

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

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

    React 生态也有一个项目(

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

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

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

    CSS 的组件作用域

    除非你把组件分布在多个文件上(例如CSS Modules),要不在 React 中作用域内的 CSS 就会产生警告。非常简单的 CSS 还可以工作,但是稍微复杂点的,比如悬停状态、媒体查询、伪类选择符等要么通过沉重的依赖来重做要么就直接不能用。

    而 Vue 可以让你在每个单文件组件中完全访问 CSS

    新葡亰496net 22

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

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

    规模

    向上扩展

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

    两者另一个重要差异是,Vue 的路由库和状态管理库都是由官方维护支持且与核心库同步更新的。React 则是选择把这些问题交给社区维护,因此创建了一个更分散的生态系统。但相对的,React 的生态系统相比 Vue 更加繁荣。

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

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

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

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

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

    向下扩展

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

    就像 Vue 向上扩展好比 React 一样,Vue 向下扩展后就类似于 jQuery。你只要把如下标签放到页面就可以运行:

    然后你就可以编写 Vue 代码并应用到生产中,你只要用 min 版 Vue 文件替换掉就不用担心其他的性能问题。

    由于起步阶段不需学 JSX,ES2015 以及构建系统,所以开发者只需不到一天的时间阅读指南就可以建立简单的应用程序。

    本地渲染

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

    在现在,Weex 还在积极发展,成熟度也不能和 ReactNative 相抗衡。但是,Weex 的发展是由世界上最大的电子商务企业的需求在驱动,Vue 团队也会和 Weex 团队积极合作确保为开发者带来良好的开发体验。

    MobX

    Mobx 在 React 社区很流行,实际上在 Vue 也采用了几乎相同的反应系统。在有限程度上,React Mobx 也可以被认为是更繁琐的 Vue,所以如果你习惯组合使用它们,那么选择 Vue 会更合理。

    对比Angular 1

    Vue 的一些语法和 Angular 的很相似(例如v-ifvsng-if)。因为Angular 是 Vue 早期开发的灵感来源。然而,Augular 中存在的许多问题,在 Vue 中已经得到解决。

    复杂性

    在 API 与设计两方面上 Vue.js 都比 Angular 1 简单得多,因此你可以快速地掌握它的全部特性并投入开发。

    灵活性和模块化

    Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序,而不是在任何时候都必须遵循 Angular 1 制定的规则,这让 Vue 能适用于各种项目。我们知道把决定权交给你是非常必要的。

    这也就是为什么我们提供Webpack template,让你可以用几分钟,去选择是否启用高级特性,比如热模块加载、linting、CSS 提取等等。

    数据绑定

    Angular 1 使用双向绑定,Vue 在不同组件间强制使用单向数据流。这使应用中的数据流更加清晰易懂。

    指令与组件

    在 Vue 中指令和组件分得更清晰。指令只封装 DOM 操作,而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 Angular 中两者有不少相混的地方。

    性能

    Vue 有更好的性能,并且非常非常容易优化,因为它不使用脏检查

    在 Angular 1 中,当 watcher 越来越多时会变得越来越慢,因为作用域内的每一次变化,所有 watcher 都要重新计算。并且,如果一些 watcher 触发另一个更新,脏检查循环(digest cycle)可能要运行多次。Angular 用户常常要使用深奥的技术,以解决脏检查循环的问题。有时没有简单的办法来优化有大量 watcher 的作用域。

    Vue 则根本没有这个问题,因为它使用基于依赖追踪的观察系统并且异步队列更新,所有的数据变化都是独立触发,除非它们之间有明确的依赖关系。

    有意思的是,Angular 2 和 Vue 用相似的设计解决了一些 Angular 1 中存在的问题。

    对比 Angular 2

    我们单独将 Augluar 2 作分类,因为它完全是一个全新的框架。例如:它具有优秀的组件系统,并且许多实现已经完全重写,API 也完全改变了。

    TypeScript

    Angular 1 面向的是较小的应用程序,Angular 2 已转移焦点,面向的是大型企业应用。在这一点上 TypeScript 经常会被引用,它对那些喜欢用 Java 或者 C# 等类型安全的语言的人是非常有用的。

    Vue 也十分适合制作企业应用,你也可以通过使用官方类型或用户贡献的装饰器来支持 TypeScript,这完全是自由可选的。

    大小和性能

    在性能方面,这两个框架都非常的快。但目前尚没有足够的数据用例来具体展示。如果你一定要量化这些数据,你可以查看第三方参照,它表明 Vue 2 相比 Angular2 是更快的。

    在大小方面,虽然 Angular 2 使用 tree-shaking 和离线编译技术使代码体积减小了许多。但包含编译器和全部功能的 Vue2(23kb) 相比 Angular 2(50kb) 还是要小的多。但是要注意,用 Angular 2 的 App 的体积缩减是使用了 tree-shaking 移除了那些框架中没有用到的功能,但随着功能引入的不断增多,尺寸会变得越来越大。

    灵活性

    Vue 相比于 Angular 2 则更加灵活,Vue 官方提供了构建工具来协助你构建项目,但它并不限制你去如何构建。有人可能喜欢用统一的方式来构建,也有很多开发者喜欢这种灵活自由的方式。

    学习曲线

    开始使用 Vue,你使用的是熟悉的 HTML、符合 ES5 规则的 JavaScript(也就是纯 JavaScript)。有了这些基本的技能,你可以快速地掌握它(指南)并投入开发 。

    Angular 2 的学习曲线是非常陡峭的。即使不包括 TypeScript,它的开始指南中所用的就有 ES2015 标准的 JavaScript,18个 NPM 依赖包,4 个文件和超过 3 千多字的介绍,这一切都是为了完成个 Hello World。而Vue’s Hello World就非常简单。甚至我们并不用花费一整个页面去介绍它。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net框架存在的根本原因,更轻更快的V

    关键词: