1.介绍

为了写出更好的简明易简，可以结合ref、recative、toRefs写出优雅的代码，进行代码功能划分。无需再像之前一样，功能全部都定义在data中，而vue3更建议将代码按功能处理进行定义划分，让代码井井有条。

让组件进行重构后的前后对比，图片来源vue3官网 composition-api-after.e3f2c350.png

2.让代码井井有条

以下代码使用了函数拆分，让功能代码分离，提供代码可读性。为了重用代码，我们还可以进行将代码封装到独立的文件中，使用引入代码。

<template>
  <div>
    <div>a: <span v-html="search.a.value"></span></div>
    <div>b: <span v-html="search.b.value"></span></div>
    <div>c: <span v-html="search.c.value"></span></div>
    <div>
      <button @click="changeSearch()">修改</button>
    </div>
  </div>
</template>
<script setup>
import {reactive, toRefs} from "vue";

//搜索内容
const search = getSearch();
function getSearch() {
  const query = reactive({
    a: 'a',
    b: 'b',
    c: 'c'
  })
  //todo code
  return toRefs(query)
}
function changeSearch() {
  search.a.value = '1'
  search.b.value = '2'
  search.c.value = '3'
}
//more 其他处理功能代码...
</script>

3.`setup()`中的`props`参数

在setup()中的第一个参数将接收到props值
在调用组件中进行传递参数，如<SetupDemo msg="Hello Vue3"/>，我们传递了一个名为msg的值，在调用的主键中，将可以通过props来获取这个值
所以可以通过props来传递静态值或者动态值，可以是字符、数字、布尔值、数组、对象等

<template>
  <div>
   <p v-html="props.msg"></p>
  </div>
</template>
<script setup>
const props = defineProps({
  msg: String //定义接收传递参数及类型
})
</script>

4. `setup()`中的上下文`context`

在setup()中的第二个参数就是上下文context，拥有三个实例属性
attrs组件的属性
solts组件插槽
emit触发事件

在steup函数中，我们可以通过以下方法来获得对应的上下文的属性值，并以使用

<script setup>
import {useSlots, useAttrs} from "vue";

const attrs = useAttrs()
const slots = useSlots()
const emit  = defineEmits('eventName')
console.log(attrs)
console.log(slots)
console.log(emit)
</script>

5.总结

这就是根据steup的定义参数及使用，可以设计出，让我们代码看起来整洁的格式。因为在实际的代码开发过程中，我们一开始代码个规划设计都是很好的，但是由于需求的不断变更，会导致单个组件出现非常多的属性定义，导致代码功能出现了杂乱的情况，所有vue3建议大家可以通过setup的层级处理，让相同功能的代码层级放在一起，让代码更有条例及简明，便于优雅开发。

vue3使用组合API技巧

1.介绍

2.让代码井井有条

3.setup()中的props参数

4. setup()中的上下文context

5.总结

3.`setup()`中的`props`参数

4. `setup()`中的上下文`context`