我们使用vue自定义组件的时候,为了可以复用重复的功能代码时,提高代码的灵活性和可维护性,我们会把组件的逻辑抽离出来。虽然这样已经可以实现组件的复用,但是随着应用的复杂度组件增大,会对某一些方法进行功能迭代,这样对于那些新人,需要阅读旧的代码逻辑,对于开发不太友好。
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
函数是一个组件式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 {}; } }
组合式 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
可以使变量具备响应式特性,一个简单的例子
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
上面实现了通过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, } } }
上面已经完成了组件的 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