As you know, Vue3.0 introduces a new feature called Composition API. Literally “composite API,” it was created to enable function-based logical reuse mechanisms.

Review the Option Api

Before looking at the Composition Api, let’s review some of the problems we encountered using the Option Api. In Vue2, we often need to work in specific areas (data, Methods, Watch, computed…). Write code that is responsible for the same functionality.

Disadvantages of the Option Api

As business complexity increases, the amount of code will increase. Because the code of related business needs to be written to a specific area according to the configuration of option, the subsequent maintenance is very complicated and the code reusability is not high.

Composition Api

Obviously we can organize our code, our functions more elegantly. Make the code for related functions more organized


The idea for animation came from the Internet, but if I just took someone’s video and turned it into a Gif, it would be too disingenuating. So, I used keynote to copy the production of the presentation, you need to demo text source file please go to wechat search: EZfullstack

Reply: compositionapiCopy the code

Can obtain

Focus on the full stack

Thank you for sharing. Learn full stack technology with me


  • This is our team’s open source project, Element3
  • A front end component library that supports VUE3