vue2.0与vue3.0及vue与react的区别及说明

vue2.0 与 vue3.0 区别

1.双向绑定原理

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

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

Vue2无法检测精确数组对象变化。

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在构建大型项目时，能够很好的提高项目开发的质量。

vue与 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。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

最新评论