Vue 与 react 区别

相似之处

• 他们都是 JavaScript 的框架，专注于创造前端的数据应用。不同于早期的 JavaScript 框架“功能齐全”，Reat与 Vue 只有框架的骨架，其他的功能如路由、状态管理等是框架分离的组件。
• 都使用了虚拟 DOM，Virtual DOM 是一个映射真实 DOM 的 JavaScript对象，如果需要改变任何元素的状态，那么是先在 Virtual DOM 上进行改变，而不是直接改变真实的DOM。当有变化产生时，一个新的 Virtual DOM 对象会被创建并计算新旧 Virtual DOM
  之间的差别，之后这些差别会应用在真实的 DOM 上。
• 组件化 React 与 Vue 都鼓励组件化应用
• Props React和 Vue 都有’props'的概念，props 在组件中是一个特殊的属性，允许父组件往子组件传送数据。
• 构建工具 React 和 Vue 都有自己的构建工具，你可以使用它快速搭建开发环境。

区别

1、数据

• vue：双向数据绑定和单向数据流。双向数据绑定： DOM 元素绑定的 data 值，当发生改变后，vue 的响应式机制会自动监听 data的变化重新 渲染。单向数据流：当父组件给子组件传递数据的时候，子组件只可以读取 而不能修改数据。可以用 watch监听数据的更改，再赋给父组件的变量。
• react：单向数据流。DOM 元素依赖于 state，但改变 state 不会改变渲染 好的 DOM，通过 setState()才能重新渲染。父组件传值到子组件，如果顶 级的 props 变了，会重新渲染所有的子组件。

2、虚拟 DOM

• vue：计算出虚拟 DOM 的差异，在渲染的过程中跟踪每个组件的依赖关系，不会重新渲染整个组件树。
• react：当应用的状态改变时，重新渲染全部子组件，可以通shouldComponentUpdate 生命周期进行优化。

3、模板和 jsx：

• vue：具有单文件组件，可以把 html、css、js 写在一个 vue 文件里–MVVM 框架
• react：依赖于 jsx，在 JavaScript 中创建 DOM—视图层框架