如何使用

setup

在之前的文章中，我们已经多次使用了setup，我们只知道它是Vue3的新语法，那么它到底可以做些什么呢？

setup是一个组件选项，在创建组件之前执行，一旦 props 被解析，并作为组合式 API 的入口点，它有两个参数：props和context。

使用如下：

app.component('my-component', {
    props:['name'],
    setup(props, context) {
        console.log(props)
        // Attribute (非响应式对象)
        console.log(context.attrs)

        // 插槽 (非响应式对象)
        console.log(context.slots)

        // 触发事件 (方法)
        console.log(context.emit)
    },
    template:`<h1>hi,{{name}}</h1>`
})

这里有几点是需要我们注意的：

setup 函数中的 props 是响应式的，当传入新的 prop 时，它将被更新。我们不能使用 ES6 解构，因为它会消除 prop 的响应性。如果需要解构 prop，可以在 setup 函数中使用 toRefs 函数来完成此操作，如下：

const { name } = toRefs(props)

context 是一个普通的 JavaScript 对象，这意味着我们可以安全地对 context 使用 ES6 解构，也就是setup 函数的第二个参数我们可以这样使用：

setup(props, { attrs, slots, emit }) {
    "dosomething"
  }

执行 setup 时，组件实例尚未被创建，我们只能访问props, attrs, slots, emit四个property，也就是说我们不能访问data, computed, methods三个组件选项。

生命周期钩子

setup内部调用生命周期钩子有：

onBeforeMount与onMounted 挂载
onBeforeUpdate与onUpdated 更新
onBeforeUnmount与onUnmounted 卸载
onErrorCaptured 错误捕获
onRenderTracked 追踪渲染
onRenderTriggered 触发渲染
onActivated 激活
onDeactivated 解散

值得我们注意的是：因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。使用如下：

setup() {
    // mounted
    onMounted(() => {
      console.log('Component is mounted!')
    })
}

Provide / Inject

这两个方法，我们在回首Vue3之API篇（四）这篇文章中详细的介绍了使用方法和注意事项，需要了解的可以传送门过去。

getCurrentInstance

用来访问组件内部实例的方法，getCurrentInstance 只会暴露给高阶用户，通常是库作者，一般在项目中我们是用不到的。使用如下：

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance()

    internalInstance.appContext.config.globalProperties // 访问 globalProperties
  }
}

值得我们注意的是：getCurrentInstance 只能在 setup 或 生命周期钩子 中调用。

总结

这篇文章我们主要了解setup的用法，可以说是Vue3的灵魂函数了，至此，我们已经把所有的API都回顾了一遍，希望对你有所帮助。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之API篇（十一）

如何使用

setup

生命周期钩子

Provide / Inject

getCurrentInstance

总结