Javascript vue.js中的交点观察者问题

这是我第一次使用IntersectionObserver，我遵循了这个文档 . 但是由于这个错误，我被阻止了

[Vue warn]: Error in mounted hook: "TypeError: Failed to construct 'IntersectionObserver': The provided value is not of type '(Element or Document)'"

这是我的触发器组件

<template>
  <span ref='trigger'></span>
</template>

<script>
export default {
  props:{
    options:{
      type: Object,
      default: () => ({
        root: 0,
        threshold: "0",
      })
    }
  },
  data(){
    return{
      observer : null
    }
  },
  mounted(){
    this.observer = new IntersectionObserver( entries => {
      this.handleIntersect(entries[0]);
    }, this.options);

    this.observer.observe(this.$refs.trigger);
  },
  destroyed(){
    this.observer.disconnect();
  },
  methods:{
    handleIntersect(entry){
      if (entry.isIntersecting) this.$emit("triggerIntersected");
    }
  }
}
</script>

导出默认值{
道具：{
选项：{
类型：对象，
默认值：（）=>({
根：0，
阈值：“0”，
})
}
},
数据（）{
返回{
观察员：空
}
},
安装的（）{
this.observer=新的IntersectionObserver（条目=>{
此.handleIntersect（条目[0]）；
}，这是期权）；
this.observer.observe（this.$refs.trigger）；
},
销毁（）{
this.observer.disconnect（）；
},
方法：{
handleIntersect（入口）{
如果（条目的isIntersecting）本.$emit（“triggerIntersected”）；
}
}
}

---

我如何修复此问题？（谢谢）

您已将

选项的
默认值更改为：

default: () => {
  return {
    root: null,
    threshold: "0"
  };
}

致：

但是如果我们查看
lib.dom.d.ts
，下面是IntersectionObserver选项对象的接口：

interface IntersectionObserverInit {
  root?: Element | null;
  rootMargin?: string;
  threshold?: number | number[];
}

当
root
为
null
或
undefined
时，
IntersectionObserver
默认为视口元素

因此，将其更改回
null
，它就会工作。
您使用的浏览器和版本是什么？Google Chrome 81.0.4044.129您是否在
创建的
生命周期方法中尝试过这一点，而不是
装载的
？是，相同的错误您的IntersectionObserver似乎未定义或未正确导入。您正试图迭代承诺响应，就像它是一个数组一样，但它未定义。我需要更多的信息来告诉你更多。你能创建一个新的应用程序吗？我建议使用codesandbox.io。顺便说一句，如果你错过了，那篇文章的作者链接了一个你可以从中获得灵感的链接。
interface IntersectionObserverInit {
  root?: Element | null;
  rootMargin?: string;
  threshold?: number | number[];
}