三大框架的优缺点 Vue 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 用法 编写代码是那么的自然，如下面就是一个组件。 2.响应式也是那么的自然 +1 3.表达式也可以是响应式的 这个更加的自然，这种特性只有静态编译才能做到，这个就是 svelte 目前独有的优势

{numbers.join(' + ')} = {sum}

Add a number 4.自动订阅的 svelte store 这个其实就是订阅发布模式，不过 svelte 提供了自身特有的便捷的绑定方式（自动订阅），用起来是那么的自然，那么的爽。 这种特性只有静态编译才能做到，这个就是 svelte 目前独有的优势。 stores.js import { writable } from 'svelte/store'; export const count = writable(0); A.svelte

The count is {$count}

B.svelte 增加 5.所有组件都可以单独使用 可以直接在 react、vue、angular 等框架中使用。 // SvelteComponent.js 是已经编译后的组件 import SvelteComponent from './SvelteComponent'; const app = new SvelteComponent({ target: document.body, props: { answer: 42 } }); Svelte 有什么缺点？ 1.props 是可变的 当然这也是这个框架故意这样设计的，这样 props 也是可以响应式的。

{ title }

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

test

4.只有组件才支持 svelte 的静态模板特性 js 文件是不支持 sevelte 静态模板特性的，像下面这样是会报错的。 import { count } from './stores.js'; function increment() { $count += 1; }

本文章由javascript技术分享原创和收集