三天学习vue和react的对比-day1

写得真鸡儿乱

第一天内容

1. Vue和React发展历程
2. 二者开发思想和设计思路
3. JSX和template
4. 虚拟dom在Vue和React中的区别
5. 前端性能优化手段

1. Vue和React发展历程

Vue1 只有响应式没有vdom
React15 class组件为主
Vue2 引入vdom
React16 引入Fiber和hooks
Vue3 & React17 Vue从options变成composition，引入ref api；React从class编程hooks

2. 二者开发思想和设计思路

Vue2 options-api的优点：思路清晰，数据放在一起，方法放在一起…
缺点：每次新增业务时敲代码时需要上下反复横跳，使得代码可维护性越来越差（这个缺点可以用mixins来弥补，但mixins本身也有缺点——命名容易冲突，this是个黑盒，你根本不知道this中都有些什么，难以测试），不能tree-shaking。
React的class组件也会上下反复横跳。

Vue3 composition优点：可维护性高，可组合性高，利于build时tree-shaking…
缺点1：代码难看，要setup，要return，特别是要return也得上下反复横跳。
根据代码难看这个缺点，Vue3推出<script setup>，使得不需要export，不需要setup也不需要return。
缺点2：使用 ref 需要 .value，很麻烦。
根据这个 .value 的缺点，Vue3推出 ref: 新语法。

Vue3的composition-api写起啦很像React的hooks，但本质的设计思路千差万别。

首先得先知道：diff时间超过16.6ms会导致浏览器的卡顿。

Vue1是由于响应式对象太多导致页面的卡顿（Vue1只有响应式没有vdom），而React是由于diff时间过长导致的页面卡顿。
Vue2引入vdom，配合响应式，使得页面卡顿的问题缓解了。

React的函数式组件每次render都会重新执行（通过fiber和vdom，react没有响应式），而Vue组件代码只执行一次，后续render全靠数据响应式+vdom。

函数式组件是以后的未来，不论是Vue还是React。

3. JSX和template

template可以精确的区分哪些是静态节点，哪些是动态节点，从而进行优化。

Vue3相比Vue2进一步优化了静态节点的区分，引入block，比如v-if下的静态节点，在Vue2不是静态的，但在Vue3是当做静态节点的，进而提升了diff算法。

template限制比较多，所以优化起来比较精确，而jsx比较自由，优化起来就不是那么精确。

template限制多在于不能写js，只能用v-if，v-for等指令，用了这些指令的就是动态的，没用的就是静态的，静态的不需要参与diff，动态的才需要；而jsx比较自由在于可以随便写js，所以每个节点都有可能是静态或动态的，没法区分，导致所有节点都要进行diff算法。

由于React的diff比较难，要花大量时间，所以需要fiber技术，也就是时间切片，等浏览器闲时再进行diff算法，给浏览器让步。

4. 虚拟dom在Vue和React中的区别

真实dom的操作非常耗时，所以不能直接操作真实dom，比如一次性加100个div，得先 new DocumentFragment 进行拼接。

diff算法肯定不能diff真实dom，所以在vdom上进行diff就很美滋滋，diff完之后再以最小的代价去替换dom。

而且vdom可以实现跨端开发，vdom本质是js对象（json），比如微信小程序，针对微信小程序制作做整套vdom对象，这就轻松跨端了。

diff算法会判断新的改变是哪一种：移动，删除，新增，替换。然后再进行相应的操作，这就避免了直接整个父节点替换等的低效操作。

vue3的diff算法用了 最长递增子序列 + 双端预判。

vdom在Vue和React中的区别主要来源于两种update机制：响应式主动通知，vdom被动计算。Vue是两种结合，而React是vdom被动计算。

Vue是怎么结合的：根据组件划分，组件之间通过响应式通知，组件内部通过vdom计算diff。这个地方就挺懵的，百度也查不到相关知识。这就避免了两个极端问题：响应式数据过多会卡顿，vdom计算diff太多也会卡顿。

5. 前端性能优化手段

Vue2引入了vdom，使用的是snabbdom的代码，双端预判。

双端预判：web这个领域，列表大部分都是插入数据，删除数据，倒序，打乱排序。所以可以直接去掉双端相同的元素进行diff。

React的Fiber：树形的dom树转化为单向链表，一个一个diff，当浏览器需要做任务，比如要渲染视频的某一帧了，就先记住当前是链表中的哪个位置，然后把控制权交还给浏览器，等浏览器做完任务了，再继续diff，这样就不会卡顿。

性能优化主要在编译时进行优化。