百科狗组合式 API：setup()
组合式 API：setup()
基本使用
setup()钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：
- 需要在非单文件组件中使用组合式 API 时。
- 需要在基于选项式 API 的组件中集成基于组合式 API 的代码时。
注意
对于结合单文件组件使用的组合式 API，推荐通过以获得更加简洁及符合人体工程学的语法。
我们可以使用响应式 API 来声明响应式的状态，在setup()函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取setup()暴露的属性：
import { ref } from 'vue'
export default {
setup() {
const count = ref(0)
// 返回值会暴露给模板和其他的选项式 API 钩子
return {
count
}
},
mounted() {
console.log(this.count) // 0
}
}
{{ count }}
在模板中访问从setup返回的 ref 时，它会自动浅层解包，因此你无须再在模板中为它写.value。当通过this访问时也会同样如此解包。
setup()自身并不含对组件实例的访问权，即在setup()中访问this会是undefined。你可以在选项式 API 中访问组合式 API 暴露的值，但反过来则不行。
setup()应该同步地返回一个对象。唯一可以使用async setup()的情况是，该组件是 Suspense 组件的后裔。
访问 Props
setup函数的第一个参数是组件的props。和标准的组件一致，一个setup函数的props是响应式的，并且会在传入新的 props 时同步更新。
export default {
props: {
title: String
},
setup(props) {
console.log(props.title)
}
}请注意如果你解构了props对象，解构出的变量将会丢失响应性。因此我们推荐通过props.xxx的形式来使用其中的 props。
如果你确实需要解构props对象，或者需要将某个 prop 传到一个外部函数中并保持响应性，那么你可以使用 toRefs() 和 toRef() 这两个工具函数：
import { toRefs, toRef } from 'vue'
export default {
setup(props) {
// 将 `props` 转为一个其中全是 ref 的对象，然后解构
const { title } = toRefs(props)
// `title` 是一个追踪着 `props.title` 的 ref
console.log(title.value)
// 或者，将 `props` 的单个属性转为一个 ref
const title = toRef(props, 'title')
}
}Setup 上下文
传入setup函数的第二个参数是一个Setup 上下文对象。上下文对象暴露了其他一些在setup中可能会用到的值：
export default {
setup(props, context) {
// 透传 Attributes（非响应式的对象，等价于 $attrs）
console.log(context.attrs)
// 插槽（非响应式的对象，等价于 $slots）
console.log(context.slots)
// 触发事件（函数，等价于 $emit）
console.log(context.emit)
// 暴露公共属性（函数）
console.log(context.expose)
}
}该上下文对象是非响应式的，可以安全地解构：
export default {
setup(props, { attrs, slots, emit, expose }) {
...
}
}attrs和slots都是有状态的对象，它们总是会随着组件自身的更新而更新。这意味着你应当避免解构它们，并始终通过attrs.x或slots.x的形式使用其中的属性。此外还需注意，和props不同，attrs和slots的属性都不是响应式的。如果你想要基于attrs或slots的改变来执行副作用，那么你应该在onBeforeUpdate生命周期钩子中编写相关逻辑。
暴露公共属性
expose函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问expose函数暴露出的内容：
export default {
setup(props, { expose }) {
// 让组件实例处于 “关闭状态”
// 即不向父组件暴露任何东西
expose()
const publicCount = ref(0)
const privateCount = ref(0)
// 有选择地暴露局部状态
expose({ count: publicCount })
}
}与渲染函数一起使用
setup也可以返回一个渲染函数，此时在渲染函数中可以直接使用在同一作用域下声明的响应式状态：
import { h, ref } from 'vue'
export default {
setup() {
const count = ref(0)
return () => h('div', count.value)
}
}返回一个渲染函数将会阻止我们返回其他东西。对于组件内部来说，这样没有问题，但如果我们想通过模板引用将这个组件的方法暴露给父组件，那就有问题了。
我们可以通过调用expose()解决这个问题：
import { h, ref } from 'vue'
export default {
setup(props, { expose }) {
const count = ref(0)
const increment = () => ++count.value
expose({
increment
})
return () => h('div', count.value)
}
}此时父组件可以通过模板引用来访问这个increment方法。
