react和vue的区别，如果让你选，你会选择哪一种框架

react是facebook团队出的一款JS UI框架，vue是尤大大完成的。
两者都是采用的虚拟DOM节点
VUE采用的数据劫持发方式，实现了数据的双向绑定。vue通过依赖收集和消息派发的方式，可以清楚的精准的知道变化，从而把变化更新到真实dom上
react是通过比较引用方式，当引用数据发生改变的时候，会重新创建新的component，如果想要减少渲染，可以使用pureComponent或者shouldUpdateComponent来控制是够更新。vue组件内部默认了这样的优化
react通过HOC（类式组件）或者React Hooks（函数式组件）来封装能够复用代码
vue通过Mixin的方式混入，mixin混入的方式带来的问题就是不好追踪数据，vue2.0采用的是options api，所以同一个业务代码，需要写在不同的声明周期中，造成代码混乱
vue3.0也支持Hooks功能，提供了Compoistions API,但是vue3不支持IE浏览器，周边社区也不是很完善
react hooks提供了useState,useEffect,useCallback等钩子函数

构建版本

cjs: commonjs
global: 直接通过script标签引入
browser: esm，通过script标签，module属性引入
bundler

Composition API设计动机

Options API: Options是通过option添加data,methods,computed,在实现比较复杂的组件的时候，功能比较分散
虽然有Mixin能够重用，但是有命名冲突问题，以及不好定位问题

Composition API
查看功能的时候只需要关注函数内部实现，不需要上下滚动来找到需要代码
有利于代码的重用和拆分

性能提升

vue2.0中通过使用Object.defineprototype，通过遍历所有的属性
vue3.0采用Proxy
可以监听整个对象
可以监听属性的删除
可以监听数组的索引和Length属性

编译优化

2中将模板编译成render函数，必须有一个根节点，只标记静态根节点，优化diff过程
3中通过标记和提升所有的静态节点，diff比较的时候只需要比较动态节点
通过patch flag给节点打上标签
缓存事件处理函数
支持tree-shaking,内置组件（transation,keep-alive等都会按需加载）
Vite（Vue3构建框架，类似于webpack）：基于ESModule实现的，即时编译，只有需要的时候才编译
提升开发在开发过程中的体验

vite在开发模式下不需要打包，所以在开发阶段是秒开的
按需编译
模块热更新（HMR需要很快）
生产环境下使用rollup打包

Composition API使用方法
createApp是创建组件的乳沟
（Composition API的入口）setup使用时期：组件被实例化之前调用，所以不能调用Methods等
reactive把数据变成响应式，该对象的嵌套属性也会变成响应式

Vue3优化了diff算法-采用最长递增子序列
先找到需要移动的新节点在老节点中对应的索引
然后找到最长递增子序列，当子序列递增情况下，就不需要移动
如果不是自增，找到相同长度的序列，再找到递增子序列，重复上面操作

react:
React用于构建用户界面的js库，它只负责应用的视图层，帮助开发人员快速且交互式的wen应用程序。使用组件方式构建用户界面
react采用jsx语法，允许使用js编写
react数据流是单向流的，当数据发生改变的时候，react会重新渲染组件树，单向数据流使数据变得可预测
context跨级传递数据

前端知识积累

vue3.0 和react

react和vue的区别，如果让你选，你会选择哪一种框架

构建版本

Composition API设计动机

性能提升

编译优化