三大框架的优缺点
Vue 优点
简单: 官方文档很清晰, 比 Angular 简单易学.
快速: 异步批处理方式更新 DOM.
组合: 用解耦的, 可复用的组件组合你的应用程序.
紧凑:~18kb min+gzip, 且无依赖.
强大: 表达式 无需声明依赖的可推导属性 (computed properties).
对模块友好: 可以通过 NPM,Bower 或 Duo 安装, 不强迫你所有的代码都遵循 Angular 的各种规定, 使用场景更加灵活.
Vue 缺点
新生儿: vue.js 是一个新的项目, 没有 angular 那么成熟.
影响度不是很大: google 了一下, 有关于 Vue.JS 多样性或者说丰富性少于其他一些有名的库.
不支持 IE8
Angular
Angular 优点
模板功能强大丰富, 自带了极其丰富的 angular 指令.
是一个比较完善的前端框架, 包含服务, 模板, 数据双向绑定, 模块化, 路由, 过滤器, 依赖注入等所有功能;
自定义指令, 自定义指令后可以在项目中多次使用.
ng 模块化比较大胆的引入了 Java 的一些东西 (依赖注入), 能够很容易的写出可复用的代码, 对于敏捷开发的团队来说非常有帮助.
AngularJS 是互联网巨人谷歌开发, 这也意味着他有一个坚实的基础和社区支持.
Angular 缺点
angular 入门很容易 但深入后概念很多, 学习中较难理解.
文档例子非常少, 官方的文档基本只写了 API, 一个例子都没有, 很多时候具体怎么用都是 google 来的, 或直接问 misko,angular 的作者.
对 IE6/7 兼容不算特别好, 就是可以用 jQuery 自己手写代码解决一些.
指令的应用的最佳实践教程少, angular 其实很灵活, 如果不看一些作者的使用原则, 很容易写出 四不像的代码, 例如 JS 中还是像 jQuery 的思想有很多 dom 操作.
DI 依赖注入 如果代码压缩需要显示声明.
React
React 优点
速度快: 在 UI 渲染过程中, React 通过在虚拟 DOM 中的微操作来实现对实际 DOM 的局部更新.
跨浏览器兼容: 虚拟 DOM 帮助我们解决了跨浏览器问题, 它为我们提供了标准化的 API, 甚至在 IE8 中都是没问题的.
模块化: 为你程序编写独立的模块化 UI 组件, 这样当某个或某些组件出现问题是, 可以方便地进行隔离.
单向数据流: Flux 是一个用于在 JavaScript 应用中创建单向数据层的架构, 它随着 React 视图库的开发而被 Facebook 概念化.
同构, 纯粹的 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;
- }
来源: http://www.jianshu.com/p/5762c2113d15