Vue3 composition API - setup

组件内部使用组合式 API 的入口

调用时间

• 在创建组件实例时，初始 prop 解析之后立即调用 setup
• 在生命周期钩子 beforeCreate 之前调用，所以调用不到 this

模版使用

• 如果 setup 返回一个对象，则该对象的属性将合并到组件模版的渲染上下文中

export default {
setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })

    // 暴露到template中
    return {
        count,
        object
    }
}

• 从 setup 返回的 refs 在模版中访问时回自动解包，因此模版中不需要 .value 取值

渲染函数 jsx 的方法

• setup 还可以返回一个渲染函数，该函数可以直接使用在统一作用域中生命的响应式状态