Options API的特点： 对应的属性中编写对应的功能模块（data定义数据，methods定义方法，computed定义计算属性，watch中监听属性改变，还有生命周期的钩子）
一、Options API的弊端
1. 实现某个功能时，这个功能对应的代码逻辑会被拆分到各个属性中；
2. 组件变得更大更复杂时，逻辑关注点的列表就会增长，同一个功能的逻辑就会被查分的很分散；
3. 对于一开始没有编写这些组件的人来说，这个组件的代码是难以阅读和理解的。
二、setup函数
1、setup函数的参数
① 第一个参数：props
props 父组件传递过来的属性会被放到props对象中，要在setup中使用，就可以直接通过props获取
② 第二个参数：context（包含三个属性）
· attrs：所有非prop的attribute
· slots：父组件传递过来的插槽
· emit：组件内部需要触发事件时会用到
2、setup函数的返回值
· 可以在template中被使用（通过setup的返回值来替代data选项）
· 返回一个执行函数来替代在methods中定义的方法
3、setup不可以使用this
· this并没有指向当前实例
· 在setup被调用之前，data、computed、methods等都没有被解析
三、Reactive API（为setup中的数据提供响应式的特性）
· 我们使用reactive函数处理我们的数据之后，数据再次被使用时就会进行依赖收集
· 当数据发生改变时，所有收集到的依赖都是进行对应的响应式操作（比如更新界面）
· 我们编写的data选项，也是在内部交给了reactive函数将其编成响应式对象的
import { reactive } from "vue"
const state = reactive({
counter: 10
})
四、Ref API（为setup中的数据提供响应式的特性）
· ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是ref名称的来源
· 内部的值是在ref的value属性中被维护的
import { ref } from "vue"
const counter = ref(10)
五、Readonly API（只读）
· 会返回原生对象的只读代理（也就是proxy，这是一个proxy的set方法被劫持，并且不能对齐进行修改）
import { readonly } from "vue"
const info = reactive({
name: "coco"
})
const readonlyInfo = readonly(info)
const updateState = () => {
info.name = "jack" // 成功
readonlyInfo.name = "kiki" // 失败且警告
}
六、reactive 相关的API
1. isProxy
· 检查对象是否由 reactive 或 readonly 创建的 proxy
2. isReactive
· 检查对象是否由 reactive 创建的响应式代理
· 如果该代理是 readonly 创建的，但包裹了由 reactive 创建的另一个代理，它也会返回true
3. isReadonly
· 检查对象是否由 readonly 创建的只读代理
4. toRaw
· 返回由reactive 或 readonly代理的原始对象（不建议保留对原始对象的持久引用）
5. shallowReactive
· 创建一个响应式代理，他跟踪其自身 property 的响应式，但不执行嵌套对象的深层响应式转换（深层还是原生对象）
6. shallowReadonly
· 创建一个 proxy，使其自身 property 为只读，但不执行嵌套对象的深度只读转换（深层还是可读、可写的）
七、toRefs
· 可以将 reactive 返回的对象中的属性都转成 ref
· 这种做法相当于在state.name 和 ref.value之间建立了链接，任何一个修改都会引起另一个的变化
八、toRef
· 将 reactive 中的某一个属性都转成 ref
九、ref 相关的API
1. isRef
· 判断是否是一个 ref 对象
2. unref
· 如果参数是一个ref，则返回内部值，否则返回参数本身
· 这是 val = isRef(val) ? val.value : val 的语法糖函数
3. shallowRef
· 创建一个渐层的 ref 对象
4. triggerRef
· 手动触发和 shallowRef 相关联的副作用
4. customRef
· 创建一个自定义ref，并对其依赖项跟踪和更新触发进行显示控制
· 它需要一个工厂函数，该函数接受track和trigger函数座位参数
· 返回一个带有get和set的对象
