This is the 24th day of my participation in the August Text Challenge.More challenges in August

In this article we will look at the use of composite APIsetup, Provide/Inject, getCurrentInstance, and what we need to pay attention to.

How to use

setup

We’ve used Setup several times in previous articles, and all we know is that it’s the new syntax for Vue3, so what does it actually do?

Setup is a component option that is executed before the component is created. Once props is resolved and used as an entry point to the composite API, it takes two parameters: props and context.

Use as follows:

app.component('my-component', {
    props: ['name'].setup(props, context) {
        console.log(props)
        // Attribute (non-responsive object)
        console.log(context.attrs)

        // slot (non-responsive object)
        console.log(context.slots)

        // Trigger event (method)
        console.log(context.emit)
    },
    template:`<h1>hi,{{name}}</h1>`
})
Copy the code

Here are a few things to note:

  1. setupIn the functionpropsIs responsive and will be updated when a new prop is passed in. weCannot be deconstructed using ES6Because it eliminates the responsiveness of prop. If you need to deconstruct prop, you can do so atsetupFunction.toRefsFunction to do this, as follows:
const { name } = toRefs(props)
Copy the code
  1. contextIs a normal JavaScript object, which means that we can safely applycontextUsing ES6 deconstruction, that issetupThe second argument to the function can be used like this:
setup(props, { attrs, slots, emit }) {
    "dosomething"
  }
Copy the code
  1. performsetupThe component instance has not yet been created and can only be accessedprops, attrs, slots, emitFour properties, which means we can’t access themdata, computed, methodsThree component options.

Lifecycle hook

The setup internal call lifecycle hooks are:

  1. OnBeforeMount And onMounted are mounted

  2. OnBeforeUpdate with onUpdated

  3. OnBeforeUnmount and onUnmounted unmount

  4. OnErrorCaptured Errors

  5. OnRenderTracked tracks rendering

  6. OnRenderTriggered triggers rendering

  7. OnActivated activation

  8. OnDeactivated dissolution

It’s worth noting that because setup runs around beforeCreate and Created lifecycle hooks, they don’t need to be explicitly defined. In other words, any code written in these hooks should be written directly in the Setup function. Use as follows:

setup() {
    // mounted
    onMounted(() = > {
      console.log('Component is mounted! ')})}Copy the code

Provide / Inject

These two methods, we look back at Vue3 API chapter (4) in this article detailed introduction to the use of methods and precautions, need to know can be portal past.

getCurrentInstance

The method used to access an internal instance of a component, getCurrentInstance, is only exposed to high-level users, usually library authors, and is not normally used in projects. Use as follows:

const MyComponent = {
  setup() {
    const internalInstance = getCurrentInstance()

    internalInstance.appContext.config.globalProperties / / access globalProperties}}Copy the code

It’s worth noting that getCurrentInstance can only be called in a Setup or lifecycle hook.

conclusion

This article focuses on the use of Setup, which is the soul function of Vue3. So far, we have reviewed all the apis, hoping to help you.

For more articles, the portal has opened: Look back at the Vue3 catalogue!