组合式 API：setup()

基本使用

setup() 钩子是在组件中使用组合式 API 的入口，通常只在以下情况下使用：

需要在非单文件组件中使用组合式 API 时。

注意

对于结合单文件组件使用的组合式 API，推荐通过 <script lang='py'> 以获得更加简洁及符合人体工程学的语法。

我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。其他的选项也可以通过组件实例来获取 setup() 暴露的属性：

from vuepy import ref

def setup(*args):
  count = ref(0)
  
  # 返回值会暴露给模板
  return {
    'count': count,
  }

访问 Props

setup 函数的第一个参数是组件的 props。和标准的组件一致，一个 setup 函数的 props 是响应式的，且需要在函数中使用 defineProps 进一步定义相应的字段，并且会相应字段的值会在传入新的 props 时同步更新。

def setup(props, ctx, vm):
  props = defineProps(['title'])
  print(props.title)

Setup 上下文

传入 setup 函数的第二个参数是一个 Setup 上下文对象。上下文对象暴露了其他一些在 setup 中可能会用到的值：

def setup(props, context, app):
    # 透传 Attributes（非响应式的对象）
    print(context['attrs'])

    # 插槽（非响应式的对象）
    print(context['slots'])

    # 触发事件（函数）
    print(context['emit'])

    # 暴露公共属性（函数）(暂不支持
    print(context['expose'])

和 props 不同，attrs 和 slots 的属性都不是响应式的。如果你想要基于 attrs 或 slots 的改变来执行副作用，那么你应该在 onBeforeUpdate 生命周期钩子中编写相关逻辑。

暴露公共属性

WARNING

请注意，这是一个预留的语法，当前版本未实现。

expose 函数用于显式地限制该组件暴露出的属性，当父组件通过模板引用访问该组件的实例时，将仅能访问 expose 函数暴露出的内容：

export default {
  setup(props, { expose }) {
    // 让组件实例处于 “关闭状态”
    // 即不向父组件暴露任何东西
    expose()

    const publicCount = ref(0)
    const privateCount = ref(0)
    // 有选择地暴露局部状态
    expose({ count: publicCount })
  }
}

与渲染函数一起使用

WARNING

请注意，这是一个预留的语法，当前版本未实现。

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 方法。

在 GitHub 上编辑此页

组合式 API：setup() ​

基本使用 ​

访问 Props ​

Setup 上下文 ​