02.vue3-组合API(上篇)

setup

• setup 是一个新的组件选项，作为组件中使用组合API的起点。
• 从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。
• 这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined
• 在模版中需要使用的数据和函数，需要在 setup 返回。

总结： setup 组件初始化之前执行，它返回的数据和函数可在模版使用。

组合API-生命周期

• vue2.x生命周期钩子函数：

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• updated
• beforeDestroy
• destroyed

• vue3.0生命周期钩子函数

• setup 创建实例前
• onBeforeMount 挂载DOM前
• onMounted 挂载DOM后
• onBeforeUpdate 更新组件前
• onUpdated 更新组件后
• onBeforeUnmount 卸载销毁前
• onUnmounted 卸载销毁后

image.png

总结： 组合API的生命周期钩子有7个，可以多次使用同一个钩子，执行顺序和书写顺序相同。

组合API-reactive函数

• reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。

总结： 通常是用来定义响应式对象数据

组合API-toRef函数

• toRef是函数，转换响应式对象中某个属性为单独响应式数据，并且值是关联的。
  使用场景1：有一个响应式对象数据，但是模版中只需要使用其中一项数据。

使用场景2：剥离响应式对象（解构|展开），想使用响应式对象中的多个或者所有属性做为响应式数据。

• toRefs是函数，转换响应式对象中所有属性为单独响应式数据，对象成为普通对象，并且值是关联的

组合API-ref函数

定义响应式数据：

• ref函数，常用于简单数据类型定义为响应式数据
• 再修改值，获取值的时候，需要.value
• 在模板中使用ref申明的响应式数据，可以省略.value
  当你明确知道需要的是一个响应式数据 对象 那么就使用 reactive 即可
  其他情况使用ref