Как мы видим, в случае с composition API, структурировать код по логическому назначению легче. Это позволяет сохранять читаемость и масштабируемость компонента.
Да как-то не видим. Навалено всего в кучу. Вот, смотрите как выглядит настоящая структурированность (я использовал $mol_wire, но на Vue3 не сложно сделать аналогичные декораторы):
import {
$mol_wire_solo as solo,
$mol_wire_plex as plex,
$mol_wire_method as task
} from 'mol_wire_lib'
class Posts {
@solo list(): Post[] {
return fetchJson( 'https://jsonplaceholder.typicode.com/posts' ).data
}
@solo dict() {
return new Map( this.list().map( post => [ post.id, post ] ) )
}
@plex listByAuthor( authorId: string ): Post[] {
return fetchJSON( `https://jsonplaceholder.typicode.com/posts?userId=${authorId}` ).data
}
}
class Favorite {
constructor(
readonly posts: ()=> typeof Posts
) {}
@solo postId( next = null | string ) {
return next
}
@solo post( next = null as null | Post ) {
return this.posts().dict().get( this.postId( next?.id ) ) ?? null
}
}
class Comments {
@plex listByPost( postId: string ): Comment[] {
return fetchJSON( `https://jsonplaceholder.typicode.com/posts/${postId}/comments` ).data
}
}
class Auth {
@solo profile(): Profile {
return fetchJSON( `https://jsonplaceholder.typicode.com/users/${postId}` ).data
}
}
class Domain {
@solo posts() {
return new Posts
}
@solo favorite() {
return new Favorite( ()=> this.posts() )
}
@solo comments() {
return new Comments
}
@solo auth() {
return new Auth
}
}
class App {
@solo domain() {
return new Domain
}
@task putMyFirstPostToFavorite() {
const profile = this.domain().auth().profile()
const firstPost = this.domain().posts().listByAuthor( profile.id )[0]
this.domain().favorite().post( firstPost )
}
}
для внедрения поддержки TypeScript необходимо было использовать классовые компоненты и декораторы. Это не всегда удобно и в целом усложняет процесс разработки.
Ну да, ну да, использование классов настолько сложно, что я даже уверен в корректности приведённого выше кода, хотя ни разу его и не запускал.
Да как-то не видим. Навалено всего в кучу. Вот, смотрите как выглядит настоящая структурированность (я использовал $mol_wire, но на Vue3 не сложно сделать аналогичные декораторы):
Ну да, ну да, использование классов настолько сложно, что я даже уверен в корректности приведённого выше кода, хотя ни разу его и не запускал.