面试题：Vue 2.0 支持哪个版本以上的 IE 浏览器？

Vue 2.x 官方支持 Internet Explorer 9 及以上版本。以下是详细说明和注意事项：

1. Vue 2.x 对 IE 的支持

IE 9+：Vue 2.x 的核心代码可以在 IE 9 及以上版本中运行。
IE 8 及以下：Vue 2.x 不支持 IE 8 及以下版本，因为这些浏览器不支持 Vue 2.x 依赖的现代 JavaScript 特性（如 Object.defineProperty）。

2. Vue 2.x 在 IE 中的兼容性问题

尽管 Vue 2.x 支持 IE 9+，但在 IE 中使用时可能会遇到以下问题：

（1）ES6+ 语法不支持

IE 不支持 ES6+ 语法（如 Promise、箭头函数、let/const 等）。如果项目中使用了这些语法，需要借助 Babel 和 polyfill 进行转换。

（2）`Object.defineProperty` 的限制

Vue 2.x 的响应式系统依赖于 Object.defineProperty，而 IE 8 及以下版本不支持该方法。IE 9+ 虽然支持，但对数组和对象的某些操作（如直接通过索引修改数组）可能无法触发响应式更新。

（3）Polyfill 需求

为了在 IE 中正常运行，通常需要引入以下 polyfill：

Promise：IE 不支持 Promise，需要引入 es6-promise 或 core-js。
fetch：如果使用了 fetch API，需要引入 whatwg-fetch。
其他 ES6+ 特性：通过 Babel 和 core-js 提供支持。

3. 如何确保 Vue 2.x 在 IE 中正常运行

（1）使用 Babel 转换 ES6+ 语法

在项目中使用 Babel 将 ES6+ 语法转换为 ES5，确保代码在 IE 中兼容。

# 安装 Babel 和相关插件
npm install --save-dev @babel/core @babel/preset-env babel-loader

在 babel.config.js 中配置：

module.exports = {
  presets: [
    [
      '@babel/preset-env',
      {
        targets: {
          ie: '9' // 支持 IE 9+
        },
        useBuiltIns: 'usage', // 按需引入 polyfill
        corejs: 3 // 使用 core-js 3
      }
    ]
  ]
};

（2）引入 Polyfill

在入口文件（如 main.js）中引入必要的 polyfill。

// 引入 Promise polyfill
import 'core-js/stable';
import 'regenerator-runtime/runtime';

// 引入 fetch polyfill（如果需要）
import 'whatwg-fetch';

（3）配置 Vue 项目

在 vue.config.js 中配置 transpileDependencies，确保依赖包也被正确转换。

module.exports = {
  transpileDependencies: true
};

4. Vue 3.x 对 IE 的支持

Vue 3.x 不再支持 IE 11 及以下版本，因为 Vue 3 使用了 Proxy 实现响应式系统，而 Proxy 无法在 IE 中被 polyfill。

5. 总结

Vue 版本	支持的 IE 版本	注意事项
Vue 2.x	IE 9+	需要 Babel 和 polyfill 支持，确保 ES6+ 语法和 API 兼容。
Vue 3.x	不支持 IE 11 及以下	Vue 3 使用了 `Proxy`，无法在 IE 中兼容。

如果项目需要支持 IE 9+，建议使用 Vue 2.x，并通过 Babel 和 polyfill 确保兼容性。如果不需要支持 IE，可以考虑升级到 Vue 3.x，享受更好的性能和开发体验。

THE END