vue3调用接口 实现订阅退订功能

在 Vue3 中，可以通过使用 `watch` 函数来实现订阅和退订功能。具体步骤如下：

1. 在组件中定义一个属性来存储接口返回的数据，如 `data`。

2. 在组件中定义一个 `watch` 函数来监听 `data` 的变化，并在变化时执行相应的操作，如发送请求、更新页面等。例如：

watch: {
  data: {
    handler(newVal, oldVal) {
      // 发送请求
      // 更新页面
    },
    immediate: true // 在组件挂载时就立即执行
  }
}

3. 在组件挂载时调用接口获取数据，并将数据赋值给 `data` 属性。

4. 在组件销毁时取消对 `data` 的监听，以避免内存泄漏。可以使用 `watch` 函数返回的函数来取消监听。例如：

const unwatch = watch('data', () => {
  // ...
})

// 在组件销毁时调用
unwatch()

完整的代码示例：

<template>
  <div>
    <p>{{ data }}</p>
    <button @click="subscribe">订阅</button>
    <button @click="unsubscribe">退订</button>
  </div>
</template>

<script>
import { ref, watch } from 'vue'
import api from 'xxx'

export default {
  name: 'MyComponent',
  setup() {
    const data = ref(null)
    let subscription = null

    // 订阅函数
    function subscribe() {
      // 发送订阅请求
      api.subscribe().then(res => {
        subscription = res.subscription
        console.log('已订阅')
      })
    }

    // 退订函数
    function unsubscribe() {
      // 发送退订请求
      api.unsubscribe(subscription).then(() => {
        subscription = null
        console.log('已退订')
      })
    }

    // 监听 data 的变化
    const unwatch = watch(data, () => {
      // 发送请求
      // 更新页面
    }, {
      immediate: true // 在组件挂载时就立即执行
    })

    // 在组件挂载时获取数据
    api.getData().then(res => {
      data.value = res.data
    })

    // 在组件销毁时取消监听
    function beforeUnmount() {
      unwatch()
    }

    return {
      data,
      subscribe,
      unsubscribe,
      beforeUnmount
    }
  }
}
</script>