Vue与React的异同

一、相同点:

1. 都用虚拟dom实现快速渲染
2. 都支持组件化,都有props(properties)的概念,
允许父组件往子组件或孙组件传送数据(不允许子组件改变父组件传来的props值)
3. 都是数据驱动视图
4. 都支持服务端渲染
5. 都有管理状态,
React有redux,Vue有Vue、
6. 都有支持native的方案,React的React native,Vue的weex
7. 都有组合功能,React使用 Hoc(高阶组件),Vue使用mixins(混合)

8. 都有自己的构建工具,可以快速搭建开发环境。React可以使用Create React App (CRA),而Vue对应的则是vue-cli


 二、不同点:

1. 实现原理不同

1) react 函数式组件思想(diff算法,react只对比节点的key和tag)

react中数据发生变化(调用setstate时),render函数就会执行,重新生成一个新的虚拟dom, 就会遍历 diff 当前组件所有的子节点子组件,新旧比较,得出差异然后渲染。 react 16 采用了 fiber 把Dom树微观化成链表,可以中断的,分片的在浏览器空闲时候执行,提高diff效率。

2) vue 组件响应式思想 (diff算法,vue对比key、tag还有其他属性)

vue组件中数据发生变化,会触发setter,由于vue组件中数据的getter的作用,收集了依赖,setter触发会根据这些依赖,生成新的虚拟dom,然后对比新旧虚拟dom进行渲染。 采用代理监听数据,在组件内修改数据,就通过虚拟DOM去更新页面,而组件间通过响应式通知更新

2. 设计结构不同

vue使用的是可变数据,数据由data属性在vue对象中管理,

React 更强调数据不可变,由setState()更新状态

3. 数据流不同

vue是通过v-model进行双向数据流,react是单向数据流,一般通过setState/onChange

注:

        1)双向数据流和数据双向绑定不是一回事,react单向数据流也可以双向绑定数据,例如表单的事件绑定。

        2)双向数据流是说数据的流向是双向的;双向数据绑定指的是单纯的数据与视图层之间的绑定。实质上也是单向数据流在加上用户的操作事件来实现双向数据绑定。无论是单向数据还是双向,最终呈现给用户的都是同步效果.只不过是一个需要手动实现,一个自动。

        3)双向绑定把数据变更的操作隐藏在框架内部,调用者并不会直接感知。Vue 中的 v-model 来说,他是一个语法糖,利用 bind 语法与事件来实现数据与视图之间的绑定。

4. 渲染方式的不同

React是通过JSX渲染模板,等计算完毕之后在渲染;

Vue是通过一种拓展的HTML语法进行渲染,边计算边渲染

5.框架本质不同

Vue本质是MVVM框架,由MVC发展而来。

React是前端组件化框架,只针对MVC的view层。

6. 通信方式不同

vue: 父通过props向子传递数据或回调(一般传数据);子通过事件向父发消息;通过provide /  inject 来实现父向子注入数据,可跨层级传递。

react:父通过props向子传递数据或回调;子通过回调向父发消息;通过 context进行跨层级的通信。


参考:

详解单向数据流与双向数据绑定_mytheart的博客-CSDN博客_双向绑定和单向数据流

Vue 和 React 的区别__小小怪_的博客-CSDN博客_vue和react区别

 

你可能感兴趣的:(javascript,前端,vue.js,react.js)