vue3 中文档 Composition API Setup

Setup

参数 Arguments

1.props 组件props
2.context 执行上下问

Props

setup函数的第一个参数就是props。没错，和你想的一样，他就是标准组件中的props，在setup函数中的props是响应式的，当有新的函数传入的时候会自动更新。

exprot default {
    props: {
        title: String
    },
    setup(props) {
        console.log(props.title) // 响应式
    }
}

注意:
setup中的props不能使用ES6 解构语法，这将会导致自动更新失效

如果一定要解构props，那么需要在setup函数中使用toRefs

import { toRefs } from 'vue'

setup(props) {
	const { title } = toRefs(props)

	console.log(title.value)
}

如果title是个可选属性，有时候可能不存在props中，为防止出现这种情况，需要使用toRef替代toRefs

import { toRef } from 'vue'

setup(props) {
	const { title } = toRef(props)

	console.log(title.value)
}

Context

setup函数传入的第二个参数是 context。context是一个普通的JavaScript的object对象，暴露组件的三个属性：

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

    // Slots (Non-reactive object)
    console.log(context.slots)

    // Emit Events (Method)
    console.log(context.emit)
  }
}

context对象就是普通的JavaScript对象，它不是响应式的，所以可以使用ES6解构语法

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

attrs和slots是有状态的对象，当组件本身更新的时候会随同组件更新。这意味着避免使用解构语法，而应该使用引用方法获取参数值，例如：attrs.x 和 
slots.x
    Also note that unlike props, attrs and slots are not reactive. If you intend to apply side effects based on attrs 
or slots changes, you should do so inside an onUpdated lifecycle hook.

Accessing Component Properties

当setup执行的时候，组件还没有被创建，所以只允许使用以下属性：
- props
- attrs
- slots
- emit

换句话说，你不能在setup中使用组件中属性：
- data
- computed
- methods

Usage with Templates

如果setup返回一个对象，那么在template中可以使用对象中的属性，和传入的props属性一样可以直接在模板中使用

<!-- MyBook.vue -->
<template>
  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    props: {
      collectionName: String
    },
    setup(props) {
      const readersNumber = ref(0)
      const book = reactive({ title: 'Vue 3 Guide' })

      // expose to template
      return {
        readersNumber,
        book
      }
    }
  }
</script>

提示：在模板中使用从setup返回refs处理的值会被自动去除包裹层value，所以不要在模板中使用.value获取值。

Usage with Render Functions

setup也可以在同一范围内直接使用响应状态声明返回一个渲染函数（render）

Usage of this

在setup()中，this 不会指向当前实例，由于setup()函数执行在组件创建之前，在setup()中的this指向不同于在其他的钩子函数，使用setup()时避免
与OptionAPI中的this混淆。

结束语

能力有限，翻译的不够准确的地方请见谅。