vue3基础知识》学习笔记Day28-（Period2）组合式API：setup()访问 Props和Setup 上下文

setup函数中可以自动解析浅层解包，此函数访问this是undefined

setup函数的第一个参数是组件的props,会随着传入的值实时更新

setup(props)

可以使用toRefs()和toRef()解构props对象

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中可能会用到的值

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 }) {
    ...
  }
}