![]() ![]() We felt it was too risky to base an official API on an unstable proposal. However, a class-based API heavily relies on ES decorators, a language feature that was only a stage 2 proposal when Vue 3 was being developed in 2019. This had led many developers who wanted to use Vue with TS to lean towards Class API powered by vue-class-component. Even with all this effort, type inference for Options API can still break down for mixins and dependency injection. We had to implement some absurdly complex type gymnastics to make type inference work with the Options API. However, the Options API, originally conceived in 2013, was designed without type inference in mind. In recent years, more and more frontend developers are adopting TypeScript as it helps us write more robust code, make changes with more confidence, and provides a great development experience with IDE support. This reduced friction for refactoring is key to the long-term maintainability in large codebases. ![]() Moreover, we can now move a group of code into an external file with minimal effort, since we no longer need to shuffle the code around in order to extract them. Notice how the code related to the same logical concern can now be grouped together: we no longer need to jump between different options blocks while working on a specific logical concern. Here's the same component, before and after the refactor into Composition API: In addition, if we ever intend to extract a logical concern into a reusable utility, it takes quite a bit of work to find and extract the right pieces of code from different parts of the file. In a component that is several hundred lines long, understanding and navigating a single logical concern requires constantly scrolling up and down the file, making it much more difficult than it should be. Notice how code dealing with the same logical concern is forced to be split under different options, located in different parts of the file. If we give each line of code a color based on the logical concern it is dealing with, this is how it looks: The original version of the component was written in Options API. Handling current working directory changes.Handling folder navigation (opening, closing, refreshing.).Tracking current folder state and displaying its content.Take the folder explorer component from Vue CLI's GUI as an example: this component is responsible for the following logical concerns: ![]() This limitation is particularly prominent in components that need to deal with multiple logical concerns, which we have witnessed first hand in many production Vue 2 apps. However, Options API poses serious limitations when a single component's logic grows beyond a certain complexity threshold. Many users love that we write organized code by default with Options API: everything has its place based on the option it falls under. It also serves as a clean mechanism for easily integrating stateful third-party services or libraries into Vue's reactivity system, for example immutable data, state machines, and RxJS. It solves all the drawbacks of mixins, the primary logic reuse mechanism for Options API.Ĭomposition API's logic reuse capability has given rise to impressive community projects such as VueUse, an ever-growing collection of composable utilities. The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of Composable functions. Why Composition API? Better Logic Reuse ![]() If you are interested in learning how to use Vue with Composition API, you can set the site-wide API preference to Composition API using the toggle at the top of the left sidebar, and then go through the guide from the beginning. Composition API is based on Vue's mutable, fine-grained reactivity paradigm, whereas functional programming emphasizes immutability. Vue import ĭespite an API style based on function composition, Composition API is NOT functional programming. ![]()
0 Comments
Leave a Reply. |