The last article talked about Vue3Composition APIHas been widely recognized by our partners. The link is as follows:

Another night, this comic-API still short

As a fighter with pursuit, I still want to play a bullet to everyone from the principle of why there are these restrictions and constraints, is the so-called know what you know why.

The contents of this paper include:

  • How can Composition and Options coexist?
  • Where does this in setup point to?
  • What are the parameters to setup?
  • The execution time of setup
  • How are lifecycle hooks implemented in Setup?

Next, the official performance of the lightning five whip, we point to stop

First whip: How to achieve harmony between Composition and Options?

Xiao Right introduced composition API in VUE3. At first, many people were afraid that it would affect the writing method of options that we are always familiar with. In fact, the two can coexist and be very harmonious. Small right this punch is clearly the point ~

Here’s how the two can coexist in vuE3:

Conclusion: Here we know vue3’s logic for setup and other options: If setup is set, it is called first, and the other options are processed later.

But today’s young people do not speak martial arts, they may not according to the routine boxing, such as:

// Foo is defined in both data and setup.
createApp({
  data() {
    return {
      foo: 'foo'}},setup(props, ctx) {
    const foo = ref('foo in setup')      
    return { foo }
  }
}).mount('#app')
Copy the code

Righty is not a fake master. He will flash

Second whip: What does this in setup point to?

Let’s see what happens when setup is called:

Conclusion: So in setupthisIs the context in which it is executed, if it isesmWay to pack, it’s going to beundefined; If running in single-file mode, yeswindow; But it doesn’t mean anything anyway, so just forget it, okaythisOh, don’t worry about it anymore.

Third whip: What are the arguments to setup?

Let’s look at what is passed when setup executes:

Parameter 4 starts with instance.props and setupContext

Look again at setupContext

Conclusion: Parameter 1 is the component property object, which isProxyObject, so we can’t deconstruct it otherwise it will be unresponsive; Parameter 2 is an object,attrsAccess to all features of the component,slotsYou can access slot content, including normal and scoped slots, which are functions that can only be retrieved after executionvnodeThe array.emitUsed to send custom events.

// Can't deconstruct props, can deconstruct setupContext
setup({ foo, bar }, { attrs, slots, emit }) {
	watchEffect(() = > {
    console.log(foo, bar) // Foo, bar changes, no output})}Copy the code

Fourth whip: The execution time of setup

Setup is executed very early, even before beforeCreated:

Conclusion:setupThere is nobeforeCreateandcreated, relevant code is writtensetupInside will do; The component instance is passed in when setup is executed, so it can be passed ingetCurrentInstance()Access it.

Fifth Whip: How are lifecycle hooks implemented in SETUP?

Setup has the flexibility to use lifecycle hooks, which can be written multiple times and executed in the order of registration:

setup() {
  onMounted(() = > {})
  onMounted(() = >{})}Copy the code

How does this work? Let’s look at the implementation of a function like onMounted:

Take a look at the aliases for these hooks

Finally, of course, are the hook calls

Iterate over them to execute them

So let’s stop here with the five lightning bolts of composition, what else are we going to do? Let me know in the comments section.

If you like to watch video learning, welcome to Yangcun, this article will also have a video explanation.

Young people should speak martial virtue!! “Like”, “follow” and “collect” should be arranged!!

  • This is element3, the open source project of our Flower Mountain front end team

  • A front-end component library that supports VUE3