This is the 8th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

One, foreword

It will be 2202 years soon, and it has been more than a year since the official release of VUe3.0. In the first half of this year, I did not pay much attention to VUe3, but in the second half of this year, I began to formally learn about VUe3, and tried to write several VUe3 projects. My own VUe3 background template is also under construction. While actually writing the project, I also stepped in many pits. Step on the pit when thinking of solving this problem must send an article summary, solved and lazy forget clean. So I made up my mind to start vuE3 series of articles for my own summary and learning.

Here I explain in advance I based on their own understanding as far as possible will say things to everyone to understand, if there is any mistake also hope that you understand and give correction, thank you very much master!!

What is a composite API

Let’s think about what we would do if we wrote the Options Api component in vue2. First we would create a.vue component

<template>

</template>

<script>
export default {
  name: "test".components:{ },
  data(){
    return{}},created(){},mounted(){},methods:{
  
  },
  computed:{

  },
  watch: {}}</script>

<style scoped>

</style>
Copy the code

Then, we write our business logic through data Created Mounted methods computed life cycle and component options. If our business logic is relatively simple and the number of code lines in a page is less than 200, this method is more suitable and easy to read and understand.

But! But! But! If a single component involves too many functions and thousands of lines of code, the mode of Options Api is a nightmare, which I really have experienced. In September this year, my colleague resigned and handed over his project to me. There are 6343 lines of code in the JS part of a single. Find a method to find variables to turn back and forth, a page at the same time open three Windows to find a method to find variables, which the pain… Alas almost ran away with the bucket, but for the money dream Hum

Here I’m texturing to prove it, plus HTML CSS over 10,000 lines of code…

Here we use a sample image from vUE, where the different logical concerns are color-coded

At this point, we can start to wonder if it would be better if we could centralize all of the code logic that’s involved, and that’s what we’ve been thinking about, and we’ve got the combinatorial API that you see now, the setup or composition API, Here I quote an animation demo made by The Nuggets’ Master Ape, # made a night of animation, just to give you a better understanding of Vue3’s Composition Api, isn’t it intuitive

Now that we know why, we need to know how to use it, and here we are in the next section, can vue3 setup be used in this way?

Did you think it was over? No, no, no, let me add two more sentences, the last two.

The following are only my personal views. If you have different views, please point out in the comments section

Note that vue3 is compatible with VUe2, which means that vue3 is compatible with Composition Api and Options Api, which means that vue3 is compatible with Composition Api and Options Api.

In other words, I could write it this way, but it’s not recommended at all, and the advice should be pure

<script>
import {defineComponent} from "vue";
export default defineComponent({
  name: "test".components:{ },
  data(){
    return{}},setup(){},created(){},mounted(){},methods:{ },
  computed:{},
})
</script>
Copy the code

The Options Api is not without its advantages. It is very easy to read and understand with a small amount of logical code. Therefore, I personally think that in the process of writing projects, we should not compose Api just for the sake of Composition Api, but choose the appropriate technology according to the actual business requirements

Write in the last

Thank you for reading ~~~ your likes and reading is the biggest encouragement to me ~~~