三大框架的优缺点（Vue、Angular、React）以及Svelte

三大框架的优缺点

Vue

Vue优点

1. 简单：官方文档很清晰，比 Angular 简单易学。
2. 快速：异步批处理方式更新 DOM。
3. 组合：用解耦的、可复用的组件组合你的应用程序。
4. 紧凑：~18kb min+gzip，且无依赖。
5. 强大：表达式 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好：可以通过 NPM、Bower 或 Duo 安装，不强迫你所有的代码都遵循 Angular 的各种规定，使用场景更加灵活。

Vue缺点

1. 新生儿：Vue.js是一个新的项目，没有angular那么成熟。
2. 影响度不是很大：google了一下，有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
3. 不支持IE8

Angular

Angular优点

1. 模板功能强大丰富，自带了极其丰富的angular指令。
2. 是一个比较完善的前端框架，包含服务，模板，数据双向绑定，模块化，路由，过滤器，依赖注入等所有功能；
3. 自定义指令，自定义指令后可以在项目中多次使用。
4. ng模块化比较大胆的引入了Java的一些东西（依赖注入），能够很容易的写出可复用的代码，对于敏捷开发的团队来说非常有帮助。
5. angularjs是互联网巨人谷歌开发，这也意味着他有一个坚实的基础和社区支持。

Angular缺点

1. angular 入门很容易 但深入后概念很多, 学习中较难理解.
2. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
3. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
4. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作.
5. DI 依赖注入 如果代码压缩需要显示声明.

React

React优点

1. 速度快：在UI渲染过程中，React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容：虚拟DOM帮助我们解决了跨浏览器问题，它为我们提供了标准化的API，甚至在IE8中都是没问题的。
3. 模块化：为你程序编写独立的模块化UI组件，这样当某个或某些组件出现问题是，可以方便地进行隔离。
4. 单向数据流：Flux是一个用于在JavaScript应用中创建单向数据层的架构，它随着React视图库的开发而被Facebook概念化。
5. 同构、纯粹的javascript：因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行，预渲染你的应用有助于搜索引擎优化。
   6.兼容性好：比如使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。

React缺点

React本身只是一个V而已，并不是一个完整的框架，所以如果是大型项目想要一套完整的框架的话，基本都需要加上ReactRouter和Flux才能写大型应用。

svelte

svelte的简介

Svelte是一个用于构建快速web应用程序的工具。
它类似于React和Vue等JavaScript框架，它们的共同目标是使构建流畅的交互式用户界面变得容易。
将你的应用程序转换成一个理想的时间段，而不是在你的应用程序运行的关键时刻。这意味着您不必为框架抽象的性能付出代价，而且在应用程序首次加载时也不会受到惩罚。
您可以使用Svelte构建整个应用程序，也可以将其增量添加到现有的代码库中。您还可以将组件作为独立的包在任何地方运行，而不需要依赖于传统框架的开销。

与 React 和 Vue 有和不同？

1.静态编译，无需引入框架自身
一个 Svelte 组件是静态编译，所有需要的运行时代码都包含在里面了，除了引入这个组件本身，你感觉不到框架存在。

2.编写更少代码
svelte 模板提供一些简便的用法，在维护和编写上都变得更简单，代码量更少（维护的代码），这些模板会编译为最终的js 代码。

3.只会打包使用到的代码
即 tree shaking，这个概念本来也是作者首先提出来的，webpack 是参考了 rollup。

4.无需虚拟 DOM 也可进行响应式数据驱动

5.更便捷的响应式绑定
既有响应式数据的优点，v3 版本也解决了 vue 数据绑定缺点，用起来十分方便。

Svelte 有哪些好用的特性？

1.完全兼容原生 html 用法
编写代码是那么的自然，如下面就是一个组件。

<script>
  const content = 'test';
</script>
<div>
  { test }
</div>

2.响应式也是那么的自然

 

<script>
    let count = 0;
    function handleClick () {
        // calling this function will trigger an
        // update if the markup references `count`
        count = count + 1;
    }
</script>
<button on:click="handleClick">+1</button>
<div>{ count }</div>

3.表达式也可以是响应式的
这个更加的自然，这种特性只有静态编译才能做到，这个就是 svelte 目前独有的优势

 

<script>
    let numbers = [1, 2, 3, 4];
    function addNumber() {
        numbers.push(numbers.length + 1);
    }
    $: sum = numbers.reduce((t, n) => t + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>Add a number</button>

4.自动订阅的 svelte store
这个其实就是订阅发布模式，不过 svelte 提供了自身特有的便捷的绑定方式（自动订阅），用起来是那么的自然，那么的爽。
这种特性只有静态编译才能做到，这个就是 svelte 目前独有的优势。

stores.js

 

import { writable } from 'svelte/store';
export const count = writable(0);

A.svelte

 

<script>
    import { count } from './stores.js';
</script>
<h1>The count is {$count}</h1>

B.svelte

 

<script>
    import { count } from './stores.js';
  function increment() {
        $count += 1;
    }
</script>
<button on:click={increment}>增加</button>

5.所有组件都可以单独使用
可以直接在 react、vue、angular 等框架中使用。

 

// SvelteComponent.js 是已经编译后的组件
import SvelteComponent from './SvelteComponent';

const app = new SvelteComponent({
    target: document.body,
    props: {
        answer: 42
    }
});

Svelte 有什么缺点？

1.props 是可变的
当然这也是这个框架故意这样设计的，这样 props 也是可以响应式的。

 

<script>
  export let title;
  title = '前缀' + title
</script>
<h1>
  { title }
</h1>

2.props 目前无法验证类型

 

<script>
  export let propOne;
  export let propTwo = 'defaultValue';
</script>

3.自定义的组件无法直接访问到原生 DOM
需要利用 props 的双向绑定特性，这就可能导致深层次组件的需要层层传递 DOM 对象。
App.svelte

 

<script>
  export let customDOM;
</script>
<A bind:dom={customDOM}/>

A.svelte

<script>
  export let customDOM;
</script>

<div bind:this={customDOM}>
  test
</div>

4.只有组件才支持 svelte 的静态模板特性
js 文件是不支持 sevelte 静态模板特性的，像下面这样是会报错的。

import { count } from './stores.js';
function increment() {
  $count += 1;
}

如果大家想学习前端方面的技术，我把我多年的经验分享给大家，还有一些学习资料，分享Q群：1046097531