vue2.0 与 vue3.0/react区别

vue2.0 与 vue3.0 区别

1. 双向绑定原理

• Vue2通过使用 Object.defineProperty 来劫持对象属性的 geter 和 seter 操作，当数据发生改变发出通知。

• Vue3通过ES6的新特性proxy来劫持数据，当数据改变时发出通知。

vue3可以检测到对象/数组内部数据的变化

vue3更精准的变更通知

• vue2使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；
• vue3只有依赖那个属性的 watcher 才会重新运行

vue3默认进行懒观察

• vue2.0数据一开始就创建了观察者，数据很大的时候，就会出现问题。
• vue3中进行了优化 只有用于渲染初始化可见部分的数据，才会创建观察者，效率更高。

2.Vue3支持碎片(Fragments)

• vue2.0中是直接创建了一个vue实例
• vue3.0中按需导出了一个createApp （ceateApp做了什么）
• 在vue2.0中必须要有一个根元素，vue3在组件可以拥有多个根节点。

3.Composition API

• Vue2使用选项类型API（Options API）
• Vue3使用合成型API（Composition API，

旧的选项型API在代码里分割了不同的属性: data,computed属性，methods等等。
新的合成型API用方法来分割，数据和⽅法都定义在setup中，并统⼀进⾏return。

4.生命周期

5.v-if和v-for的优先级

• vue2v-for的优先级高于v-if（因此我们通常需要计算属性先对数据进行加工处理，以达到性能优化的目的）
• vue3v-if的优先级高于v-for

6.typescript支持

• vue2默认是不支持typescript的。
• vue3支持使用typescript，使用typescript在构建大型项目时，能够很好的提高项目开发的质量。

vue2.0 与 react区别

共同点

1.虚拟dom+diff算法
2.提供了响应式和组件化的视图组件。
3注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。(vue-router、vuex、react-router、redux等等)
4.数据驱动视图（无需DOM的频繁操作）

1.框架

• Vue本质是MVVM框架，由MVC发展而来；
• React是前端组件化框架，由后端组件化发展而来。

2.组件写法差异

• React推荐的做法是JSX + inline style, 也就是把 HTML 和 CSS 全都写进 JavaScript 中,即 all in js;
• Vue 推荐的做法是 template 的单文件组件格式(简单易懂，从传统前端转过来易于理解),即 html,css,JS 写在同一个文件(vue也支持JSX写法)

3.响应式原理

• 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter、getter，在数据变动时发布消息给订阅者，触发相应监听回调。
• React改变state后不会主动改变渲染好的dom，需要通过setState()方法才能渲染。且父组件传值子组件，顶级pros改变后，会重新渲染所有子组件，需要用shouldComponentUpdate来优化。

4.diff算法

对比节点

• vue当节点元素相同，但是classname不同，认为是不同类型的元素，删除重建，
• react当节点元素相同，但是classname不同,认为是同类型节点，只是修改节点属性。

列表对比

• vue的列表对比，采用的是两端到中间比对的方式，
• react采用的是从左到右依次对比的方式。

5.渲染过程

• Vue可以更快地计算出Virtual DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。
• React在应用的状态被改变时，全部子组件都会重新渲染。通过shouldComponentUpdate这个生命周期方法可以进行控制，但Vue将此视为默认的优化。

如果想要一个轻量级，更快速，更现代的UI库来制作单页面应用程序应该选择Vue.js，
如果是大规模应用程序和移动应用程序的应该选择React。