本文共 1071 字，大约阅读时间需要 3 分钟。

• Composition API 属于高阶技巧，不是基础必会
• Composition API 是为了解决复杂业务逻辑而设计的
• Composition API 就像 Hooks 在 react 中的地位

相关知识点

• reactive
• ref、toRef、toRefs
• readonly
• watch 和 watchEffect
• setup
• 生命周期钩子函数

介绍

reactive和ref都是 vue3 创建响应式对象的方式，

相当于 vue2 的 data里面创建的数据，

如果想要使用vue3 CompositionAPI的方式写程序，

就必须用reactive和ref 创建响应式对象

CompositionAPI的方式不支持vue2 的data，

所以才会存在reactive和ref

最佳使用

• 用reactive做对象类型的响应式，用 ref 做值类型的响应式
• setup 中返回 toRefs(state)，或者 toRef(state, ‘xxx’)
• ref 的变量命名都有 xxxRef
• 合成函数返回响应式对象用 toRefs

举例

   
    {   {    ageRef }}{   {    obj.name }}{   {    nameRef }}
   
import {    ref, reactive } from 'vue'export default {   	setup () {   		// ref包裹基本数据类型，使其响应式		const ageRef = ref(20)		const nameRef = ref('lvan')				// reactive包括复杂数据类型，使其响应式		const obj = reactive({   			name: nameRef		})				// 改变值		setTimeout(() => {   			ageRef.value = 25			nameRef.value = 'jack'		}, 2000)				return {   			ageRef,			obj		}	}}

toRef

针对一个响应式对象（reactive封装）的 props，创建一个 ref，具有响应式（一处改都改）

Composition API如何实现逻辑复用

• 抽离逻辑代码到一个函数中
• 函数命名约定为 useXxx 格式（同React Hooks）
• 在 setup 中引用useXxx函数