示例代码：

模板项目 index.vue 改动

<template>  
    <view class="content">  
        <image class="logo" src="../../static/logo.png" @click="onClick"></image>  
        <view>  
            <text class="title">{{title}}</text>  
            <test v-if="showTest" />  
        </view>  
    </view>  
</template>  

<script lang="ts">  
  import Vue from 'vue';  
    import Test from './test.vue';  

    export default Vue.extend({  
        data() {  
            return {  
                title: 'Hello',  
                showTest: true,  
            }  
        },  
        components: {  
            Test,  
        },  
        onLoad() {  

        },  
        methods: {  
            onClick() {  
                this.showTest = !this.showTest;  
            },  
        }  
    });  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin: 200rpx auto 50rpx auto;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

test.vue 代码

<template>  
  <text class="test">hahaha</text>  
</template>  
<script lang="ts">  
import Vue from 'vue';  

export default Vue.extend({  
  data() {  
    return {  
      observer: null,  
    } as {  
      observer: UniApp.IntersectionObserver | null;  
    };  
  },  
  created() {  
    this.createObserver(() => {}, 'test');  
  },  
  destroyed() {  
    this.disconnectObserver();  
  },  
  methods: {  
    createObserver(cb: { (): Promise<void> | void; (): void; }, calssName: string) {  
      this.$nextTick(() => {  
        this.disconnectObserver();  
        this.observer = uni.createIntersectionObserver(this).relativeToViewport({ bottom: -100 }); // 底部有导航栏覆盖，这里从导航栏往上设置可视区域  
        this.observer.observe(calssName, (res) => {  
          if (res.intersectionRatio === 0) {  
            return;  
          }  
          cb();  
          this.disconnectObserver(); // 出现后关闭监听  
        });  
      });  
    },  
    disconnectObserver() {  
      if (this.observer) {  
        console.log('----- disconnectObserver -----');  
        this.observer.disconnect();  
        this.observer = null;  
      }  
    }  
  }  
});  
</script>

操作步骤：

第一步

使用 dcloudio/uni-preset-vue 模板创建一个应用，然后创建一个组件，在组件的 created 生命周期调用 uni.createIntersectionObserver 创建元素的监听器，然后在 destroyed 生命周期调用 disconnect 进行监听器的释放，外部通过 v-if 控制组件的创建与销毁。

示例代码已经放在附件中

第二步

在项目一开始运行时使用开发者工具进行内存快照，在多次创建和销毁带有 IntersectionObserver 相关代码的组件后，再进行一次内存快照，对比两份内存快照，观察 VueComponent 是否存在泄漏的情况。

预期结果：

不应该出现 VueComponent Constructor 内存泄漏，内存中 VueComponent Constructor 的个数应该保持稳定不会无限制增长。

实际结果：

测试组件没有被正确释放，观察内存快照对比，VueComponent Constructor 数量不断上涨