需求描述： 一个 tree结构的分类列表，因为层级和每层有多少个分类不做限制，所以采取了el-tree的懒加载方式，每个分类的右侧有一些操作（操作的显示规则与本文无关，暂不做介绍），那么按照vue3中的思想，应该把 把获取 tree数据的方法、以及分类的操作写入 hooks。

俩文件： home.vue（写dom元素） materail.js (进行hooks分装)

el-tree懒加载介绍：与 vue2 一样，都是通过 loadNode 事件开始。loadNode函数有俩参数node和 resolve, node里面包含的是当前节点以及他父节点和子节点的信息， resolve是一个函数，将获取到的数据进行包裹给tree进行渲染。

思路：在 materail.js 文件中封装一个 名字为 fetchMaterial 的请求分类函数暴露出来

import handleMaterail from '../js/materail'
export default {
   setup () {
       let storeResolve = ref({})
       const { fetchMaterial } = handleMaterail()
       // 通过 loadNode 函数对数据进行请求和包裹
       const loadNode = (node, resolve) => {
	      console.log('loadNode', loadNode)
	      storeResolve = resolve // 对resolve进行存储
	      if (node.level * 1 === 0) {
	        fetchMaterial('')
	      } else {
	        fetchMaterial(node.data.categoryId * 1)
	      }
	  }
   }
}

上面是将 请求数据的函数 fetchMaterial 函数结构出来，然后再 loadNode 中进行请求，但是这时候他请求玩的数据 依旧再 hooks文件 materail.js 中， 然后再通过结构的 方式将数据暴露出来

const { fetchMaterial, materialList } = handleMaterail()

materialList 就是用来保存数据的， 之后通过监听的方式对数据进行包裹

// 保存 resolve
watch(materialList, (newValue, oldValue) => {
  storeResolve(newValue)
})

之后将 loadNode 对外进行暴露

return {
  loadNode,
  materialConfig,
  treeDefaultProps
}

material.js 文件

import { ref } from 'vue'
import {
  getCategoryInfo
} from '../api/create.js'

export default function handleMaterail () {
  const materialList = ref([])
  const fetchMaterial = async (id) => {
    const response = await getCategoryInfo({
      lang: 'en',
      categoryId: id || ''
    })
    materialList.value = response.data
  }

  return {
    materialList,
    fetchMaterial
  }
}

后续： 旁边的操作项可以按照这种方式继续开发下去，例如添加同级， 就写一个方法， 然后在里面进行 获取数据函数调用， 然后把这个方法暴露出去就ok啦