01-setup方法与script_setup及ref响应式

在Vue3.1版本的时候，提供了setup方法；而在Vue3.2版本的时候，提供了script_setup属性。
- setup方法是需要把数据进行return后，才可以在template标签中进行使用。
- setup属性方式定义好后就可以直接在template标签中进行使用。
ref响应式
- 在组合式API中来完成数据的响应式操作，通过的就是ref()方法，需要从vue模块中引入这个方法后才可以使用。
- count数据的修改，需要通过count.value的方式，因为vue底层对响应式数据的监控必须是对象的形式，所以我们的count返回的并不是一个基本类型，而是一个对象类型，所以需要通过count.value进行后续的操作
- ref()方法还可以关联原生DOM，通过标签的ref属性结合到一起，也可以关联到组件上

02-事件方法_计算属性_reactive_toRefs

在组合式API中实现事件方法和计算属性
reactive与toRefs
- reactive()方法是组合式API中另一种定义响应式数据的实现方式，它是对象的响应式副本
ref()和reactive()这两种方式都是可以使用的，一般ref()方法针对基本类型的响应式处理，而reactive()针对对象类型的响应式处理，当然还可以通过toRefs()方法把reactive的代码转换成ref形式

03-生命周期_watch_watchEffect

生命周期对比
watchEffect 函数
- 它立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数。
watchEffect常见特性：
- 一开始会初始触发一次，然后所依赖的数据发生改变的时候，才会再次触发
- 触发的时机是数据响应后，DOM更新前，通过flush: ‘post’ 修改成DOM更新后进行触发
- 返回结果是一个stop方法，可以停止watchEffect的监听
- 提供一个形参，形参主要就是用于清除上一次的行为
watch侦听器的使用方式:
watch与watchEffect的区别是什么呢？
- 懒执行副作用
- 更具体地说明什么状态应该触发侦听器重新运行
- 访问侦听状态变化前后的值

04-跨组件通信方案provide_inject

依赖注入
- 在Vue中把跨组件通信方案provide_inject也叫做依赖注入的方式
依赖注入使用的时候，需要注意的点：
- 不要在inject中修改响应式数据，可利用回调函数修改
- 为了防止可设置成 readonly

05-复用组件功能之use函数

为了更好的组合代码，可以创建统一规范的use函数，从而抽象可复用的代码逻辑。利用use函数可以达到跟mixin混入一样的需求，并且比mixin更加强大
在这里插入图片描述
通过useCounter函数的调用，就可以得到内部return出来的对象，这样就可以在.vue文件中进行功能的使用，从而实现功能的复用逻辑。