ResizeObserver取消监听

ResizeObserver 的取消监听有两种方法：

1. 使用 `ResizeObserver.unobserve()` 方法。

const ro = new ResizeObserver(callback);

// 停止监听给定的元素
ro.unobserve(targetElement);

// 停止监听所有元素
ro.disconnect();

2. 将 `ResizeObserver` 对象设为 `null`。

const ro = new ResizeObserver(callback);

// 停止监听
ro = null;

这两种方法都能够停止对元素的监听。

注意：如果不再使用 ResizeObserver，应该使用 `disconnect()` 方法来断开连接，以释放资源。

相关问题

ResizeObserver同时监听多个 dom

是的，ResizeObserver可以同时监听多个DOM元素。您可以通过以下两种方法来实现：

1. 实例化多个ResizeObserver对象，每个对象监听一个DOM元素。

const observer1 = new ResizeObserver(entries => {
  // 处理第一个DOM元素的变化
});

const observer2 = new ResizeObserver(entries => {
  // 处理第二个DOM元素的变化
});

observer1.observe(document.getElementById('element1'));
observer2.observe(document.getElementById('element2'));

2. 为ResizeObserver对象添加多个监听器，每个监听器监听一个DOM元素。

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    if (entry.target.id === 'element1') {
      // 处理第一个DOM元素的变化
    } else if (entry.target.id === 'element2') {
      // 处理第二个DOM元素的变化
    }
  });
});

observer.observe(document.getElementById('element1'));
observer.observe(document.getElementById('element2'));

无论您选择哪种方法，都可以同时监听多个DOM元素的变化。

取消监听

是的，取消监听是很重要的，避免不必要的性能开销和内存泄漏。可以使用watchEffect函数的返回值来取消监听。示例如下：

import { watchEffect } from 'vue';

export default {
  setup() {
    const data = reactive({ count: 0 });
    const stop = watchEffect(() => {
      console.log(data.count);
    });

    // 取消监听
    onBeforeUnmount(() => {
      stop();
    });

    return { data };
  },
};

在上面的示例中，使用watchEffect函数监听了data.count的变化，并在控制台输出变化的值。使用stop变量来保存watchEffect函数的返回值，在组件卸载前调用stop函数来取消监听。这样可以避免内存泄漏和不必要的性能开销。