setup()

访问 props

setup()函数中的第一个参数是props，它是响应式的，并且会在传入新的props时更新。

export default {
  props: {
    title: String
  }, setup(props) {
    console.log(props.title)
  }
}

注意：如果您对props对象进行解构，则被解构的变量将失去反应性。因此建议始终以props.xxx形式访问。

如果您确实需要解构props，或者需要将props传递给外部函数同时保持反应性，您可以使用toRefs()和toRef()实用程序 API 执行此操作：

import { toRefs } from 'vue'

export default {
  setup(props) {
    // turn `props` into an object of refs, then destructure
    const { title } = toRefs(props)
    // `title` is a ref that tracks `props.title`
    console.log(title.value)

    // OR, turn a single property on `props` into a ref
    const title = toRef(props, 'title')
  }
}

设置上下文 context

传递给setup()函数的第二个参数是一个设置上下文context对象。上下文对象暴露了其他可能在setup()内部有用的值：

export default {
  setup(props, context) {
    // Attributes (Non-reactive object, equivalent to $attrs)
    console.log(context.attrs)

    // Slots (Non-reactive object, equivalent to $slots)
    console.log(context.slots)

    // Emit events (Function, equivalent to $emit)
    console.log(context.emit)

    // Expose public properties (Function)
    console.log(context.expose)
  }
}

上下文对象不是响应式的，可以安全地解构：

export default {
  setup(props, { attrs, slots, emit, expose }) {
    ...
  }
}

attrs、slots是在组件本身更新时，始终更新的有状态对象。这意味着您应该避免对它们进行解构，并始终将属性引用为attrs.x或slots.x。

另请注意，与props不同，attrs、slots属性不是响应式的。如果您打算根据对其的更改应用副作用，则应在生命周期onBeforeUpdate挂钩中执行此操作。

暴露公共属性

默认状态下，本组件实例的属性方法，不能被父组件访问。expose()函数，可用于显式暴露：

export default {
  setup(props, { expose }) {
    // make the instance "closed"
    // i.e. do not expose anything to the parent expose() const publicCount = ref(0)
    const privateCount = ref(0)
    // selectively expose local state 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方法将通过模板引用在父组件中可用。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com