![]() ![]() 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.). ![]()
0 Comments
Leave a Reply. |