获得徽章 25
- 我们所谓的宏任务与微任务的最大的区别就是，每一个宏任务执行完之后都会把控制权交给浏览器，浏览器就会根据情况决定是否进行渲染，而微任务执行完之后如果还存在微任务则不会把控制权交给浏览器，而是继续执行微任务，直到所有的微任务执行完毕才把控制权交给浏览器，从这个角度看 requestAnimationFrame 就是个宏任务。
因为每个 requestAnimationFrame 执行完也都会把控制权交给浏览器，也正是因为这个特点，才有些文章提倡可以使用 requestAnimationFrame 进行大数据渲染的性能优化，而不是使用微任务。
requestAnimationFrame 本身的设计就是在每一帧渲染完准备显示之前去执行的，也就是 requestAnimationFrame 执行的时候浏览器本身就准备显示新的内容了，如果 requestAnimationFrame 像微任务那样执行完不把控制权交还给浏览器，那么这个设计就不合理了，所以 requestAnimationFrame 的设计天然就是执行完之后就需要把控制权交还给浏览器，让浏览器去渲染新一帧的内容。
其实 requestAnimationFrame 进行大数据渲染的性能优化也并不是最优的方案，最优的方案还是 React 中的时间分片方案。
当然现在也有人说，浏览器不区分所谓宏任务与微任务了，都叫任务队列，只是这些任务有执行先后的优先级，但不管怎么分，所有的任务都可以以执行完之后是否把控制权交还给浏览器进行区分。展开等人赞过
15 - Vue 的响应式也是存在心智负担的，使用 Vue 需要你对响应式原理有比较深的理解，不然很容易写出造成响应式丢失的代码，从而造成 Bug。
这一点估计对于很多习惯 React 的人是很不习惯的，明明这种写法在 React 中甚至在普通 JS 中都是不存在任何问题的，但在 Vue 中却不行，不管是 Vue2 还是 Vue3 都需要通过 Vue 提供的特有的 API 进行书写。
如果要进行更深层次的探讨，这应该是 React 的单向数据流模式和 Vue 响应式数据模式之间的优缺点。虽然 Vue 官方也希望大家遵守单向数据流的原则，但实际开发中由于响应式模式的特性，大家为了方便很多情况下也不遵守，甚至 Vue 官方自己也提供打破单向数据流的写法。展开等人赞过 15 - 值得注意的是，Vue3 源码在处理 ESM 规范的代码时，还进行细分，分别是浏览器环境的 ESM 文件，例如：reactivity.esm-browser.js，和 Node.js 环境的 ESM 文件，例如：reactivity.esm-bundler.js，它们的区别就是浏览器环境的 ESM 文件是全量打包，Node.js 环境的 ESM 文件是只打包开发文件本身的代码，也就是浏览器环境的 ESM 文件会把引用到的 node_modules 文件中的包也会打包进去，而 Node.js 环境的 ESM 文件则不会，这样 Node.js 环境的 ESM 文件体积会变得更小，但只能在 Node.js 环境中运行，到时在开发应用产品的时候，在打包成浏览器环境的产物时，会配合 webpack、rollup、vite 等打包工具将 node_modules 文件中的包打包进去。展开赞过 评论2
