composition api学习理解

1.option api与composition api

1）与vue2相比vue3的option api生命周期命名有所改变

before destroy改为before unmount

destroyed改为unmounted

2）composition api 在option api基础上生命周期少了before create与created多了个setup且操作上其他生命周期在setup中操作

3）composition api带来了：

更好的逻辑代码

更好的逻辑复用:

（1：抽离逻辑代码到一个函数

（2：该函数约定命名格式为useXxxx

（3：在setup中引用useXxxx

更好的类型推导:

 

选择：

小型项目，业务逻辑简单用options Api

中大型项目，逻辑复杂用composition Api

2.ref,toRef与toRefs

ref：生成值类型的响应式数据

可用于模板和reactive

通过.value修改值

 

 

toRef：针对一个响应式对象（reactive封装）的prop

创建一个ref，具有响应式

两者保持引用关系

 

 toRefs：将响应式对象（reactive封装）转换为普通对象

对象的每个prop都是对应的ref

两者保持引用关系

最佳使用方式：

用reactive做对象的响应式，用ref做值类型的响应式

setup中返回toRefs(state),或者toRefs('state','xxx')

ref的变量命名都用xxxRef

合成函数返回响应式对象时使用toRefs

3.watch与watchEffect：

两者都可监听data的变化

watch需要明确监听哪个属性

watchEffect会根据其中的属性，自动监听变化