Vue3怎么兼容低版本浏览器

468 阅读2分钟

Vue3 怎么可能能兼容 IE 呢?我一开始也是这么想的,但是看到运行结果的那一刻,我震惊了。

我们先从理论上分析一下兼容 IE 的可行性。很多人都认为 Vue3 兼容不了 IE 的原因在于 Proxy 无法 polyfill,而实际上 Proxy 并不是完全不能 polyfill,Proxy 可以 polyfill 出一个子集。在只监听 get、set,后续不新监听属性的情况下,可以兼容 IE9 以上;如果再加上不许新增属性的约束,甚至可以兼容 IE8 以下。因此在控制 reactive 使用的情况下,Proxy 的兼容不成问题。当然,除了 Proxy 应该还有别的什么问题,我们试试看看。

我们先新建一个工程化项目。在项目中应当含有最基础的 babel 转译和 polyfill 插入,这些应当作为项目标配。

我们构建后用低版本浏览器看看效果。

不出意外,果然,在支持 Proxy 的浏览器就正常,不支持 Proxy 的浏览器上白屏。

这是因为我认为 Proxy 比较特殊,没有放到标配构建步骤里,需要跟具项目自行配制。我们使用 @rollup/plugin-inject 这个插件,这个插件可以无污染注入 polyfill。我们在项目构建配制文件里加入注入 Proxy、Reflect、Symbol 的插件配制,并把范围限定在 Vue 源码中。我们构建后看看效果。

我们可以看到低版本浏览器竞然直接就可以用了。本来以为还要对 Vue 源代码进行改造,结果另我很意外。

我们继续试试更低版本浏览器。结果 IE10、IE9 都能用,IE8 及以下不能用了。看来要兼容到 IE8 就必须要改源代码了。

只做了 babel 和 polyfill 就能兼容到 IE9,那为什么 Vue 开发团队没有发布呢?我认为应该是 Vite 的锅,Vite 兼容性本来做的不好,不管用的是不是 Vue3。