SetupĀ API Reference

A component option that is executed before the component is created, once the props are resolved, and serves as the entry point for composition API’s

As an entry function, once the component props is resolved, the configuration data in it is executed before the component instance is created.

So of the two arguments to setup(), the first argument is props.

// MyBook.vue export default { props: { title: String}, setup(props) {console.log(props. Title) const {title} = propsCopy the code

Similarly, the props and component properties of setup() are both responsive, and the documentation emphasizes that deconstructing the props directly would lose the responsiveness. You can use toRefs and toRef functions if you need to deconstruct.

// MyBook.vue
import { toRefs } from 'vue'

setup(props) {
  const { title } = toRefs(props)
  console.log(title.value)
}

import { toRef } from 'vue'

setup(props) {
  const title = toRef(props, 'title')
  console.log(title.value)
}
Copy the code

The second argument is the context object. Context exposes three attributes in setup(), attrs, slots, and emit

As mentioned above, Vue instances have not yet been created in the setup function, so vm.$attrs, vM. $slots, and vM. $emit are not available, so these three attributes serve this purpose and are used in the same way.

Note:

Attrs and vm.$attrts contain attributes (except class and style) that are not recognized by declarations in instances vm.props. So variables exposed in props in setup() are not exposed in context.attrs.

Context. Slots and vm.$slots can only access named slots. Unnamed slots or v-slot:default are not exposed.

Attrs and slots for context are stateful and update in real time when components are updated, so don’t deconstruct them either. Unlike props, however, they are not reactive, and their use in setup() should remain read-only, and if changed can be done in the periodic function onUpdated.

Context. emit and vm.$emit can trigger listening events on instances.

<! -- father. Vue --> <template> Child: MSG =" MSG "greeting="nihao" @say="print"> <template v-slot:content> </template> </Child> </template> <script> import Child from './child' export default { components: {Child}, data() {return {MSG: 'a MSG '}}, methods: {print(val) {console.log(val)}} </script> <! -- child.vue --> <template> <div> <span>{{ num }}, {{MSG}}</span> <slot name="content"></slot> </div> </template> <script> import {ref,  toRef } from 'vue' export default { props: { msg: String } setup(props, context) { const msg = toRef(props, 'msg') console.log(msg.value) // 'a msg' console.log(context.attrs) // {greeting: 'nihao', onSay: f()} console.log(context.slots) // {content: F ()} context.emit('say', 'good morning ') const num = ref(1) return {num, MSG}}} </script>Copy the code

If setup returns an object, the properties on the object can be accessed in the component’s template.

Setup () returns an object that goes into the template and can be accessed. You can also return the render function to load nodes dynamically.

The toRef function returns the wrapped object, where the value attribute is its value, called MSG. Value in setup(). Return is automatically detachable and can be called directly from template.

The above is their own reading of the document experience, if wrong hope to remind correction.