optionsAPI缺点：相关逻辑代码太分散，代码不易复用，难以阅读维护
为了开始使用Composition API，我们需要有一个可以实际使用它（编写代码）的地方，setup()
目录
watchEffect 侦听数据变化 API（自动收集依赖）
setup函数
父组件通讯props
props选项依旧要写，规则和optionsAPI一样，并且在template中依然是可以正常去使用props中的属性，比如message；要想在setup函数中使用，要通过setup第一个形参
setup不可以使用this
setup返回值
setup函数的返回值可以在template中直接使用，类似data选项，但是const count=0 不是响应式的
reactive API使用
reactive函数对传入的类型有限制，必须是数组或对象类型
ref API使用
ref 会返回一个可变的响应式对象，该对象作为一个响应式的引用维护着它内部的值，这就是ref名称的来源；
它内部的值是在ref的 value 属性中被维护的
ref的自动解包
ref也可用来获取元素或组件对象
在setup中获取不到titleRef.value的值,需要在onMounted后
readonly API使用
看名字就知道，只读，当我们通过reactive或ref创建的响应式对象传递给子组件时，不想子组件可以修改，可以使用readonly
Reactive判断的API
不常用，但需要了解
toRefs 与 toRef（reactive对象解构）
如果我们使用ES6的解构语法，对reactive返回的对象进行解构获取值，那么之后无论是修改结构后的变量，还是修改reactive 返回的state对象，数据都不再是响应式的
这种做法相当于已经在info.age和age.value之间建立了 链接，任何一个修改都会引起另外一个变化
ref其他的API
了解
customRef 自定义ref使用
双向绑定的属性进行debounce(节流)的操作
computed 计算属性 API
使用方法与optionsAPI 类似 传入一个函数(get) 或者对象(包含get set)
watchEffect 侦听数据变化 API（自动收集依赖）
watchEffect用于自动收集响应式数据的依赖
基本使用
手动停止监听
watchEffect清除副作用
当我们在watchEffect发送网络请求时，如果侦听器停止，或者watchEffect触发频繁，上一次网络请求还没结束，又发送一次网络请求，造成网络请求过多，我们应该把上一次网络请求停止掉，即为清除副作用
我们给watchEffect传入的函数被回调时，其实可以获取到一个参数：onInvalidate 当副作用即将重新执行 或者 侦听器被停止 时会执行该函数传入的回调函数； 我们可以在传入的回调函数中，执行一些清楚工作
watchEffect执行时机
Watch API (侦听数据改变 惰性)
watch API 与options选项中类似
watch是惰性的，第一次不会直接执行，需要手动指定侦听数据，可访问数据改变前后值
侦听多个数据源
watch的选项
直接侦听reactive对象(不写成getter函数),会默认开启深度侦听
生命周期钩子
Provide函数
如果子孙组件需要修改数据，必须在父组件中修改，把方法传给子组件
Inject函数
setup顶层编写(现在强烈推荐)
顶层编写代码都会暴露给模板template
父组件不能通过ref或取子组件的方法,子组件必须暴露出来才可以
开发中代码抽取
compositionAPI非常有利代码的复用
一般我们把一些相关代码抽取到一个hook里（借鉴react,社区中以use开头）
欢迎大家留言，一起学习，共同进步，点点收藏与关注，下次不迷路
746
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
