Composition Api Setup
本章节使用单文件组件语法作为代码示例
本篇指南假定你已经阅读了Composition Api介绍和响应性基本原理,首次接触Composition Api之前应阅读它们。
参数
setup方法接受2个参数:
- props
- context
接下来将深入了解每个参数各自的用法。
Props
props是setup方法的第一个参数。就像你在标准的组件中所期待的那样,setup方法中的props是响应式的,并且在新的props被传递进来时将被更新。
// MyBook.vue
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}
Warning
由于props是响应式的,你不能对它进行解构,否则它将失去响应性。
你可以在setup里面利用toRefs安全地解构你的props。
// MyBook.vue
import { toRefs } from 'vue'
setup(props) {
const { title } = toRefs(props)
console.log(title.value)
}
Context
context是被传递进setup方法的第二个参数。context是一个普通的JavaScript对象,它暴露了3个组件property:
// MyBook.vue
export default {
setup(props, context) {
// Attributes (Non-reactive object)
console.log(context.attrs)
// Slots (Non-reactive object)
console.log(context.slots)
// Emit Events (Method)
console.log(context.emit)
}
}
context是一个普通的JavaScript对象,也就是说,它不是响应式的,这意味着你可以安全地解构context。
// MyBook.vue
export default {
setup(props, { attrs, slots, emit }) {
...
}
}
attrs和slots都是有状态的对象,当组件自身更新时,它们也会更新。这意味着,你应该要避免解构它们,并且应当通过attrs.x或slots.x的方式引用property。并且要记住,与props不同,attrs与slots不是响应式的,如果你打算运用基于attrs或slots改变而产生的副作用,你应该在onUpdated的生命周期钩子中运用。
访问组件Property
当setup被执行时,组件实例还没被创建,此时你将只能访问到以下property:
- props
- attrs
- slots
- emit
也就是说,此时你无法访问到以下组件option:
- data
- computed
- methods
与模板搭配的用法
若setup返回一个对象,那么在组件的模板中可以访问该对象的属性,同时也能够访问被传递进setup方法的props:
<!-- MyBook.vue -->
<template>
<div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
</template>
<script>
import { ref, reactive } from 'vue'
export default {
props: {
collectionName: String
},
setup(props) {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// expose to template
return {
readersNumber,
book
}
}
}
</script>
需要记住的是,被setup返回的refs在模板中会被自动展开,因此在模板中你无需使用.value。
与渲染函数搭配的用法
setup方法也可以返回一个渲染函数,这可以直接利用在相同作用域内声明的响应式状态:
// MyBook.vue
import { h, ref, reactive } from 'vue'
export default {
setup() {
const readersNumber = ref(0)
const book = reactive({ title: 'Vue 3 Guide' })
// Please note that we need to explicitly expose ref value here
return () => h('div', [readersNumber.value, book.title])
}
}
this的用法
在setup()里面,this并非当前活动实例的映射,因为setup()是在其他组件选项被解析之前调用的。this在setup()里面的行为与其他组件选项里面的相比,行为表现将大不相同。与其他选项api一起使用setup()时,这可能会引起混淆。