【九月打卡】第3天 Vue3.0改造音乐搜索页之use函数的使用

课程名称：vue3.0+TypeScript改造vue2.x项目

课程章节：Vue3.0改造音乐搜索页

课程讲师：西门老舅

课程内容：

1. 使用vue3改写音乐搜索页面的热搜榜功能、下拉提示功能、结果页和历史管理功能。
2. use函数的抽离使用

课程收获：

• 通过第一章节的介绍加上本章节的学习我进一步掌握了use函数的使用，use函数中还可以写vue3.0的各个生命周期钩子，使用vue3.0的各个新特性，如ref，reactive，torefs等，使我更加深刻的理解了vue3逻辑抽离复用的便利.
• 通过ref声明的响应式数据在使用的时候不能向vue2.0一样直接使用this.name，应该使用name.value获取值，因为vue3.0里面没有this这个对象，采用的是proxy来监听的是一整个对象，所以值被存储在这个对象的value属性下面，只能通过属性.value获取。
• 对比vue2.0，可见vue2是通过选项API，即option API的方式编写代码，这种方式的缺点是逻辑点比较分散，这就导致在大型项目里比较难以理解，变量来源不清晰等。
• 相比之下，vue3新推出的compsition API（组合API），根据逻辑点进行划分，每一块都是一个功能，这样阅读起来就会很方便直白，变量来源也清晰，还可以方便的抽离任何一段逻辑代码进行复用， 对大型的复杂的项目更加适用。

今天的课更深入的理解了组合式api的特性，这都的得力于老师讲课的方式，章节关联，环环相扣，非常喜欢，为加深了use函数的使用，也动手编写了一下use函数：

export default useGetDataList = () => {
	const list = ref([]);
	aixos.get('api/list').then((res) =>{
		list.value = res.data.result || []
	})
	onMounted(){
		console.log(list.value)
	}
	return {
		list
	}
}

注意： vue3.0中的响应式数据必须通过ref，reactive来声明，且通过return返回，否则不能实现响应式。