Vue2和Vue3的区别

Posted 2023-05-08

参考技术A vue2 的双向数据绑定是利用 ES5 的一个API Object.definePropert() 对数据进行劫持，结合发布订阅模式的方式来实现的。
vue3 中使用了 ES6 的 Proxy API对数据代理。
相比 vue2.x ，使用 proxy 的优势如下：

在 vue2 中定义数据变量是 data() ，创建的方法要在 methods: 中。
而在 vue3 中直接在 setup() 中，在这里面定义的变量和方法因为最终要在模板中使用，所以最后都得 return 。
如：

除了这些钩子函数外， Vue3.x 还增加了 onRenderTracked 和 onRenderTriggered 函数。

这篇文章持续更新哟

react和vue区别

参考技术A 两者本质的区别：模板和组件化的区别
Vue本质是 MVVM 框架，由 MVC 发展而来；
React是前端 组件化 框架，由后端组件化发展而来；
Vue使用 模板
React使用 JSX
React本身就是 组件化
Vue是在 MVVM 上扩展的
共同点：
都支持组件化，都是 数据驱动视图

监听数据变化的实现原理不同：

数据流的不同:

高阶组件本质就是高阶函数，React的组件是一个纯粹的函数，所以高阶函数对React来说非常简单。
Vue中组件是一个被包装的函数，并不简单的就是我们定义组件的时候传入的对象或者函数。

组件通信的区别：

渲染模版的不同：

Vuex和Redux的区别:

diff算法不同:

事件机制不同:

数据是否可变：
react 整体是 函数式 的思想，把组件设计成 纯组件 ，状态和逻辑通过 参数 传入，所以在 react 中，是 单向数据流 ，推崇结合 immutable 来实现 数据不可变 。react在 setState 之后会重新走 渲染 的流程，如果 shouldComponentUpdate 返回的是 true ，就继续渲染，如果返回了 false ，就不会重新渲染

vue 的思想是 响应式 的，也就是基于是 数据可变 的，通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 dom
vue:

react:

react 的性能优化需要 手动 去做，而 vue 的性能优化是 自动 的，但是 vue 的 响应式机制 也有问题，就是当 state 特别多的时候， Watcher 也会很多，会导致 卡顿 ，所以大型应用（ 状态特别多 的）一般用 react ，更加可控

通过js来操作一切，还是用各自的处理方式:
reac t的思路是 all in js ，通过 js 来生成 html ，所以设计了 jsx ，还有通过 js 来操作 css
vue 是把 html，css，js 组合到一起，用 各自 的处理方式， vue 有单文件组件，可以把 html、css、js 写到一个文件中， html 提供了 模板引擎 来处理。

类式的组件写法，还是声明式的写法:
react是 类式 的写法，api很少
vue是 声明式 的写法，通过传入各种 options ， api 和 参数 都很多。所以 react 结合 typescript 更容易一起写，vue稍微复杂。vue3支持class类式的写法了

react整体的思路就是 函数式 ，所以推崇 纯组件，数据不可变，单向数据流 ，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于 可变数据 的，支持 双向绑定 。react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的， vue追求的是开发的简单 ，而 react更在乎方式是否正确 。