我把我的应用升级 Vue3 后，变慢了 50%

[Cbdy]

• Vue2

• Vue3 with Options API

• Vue3 with Composition API

源码： https://github.com/alchemy-works/game-of-life

---

说明 Proxy 确实比 Object.defineProperty 慢不少啊

原始版本

https://github.com/alchemy-works/game-of-life/tree/4819a1ba73b13c5763b4dbaa56139d234bae3b74

---

昨天看到说Vue3要转正了，而且兼容Vue2的写法，所以替换了一下Runtime发现了这个问题

我写了个 React 的版本（几乎一样的代码逻辑），弄了个 Index ，然后把 Vue3 的性能问题用 shallowReactive 修了一下

https://alchemy-works.github.io/game-of-life/

[7anshuai]

页面渲染肉眼可见的慢了啊

[noe132]

你应该使用 shallowReactive 。从图上可以看出 getNextGridData 中间接调用了 vue3 reactivity 的 get 方法，导致这个单独方法调用占用了每帧大约 75%的时间。

https://github.com/alchemy-works/game-of-life/blob/4819a1ba73b13c5763b4dbaa56139d234bae3b74/www/src_vue3/App.js#L17

这一行把 reactive 换成 shallowReactive ，我这里 chrome 6x slowdown ，1 秒时间，vue2 渲染了大概 10 帧，vue3 大概渲染了 12 帧，可以看出 vue3 有略微的性能提升

[Cbdy]

@noe132 谢谢，我不知道这个 API ，我等等去看看

另外，vue3 legcy 中，我单纯替换了 runtime 为 vue3 ，结果性能下降了，是不是说明如果要在 vue3 中取得性能改善，必须使用 vue3 的 composition api 并选择正确的 api ？

[Cbdy]

我查了一下，原来 vue3 的 reactive 会拦截深层对象的 get 和 set ，而 vue2 的 data 不会，那确实要做一些改造才能避免性能问题

[4196]

受 2L 启发，你这种写法在 React hooks 里面性能更加‘爆炸’

[illuz]

@Cbdy 试试在将参数传给 getNextGridData 时，用 toRaw 方法把 Proxy 层拨掉：
state.gridData = getNextGridData(toRaw(state.gridData))

也就是如果是 someReactive = handle(someReactive) 这种调用时，最好都用 toRaw 来提升性能

[Cbdy]

@4196 2L 说时间花在 get 上，那 React 应该不会有这个问题，我等等写个看看

[longxi]

@Cbdy vue2 的 data 也会拦截深层对象的 get 和 set ，这个应该是 Proxy 的性能问题，shallowReactive 只代理了一层，避免了性能下降，参见：
https://www.zhihu.com/question/460330154 ，https://www.cnblogs.com/zmj97/p/10954968.html

[Cbdy]

@longxi 看了迷渡的回答，“只是优化了对象的访问，性能提升了 27% 到 438%，但是没有优化数组。”，那倒确实有可能

我 Vue 用得少，而且每次都是替换顶层属性，所以没有注意这个问题😂

[jones2000]

直接 DOM 修改， 不用 data 不就行了。

[KouShuiYu]

react 不清楚，但是直接用 template 发挥不了 vue 的性能优势啊，还要在浏览器中编译后才能运行