Vue3 组合式API.md

组合式API

介绍

什么是组合式 API(composition API)

组合式 API 是 Vue3 提供的新功能，为我们提供了另一种编写组件的方式
代码共享。在 setup 钩子里面，可以按逻辑上的关注点来对代码进行分组，并与其他组件共享代码。

组合式 API 的出现解决了什么样的问题

随着Vue项目规模和复杂性的增加，现有 Option API 变得难以应付
逻辑并没有真正地按功能分组，这可能会让人很难读懂一个庞大而复杂的组件文件。
通过 Option API 实现组件间共享重复的逻辑(共享代码)比较麻烦
通过组合时 API 我们可以将重用逻辑封装为功能，这个功能可以组件间共享，这样你就可以在整个应用程序的不同组件中使用这些逻辑。

接口

setup

执行时间

优先于beforeCreate 和 created。setup 选项在组件创建之前执行，一旦 props 被解析，就将作为组合式 API 的入口。

参数

props:组件传入的属性
context

setup中接受的props是响应式的，当传入新的props会被及时更新。在setup中不能直接访问到this对象。

所以在setup中定义props，用这样的方式

defineProps({
  msg: String
})

context是一个普通的JavaScript对象，它暴露组件的三个property
context.attrs, context.slots, context.emit

组合式API生命周期函数

组合式api生命周期

onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onUnmounted ( -> destroyed)
onActivated ( -> activited)
onDeacitivated ( ->deacitivated)
onRenderTriggered
onRenderTricked

reactive 和 ref

reactive 和 ref的作用都是定义和跟踪需要双向绑定的变量。也就是数据定义，将一个普通对象变为响应式对象。

ref 接收参数并将其包裹在一个带有 value property 的对象中返回，然后可以使用该 property 访问或更改响应式变量的值

toRefs的作用就是，将一个reactive对象转化为属性全部为ref对象的普通对象

isRef

isRef用于判断变量是否为ref对象

const unwrapped = isRef(foo) ? foo.value : foo

computed

computed函数与vue2中computed功能一致，它接收一个函数并返回一个value为getter返回值的不可改变的响应式ref对象。

const count = ref(1)
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2
plusOne.value++ // 错误，computed不可改变

// 同样支持set和get属性
onst count = ref(1)
const plusOne = computed({
  get: () => count.value + 1,
  set: val => { count.value = val - 1 }
})
plusOne.value = 1
console.log(count.value) // 0

watch

用法

指定依赖源：
在基础用法中，
当依赖了多个reactive或ref是无法直接看到的，需要在回调中寻找.

指定依赖源

指定多个数据源

取消watch

onCleanyp函数：watch提供了一个onCleanup的副作用清除函数，该函数接收一个函数，在该函数中进行副作用清除。那么onCleanup什么时候执行？
- watch的callback即将被第二次执行时先执行onCleanup。
- watch被停止时，即组件被卸载之后。
  -watch选项
deep
深层对象的任意一个属性的改变都会出发回调的执行