vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue2.0与vue3.0及vue与react区别

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

作者:跳跳的小古风

这篇文章主要介绍了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。

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

您可能感兴趣的文章:
阅读全文