toRefs和reactive

// 列表内容相关的逻辑
const useCurrentListEffect = (currentTab, shopId) => {
  const content = reactive({ list: [] })
  const getContentData = async () => {
    //想在api url后面传 ?tab=参数，请求的时候分开两个参数来传
    const result = await get(`/api/shop/${shopId}/products`, {
      tab: currentTab.value
    })
    if(result?.errno === 0 && result?.data?.length) {
      content.list = result.data;
    }
  }
  watchEffect(() => { getContentData() })
  const { list } = toRefs(content)
  return { list }
}

老师，为什么本节课转为reactive

const content = reactive({ list: [] })

之后，还要实行转为toRefs

  const { list } = toRefs(content)

为什么？这是做什么用处，没看懂