We know that JavaScript is one of the world's most popular languages, React and Vue are the two most popular JS framework. So, we need to develop front-end you must master these two frameworks.
Then the two frameworks What difference will it make?
React and Vue in common, they all have:
- Use Virtual DOM
- Providing the response of formula (Reactive) and component (Composables that) view component.
- We will focus on keeping the core library, while the other functions such as routing and management to the global state associated libraries.
React with Vue differences:
1, data binding
vue is a two-way binding,
Core function Vue.js there are two, one is responsive data binding system, and second components of the system. The so-called two-way binding, refers to the content vue instances of data its rendering DOM elements remain the same, regardless of who is changed, the other will be updated accordingly for the same data. This is achieved by setting the property accessor. In vue, the binding data related expressions are interpolated, instruction, * Class and Style, event handlers, and form a space, and computing Ajax request properties
no two-way data binding react
react that way data flow
state (Model layer) react in the View layer data will be updated in real time by variation of two-way data binding, specifically, the direct write JS code Model layer in the View layer data rendering to take over as soon as the form action, trigger event trigger data, ajax request and other changes, the dual synchronous
2, state management
react
Readux Flux is actually an advanced implementation. It is a framework for application data, application state management major role.
Redux three principles:
A single data source, status read only state, are purely functional state modification completed.
Redux in three common methods
1, createStore () to create a store
2, combineReducers () merge multiple reducer
3, applayMiddleware () middleware, asynchronous processing action
It workflow:
First, create a Action, sent by dispatch action to Store, Store to Action to the Reducer, Reducer has two parameters (previous, action) do modify data, and then to the Store, Store triggered subscribe () method call setState View function performs the change.
as the picture shows:
View
Vuex also the state of public administration, he is the best non-parent component by value.
Vuex five major role in property inside the method:
3, routing
Both routes are very similar, they are using the component-based thinking
react
On the issue of routing libraries, React choose to issue to safeguard the community, thus creating a more decentralized ecosystem. But the relative, React ecosystem Vue compared to more prosperous.
react, the library needs to be introduced react-router,
in use, on Router is a component of React.
Router component itself is just a container, the real route to be defined by the Route components.
Route component defines a correspondence relationship URL path components. You can use multiple components simultaneously Route.
View
Vue routing libraries and libraries are managed by a state official and maintenance support to the core database synchronization updates.
Use Vue.js, we have been able to compose applications by combining components, when you want to add in vue-router, we need to do is, the component (components) is mapped to the route (routes), and then tell vue-router in where they render.
4, the rendering performance comparison
react view rendering
rendering React built on Virtual DOM - DOM tree data structure described in the state memory. When the state changes, React re-rendering Virtual DOM, DOM after patching real comparative calculations.
Virtual DOM 提供了函数式的方法描述视图，它不使用数据观察机制，每次更新都会重新渲染整个应用，因此从定义上保证了视图与数据的同步。它也开辟了 JavaScript 同构应用的可能性。
在超大量数据的首屏渲染速度上，React 有一定优势，因为 Vue 的渲染机制启动时候要做的工作比较多，而且 React 支持服务端渲染。
元素是构成 React 应用的最小单位。元素用来描述你在屏幕上看到的内容，与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。
我们用React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。我们将 元素传入一个名为 ReactDOM.render() 的方法来将其渲染到页面上，页面上就会显示该元素。
组件渲染
当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件,这个对象称之为“props”
vue视图渲染
Vue 通过建立一个虚拟 DOM 对真实 DOM 发生的变化保持追踪。
vue渲染的过程如下：
new Vue，执行初始化
挂载$mount方法，通过自定义Render方法、template、el等生成Render函数
通过Watcher监听数据的变化
当数据发生变化时，Render函数执行生成VNode对象
通过patch方法，对比新旧VNode对象，通过DOM Diff算法，添加、修改、删除真正的DOM元素
5、 数据更新
react数据更新
React 元素都是immutable 不可变的。当元素被创建之后，你是无法改变其内容或属性的。一个元素就好像是动画里的一帧，它代表应用界面在某一时间点的样子。
根据我们现阶段了解的有关 React 知识，更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法。
vue数据更新
通过forceUpdate可以实现数据强制更新
6、 开发模式及规模
react
开发模式
React本身，是严格的view层，MVC模式
脚手架
React 提供了create-react-app，但是现在还存在一些局限性：
它不允许在项目生成时进行任何配置，而 Vue 支持 Yeoman-like 定制。
它只提供一个构建单页面应用的单一模板，而 Vue 提供了各种用途的模板。
它不能用用户自建的模板构建项目，而自建模板对企业环境下预先建立协议是特别有用的。
vue
Vue是MVVM模式的一种方式实现
虽然没有完全遵循 MVVM 模型，Vue 的设计无疑受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例。
脚手架
Vue 提供了Vue-cli 脚手架，能让你非常容易地构建项目，包含了 Webpack，Browserify，甚至 no build system。
7、HTML&&CSS
react
JSX
在 React 中，所有的组件的渲染功能都依靠 JSX。JSX 是使用 XML 语法编写 JavaScript 的一种语法糖。
JSX, 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。
JSX 用来声明 React 当中的元素。
JSX本身也是一种表达式，在编译之后呢，JSX 其实会被转化为普通的 JavaScript 对象。这也就意味着，你其实可以在 if 或者 for 语句里使用 JSX，将它赋值给变量，当作参数传入，作为返回值都可以
JSX 说是手写的渲染函数有下面这些优势：
你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。
开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。
组件作用域内的CSS
除非你把组件分布在多个文件上 (例如 CSS Modules)，CSS 作用域在 React 中是通过 CSS-in-JS 的方案实现的 (比如 styled-components、glamorous 和 emotion)。这引入了一个新的面向组件的样式范例，它和普通的 CSS 撰写过程是有区别的。另外，虽然在构建时将 CSS 提取到一个单独的样式表是支持的，但 bundle 里通常还是需要一个运行时程序来让这些样式生效。当你能够利用 JavaScript 灵活处理样式的同时，也需要权衡 bundle 的尺寸和运行时的开销。
Vue
Templates模板语法
事实上 Vue 也提供了渲染函数，甚至支持 JSX。然而，我们默认推荐的还是模板。任何合乎规范的 HTML 都是合法的 Vue 模板，这也带来了一些特有的优势：
对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。
基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。
这也使得设计师和新人开发者更容易理解和参与到项目中。
你甚至可以使用其他模板预处理器，比如 Pug 来书写 Vue 的模板。
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，在应用状态改变时，Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
单文件组件CSS
Vue 设置样式的默认方法是单文件组件里类似 style 的标签。
单文件组件让你可以在同一个文件里完全控制 CSS，将其作为组件代码的一部分。
Vue 的单文件组件里的样式设置是非常灵活的。通过 vue-loader，你可以使用任意预处理器、后处理器，甚至深度集成 CSS Modules——全部都在
小结
更抽象一点来看，我们可以把组件区分为两类：一类是偏视图表现的 (presentational)，一类则是偏逻辑的 (logical)。我们推荐在前者中使用模板，在后者中使用 JSX 或渲染函数。这两类组件的比例会根据应用类型的不同有所变化，但整体来说我们发现表现类的组件远远多于逻辑类组件。
8、 使用场景
react
1、期待构建一个大型应用程序
2、期待同时适用于Web端和原生APP的框架
3、 期待最大的生态系统
vue
1、 期待模板搭建应用
2、期待简单和“能用就行”的东西
3、期待应用尽可能的小和快
9、服务器端渲染（SSR）
react
React的虚拟DOM是其可被用于服务端渲染的关键。首先每个ReactComponent 在虚拟DOM中完成渲染，然后React通过虚拟DOM来更新浏览器DOM中产生变化的那一部分，虚拟DOM作为内存中的DOM表现，为React在Node.js这类非浏览器环境下的吮吸给你提供了可能，React可以从虚拟DoM中生成一个字符串。而不是跟新真正的DOM，这使得我们可以在客户端和服务端使用同一个React Component。
React 提供了两个可用于服务端渲染组件的函数：React.renderToString 和React.render-ToStaticMarkup。 在设计用于服务端渲染的ReactComponent时需要有预见性，考虑以下方面。
选取最优的渲染函数。
如何支持组件的异步状态。
如何将应用的初始化状态传递到客户端。
哪些生命周期函数可以用于服务端的渲染。
如何为应用提供同构路由支持。
单例、实例以及上下文的用法。
vue
Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将静态标记”混合”为客户端上完全交互的应用程序。
服务器渲染的 Vue.js 应用程序也可以被认为是”同构”或”通用”，因为应用程序的大部分代码都可以在服务器和客户端上运行。
2. 服务器端渲染优势
- 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。
- 更快的内容到达时间(time-to-content)，特别是对于缓慢的网络情况或运行缓慢的设备。无需等待所有的 JavaScript 都完成下载并执行，才显示服务器渲染的标记，所以你的用户将会更快速地看到完整渲染的页面。通常可以产生更好的用户体验，并且对于那些「内容到达时间(time-to-content)与转化率直接相关」的应用程序而言，服务器端渲染(SSR)至关重要。
10、总结
Vue的优势包括：
- 模板和渲染函数的弹性选择
- 简单的语法及项目创建
- 更快的渲染速度和更小的体积
- React的优势包括：
- 更适用于大型应用和更好的可测试性
- 同时适用于Web端和原生App
- 更大的生态圈带来的更多支持和工具
- 而实际上，React和Vue都是非常优秀的框架，它们之间的相似之处多过不同之处，并且它们大部分最棒的功能是相通的：
- 利用虚拟DOM实现快速渲染
- 轻量级
- 响应式和组件化
- 服务器端渲染
- 易于集成路由工具，打包工具以及状态管理工具
- 优秀的支持和社区