Vue与其他框架的异同 - wugy0103/myBlog GitHub Wiki

Vue.js (读音 /vjuː/，类似于 view) 是一套构建用户界面的渐进式框架，Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。--- 官方中文网

React 和 Vue 有许多相似之处：

• 使用 Virtual DOM

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

• 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。

不同之处：

• 性能

  React 和 Vue 在大部分常见场景下都能提供近似的性能，通常 Vue 会有少量优势。

  在 React 应用中，当某个组件的状态发生变化时，它会以该组件为根，重新渲染整个组件子树。如要避免不必要的子组件的重渲染，你需要在所有可能的地方使用 PureComponent，或是手动实现 shouldComponentUpdate 方法。同时你可能会需要使用不可变的数据结构来使得你的组件更容易被优化。然而，使用 PureComponent 和 shouldComponentUpdate 时，需要保证该组件的整个子树的渲染输出都是由该组件的 props 所决定的。如果不符合这个情况，那么此类优化就会导致难以察觉的渲染结果不一致。这使得 React 中的组件优化伴随着相当的心智负担。

  在 Vue 应用中，组件的依赖是在渲染过程中自动追踪的，所以系统能精确知晓哪个组件确实需要被重渲染。你可以理解为每一个组件都已经自动获得了 shouldComponentUpdate，并且没有上述的子树问题限制。

• HTML & CSS

  在 React 中，一切都是 JavaScript。不仅仅是 HTML 可以用 JSX 来表达

  Vue 的整体思想是拥抱经典的 Web 技术,事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，我们默认推荐的还是模板(Templates)

  CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)

  Vue 设置样式的默认方法是单文件组件里类似 style 的标签。

   <style scoped>
        @media (min-width: 250px) {
            .list-container:hover {
                background: orange;
            }
        }
    </style>
  

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

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

• 复杂性

  在 API 与设计两方面上 Vue.js 都比 AngularJS 简单得多

• 灵活性和模块化

  Vue.js 是一个更加灵活开放的解决方案。它允许你以希望的方式组织应用程序，而不是在任何时候都必须遵循 AngularJS 制定的规则

• 数据绑定

  AngularJS 使用双向绑定，Vue 在不同组件间强制使用单向数据流。

• 指令与组件

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

• 性能

  Vue 有更好的性能，它使用基于依赖追踪的观察系统并且异步队列更新，所有的数据变化都是独立触发。

  在 AngularJS 中，当 watcher 越来越多时会变得越来越慢，因为作用域内的每一次变化，所有 watcher 都要重新计算。并且，如果一些 watcher 触发另一个更新，脏检查循环 (digest cycle) 可能要运行多次.

持续。。。