MutationObserver 兼容性

MutationObserver 是一个用于监视 DOM 变化的 JavaScript API。它可以监听 DOM 树中的节点变化，包括节点的添加、删除、属性变化等。MutationObserver 在现代浏览器中得到广泛支持，但在一些旧版本的浏览器中可能不兼容。以下是 MutationObserver 的兼容性情况：

1. Chrome：MutationObserver 支持自 Chrome 18 版本以及更高版本。
2. Firefox：MutationObserver 支持自 Firefox 14 版本以及更高版本。
3. Safari：MutationObserver 支持自 Safari 6 版本以及更高版本。
4. Opera：MutationObserver 支持自 Opera 15 版本以及更高版本。
5. Edge：MutationObserver 支持自 Edge 12 版本以及更高版本。

然而，部分旧版的浏览器（如 IE11）不支持 MutationObserver。对于这些不支持 MutationObserver 的浏览器，你可以考虑使用其他方式来监视 DOM 变化，比如 Mutation Events 或定时轮询等方法。但是需要注意的是，这些方法可能会带来性能和稳定性方面的问题，因此推荐在支持 MutationObserver 的现代浏览器中使用它来进行 DOM 变化的监听。

相关问题

使用babel-polyfill设置ie兼容性时报错‘mutationObserver’未定义

`MutationObserver` 是一个现代浏览器中用于观察DOM节点更改的API，但在较旧版本的Internet Explorer（IE8及更早版本）中并未内置。当你在不支持这个API的浏览器上尝试使用 `babel-polyfill`（一个Babel提供的polyfill库，旨在为新的JavaScript特性提供回退解决方案）引入它时，可能会遇到“`mutationObserver`未定义”的错误。

`babel-polyfill` 并不能自动地为所有不支持的特性添加 polyfill，特别是那些依赖浏览器原生API的。对于像 `MutationObserver` 这样的高级功能，你需要单独处理。解决这个问题通常有以下几种步骤：

1. **检查兼容性**: 确定你的应用需要在哪些旧版IE中运行，因为从IE9开始才部分支持 `MutationObserver`。

2. **选择适当的polyfill**: 有些库如 `es6-shim`, `mobx-react-lite/polyfill` 或者专门针对 `MutationObserver` 的 `mutationobserver-shim` 可能能满足需求。

3. **添加polyfill到入口文件**：在你的项目入口文件（例如index.js或main.js）里，导入并使用相应的polyfill库，通常是作为模块导入并在适当的时候初始化。

4. **编写条件判断**：如果确定某个特定的API确实不可用，可以在使用前做检查并提供备选方案或者向用户显示兼容性提示。

// 如果在IE中
if (typeof window.MutationObserver === 'undefined') {
  // 引入 mutationobserver-shim 或其他polyfill
  require('mutationobserver-shim');
}

const observer = new MutationObserver(callback);

vue2 浏览器兼容ie11

Vue 2本身并不直接支持IE11，因为Vue的一些特性和新特性，如ES6语法、Proxy对象等，在IE11这种较老版本的浏览器中可能存在兼容性问题。为了在IE11上使用Vue，你需要采取一些额外措施：

1. **降级polyfills**: 使用Babel将ES6转译成ES5，以便在IE11中运行。安装并配置`@babel/preset-env`和`@babel/polyfill`。

2. **使用vue-router的history模式**：在`router/index.js`中设置`mode: 'hash'`，因为在IE11中，`history`模式需要HTML5 History API，这在较旧浏览器中不可用。

3. **避免使用class组件**：在IE11中，只能使用函数式组件和原生DOM操作。如果需要状态管理，可以考虑使用Vuex轻量级的状态管理模式。

4. **处理Promise和MutationObserver**：对于现代JavaScript特性，如Promise和MutationObserver，可能需要引入polyfill库如es6-promise和Intersection Observer polyfill。

5. **样式兼容**：检查CSS选择器是否对IE11有效，并可能需要引入像autoprefixer这样的工具来处理浏览器前缀。

6. **渐进增强**：针对IE11的特性，可能需要编写一套专门的备用样式和JavaScript代码，然后使用条件注释（`<!--[if lt IE 11]> ... <![endif]-->`）来控制它们何时启用。

尽管如此，由于Vue2官方推荐升级到更现代的浏览器，所以在实际项目中，除非有明确的业务需求，否则使用Vue2在IE11上的维护成本会相对较高。