我们使用vue自定义组件的时候，为了可以复用重复的功能代码时，提高代码的灵活性和可维护性，我们会把组件的逻辑抽离出来。虽然这样已经可以实现组件的复用，但是随着应用的复杂度组件增大，会对某一些方法进行功能迭代，这样对于那些新人，需要阅读旧的代码逻辑，对于开发不太友好。
本文首发于前端开发指南，更多高质量文章可以前往查看，值得收藏！
vue composition api解决了什么问题？
- 随着应用功能的持续迭代，复杂组件的代码变得越来越难以推理。这种情况通常发生在新来的开发人员阅读自己未编写的代码时。根本原因是Vue的现有API通过选项强制执行代码组织，但在某些情况下，通过逻辑考虑来组织代码更有意义。
- 提供组件之间逻辑提取和重用的新机制，提供了更好的灵活性和可维护性。
api设计
vue之前在组件编写的时候，使用的是选项式API，例如下面的代码
export default {
name: 'Button',
data() {
return {
count: 0
}
},
method: {
add() {
this.count++
}
}
}
使用组合式API重写后，代码编写的风格就会变成如下
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
const add = () => count.value++;
return {
count,
add
}
}
}
可以看出，使用composition api，状态和方法的声明都在setup函数实现。
setup函数是什么？
setup 函数是一个组件式API的入口，在组件创建之前执行，可以在 setup 函数中定义组件的状态和方法。
setup 函数接收两个参数，一个是 props，一个是 context， props 是响应式的，所以不能使用解构，可以用 toRefs 函数来完成此操作，context 则可以
setup 返回的对象会暴露给组件的（计算属性，方法，生命周期钩子等）以及组件的模板
setup 只能是同步的，不能是异步
例如
import { toRefs } from 'vue'
export default {
setup(props, context) {
// const { name } = props; // 错误的写法
const { name } = toRefs(props); // 正确的写法
const { attrs } = context; // 正确的写法
return {};
}
}
setup函数注册生命周期钩子
组合式 API 上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 看起来会像 onMounted
这些函数接受一个回调，当钩子被组件调用时，该回调将被执行
例如
import { ref, onMounted } from 'vue';
export default {
setup(props) {
const list = ref([]);
const getList = async () => {
list.value = await fetchList({ id: props.id });
}
onMounted(getList);
return {
list,
getList,
}
}
}
ref函数是什么？
通过 ref 可以使变量具备响应式特性，一个简单的例子
import { ref } from 'vue'
const counter = ref(0)
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
counter.value++
console.log(counter.value) // 1
watch函数
上面实现了通过props来获取调用 fetchList 列表获取数据，如果要监听 id ，当 id 变化时响应式获取数据，可以使用 watch 函数，我们为上面函数加入 watch 函数
import { ref, onMounted, watch，toRefs } from 'vue';
export default {
setup(props) {
// 使用 toRefs 解构
const { id } = toRefs(props);
const list = ref([]);
const getList = async () => {
list.value = await fetchList({ id });
}
onMounted(getList);
// 监听 id 变化，重新获取数据
watch(id, getList);
return {
list,
getList,
}
}
}
独立的computed属性
上面已经完成了组件的 data ，method， watch 功能，接下来实现 computed 功能
import { ref, onMounted, watch，toRefs, computed } from 'vue';
export default {
setup(props) {
// 使用 toRefs 解构
const { id } = toRefs(props);
const list = ref([]);
const getList = async () => {
list.value = await fetchList({ id });
}
onMounted(getList);
// 监听 id 变化，重新获取数据
watch(id, getList);
// 查询匹配的列表ist表
const matchList = computed(() => {
return list.value.filter(item => item.name.includes('interview.kelen.cc'))
})
return {
list,
getList,
}
}
}
其他问题
-
composition api统一路径src/composables, 文件名统一用 use 开头，例如src/composables/useUserSearch.js -
setup函数是处于生命周期函数beforeCreate和created两个钩子函数之前的函数，是最先执行的函数 -
setup函数不能使用this，在 setup 函数中使用this是undefined，因为此时组件还没实例化 - 从
setup中返回的对象上的属性返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加.value