$mol vence 4 de 6 categorias, Vue 2, none empatadasOs casos extremos entram na conta assim que você rodar os testes ao vivo abaixo. Eles são medidos no seu navegador, não ficam guardados aqui.
Casos extremos
Ainda não executadoQuatro situações do dia a dia rodando lado a lado no seu navegador. Aperte “Executar” em um caso e leia o que acontece; nada aqui está gravado de antemão.Resposta antiga sobrescreve a mais novaClique pela lista mais rápido do que o servidor responde.ExecutarEsperando os três frames terminarem de carregar.$mol○Ainda não executadoThe panel value is computed from the selected id, so a response for an earlier id is never assigned. Nothing is written by hand here.Vue○Ainda não executadoThe watcher assigns whatever the awaited request returns, with no cancellation. Ignoring a response that is no longer current takes a check after the await that the selected id has not changed.Mostrar o código10.000 linhas de altura irregularRole uma lista longa em que cada linha tem uma altura diferente.ExecutarEsperando os três frames terminarem de carregar.$mol○Ainda não executadoThe list keeps only the rows inside the viewport in the DOM and measures their heights as it scrolls. Nothing is written by hand here.Vue○Ainda não executadoEvery row is rendered by a plain v-for over the data. Rendering only the rows on screen takes a virtualization library and a way to measure each row, since the heights differ.Mostrar o códigoAssinaturas depois de 100 ciclos de montagemMonte e desmonte cem vezes um componente inscrito.ExecutarEsperando os três frames terminarem de carregar.$mol○Ainda não executadoThe subscription belongs to the component's own reactive cell and is released together with the component. Nothing is written by hand here.Vue○Ainda não executadoonMounted subscribes and there is no matching onUnmounted. Releasing the subscription takes a teardown hook in every component that subscribes.Mostrar o códigoUm item quebrado derruba a árvore inteiraColoque dados malformados em um cartão de vinte.ExecutarEsperando os três frames terminarem de carregar.$mol○Ainda não executadoA view that throws renders the error message in its own place and the rest of the tree keeps rendering. Nothing is written by hand here.Vue○Ainda não executadoThe production build drops the throwing component and leaves an empty comment node in its place, so the rest of the list stays and the page shows no sign that anything failed — the TypeError reaches the console only. Putting something visible where the card was takes an onErrorCaptured hook and markup to render in the failed slot.Mostrar o código
Código
$mol 4 de 5, Vue 1 de 5 · $mol à frenteQuanto há para ler, e quanto disso pertence a outra pessoa.$molVueLines of code (TodoMVC)194247$mol está 21% abaixo de VueFewer lines to read when someone else picks the project up. Counts the code you write and maintain yourself, not a stylesheet you installed from npm.Official TodoMVC implementation from github.com/tastejs/todomvc, plus the $mol one from the todomvc-compare repository. Every line of every source file under `src/`, tests, build config and the HTML shell excluded. Styles are excluded for every framework, because TodoMVC renders one fixed layout and its CSS is the same work regardless of framework: the tastejs examples install that stylesheet as the `todomvc-app-css` package and keep a small override sheet, while the $mol implementation writes its own. Counting styles would compare that packaging choice rather than the frameworks. The counting rule is the one published in todomvc-compare and reproduces its $mol figure to the line.$molgithub.com/…/mol2026-08-13Vuegithub.com/…/vue2026-08-13npm packages shipped04$mol não tem nenhum, Vue tem 4How many npm packages end up inside the bundle the browser downloads. This is code your users execute, not code your build machine reads.Distinct `node_modules/<package>` paths in the `sources` of the production build sourcemaps. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`. For $mol, the sourcemap of the deployed todomvc.hyoo.ru bundle.$moltodomvc.hyoo.ru/web.js.map2026-08-13Vuevuejs.org/guide/quick-start.html2026-08-13Dev dependencies declared310$mol está 70% abaixo de VuePackages the starter project names in its own package.json. Build-time tooling included: this is the list your development environment inherits, not what reaches the browser.Entries in `dependencies` plus `devDependencies` of a fresh starter project. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`.$molgithub.com/hyoo-ru/mam2026-08-13Vuevuejs.org/guide/quick-start.html2026-08-13Dev packages installed133125Vue está 6% abaixo de $molHow many separate packages npm resolves into node_modules on a clean checkout. Each one is an author your build trusts, and every CI run downloads all of them.Distinct name+version pairs in `npm ls --all` after scaffolding and installing the starter project. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`.$molgithub.com/hyoo-ru/mam2026-08-13Vuevuejs.org/guide/quick-start.html2026-08-13node_modules size62 MB98.3 MB$mol está 37% abaixo de VueDisk footprint of a fresh checkout. None of it ships to the browser, but all of it is downloaded by every CI run and every new machine on the team.`du -sk node_modules` after scaffolding and installing the starter project. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`.$molgithub.com/hyoo-ru/mam2026-08-13Vuevuejs.org/guide/quick-start.html2026-08-13
Peso e carregamento
$mol 2 de 2, Vue 0 de 2 · $mol à frenteO que o navegador baixa, e quanto tempo ele espera até a página reagir.$molVueTodoMVC bundle, gzip36 KB36.6 KB$mol está 1.6% abaixo de VueWhat the browser actually downloads for a small but complete application, compressed the way a server would send it.Every JavaScript and CSS asset referenced by the production `index.html`, gzipped at level 9 and summed. Unlike the line count, styling is included everywhere and is comparable: the shared `todomvc-app-css` is compiled into each tastejs example’s shipped CSS, and $mol compiles its styles into the JavaScript bundle, leaving its `web.css` a 38-byte comment. The `base.js` page furniture from `todomvc-common` is excluded everywhere, including its Angular equivalent. Built artifacts come from the tastejs repository; the $mol bundle from the deployed todomvc.hyoo.ru.$moltodomvc.hyoo.ru2026-08-13Vuegithub.com/…/vue2026-08-13Startup transfer128 KB195 KB$mol está 35% abaixo de VueBytes pulled over the network before the benchmark application is usable. Same application in every column, so the difference is the framework.Lighthouse total byte weight for the js-framework-benchmark application, reported as benchmark 34_startup-totalbytes. Transfer size, not gzip specifically.$molnin-jin.github.io/…/table.html2022-02-05Vuenin-jin.github.io/…/table.html2022-02-05
Velocidade
$mol 5 de 7, Vue 2 de 7 · $mol à frenteQuanto tempo as mudanças levam para chegar à tela, e quanta memória fica retida enquanto isso.$molVueCreate 1,000 rows55.1 ms201 ms$mol está 73% abaixo de VueTime to put a thousand fresh rows on the screen. This is the wait after hitting a filter or opening a list.js-framework-benchmark 01_run1k, arithmetic mean of 10 runs.$molnin-jin.github.io/…/table.html2022-02-05Vuenin-jin.github.io/…/table.html2022-02-05Partial update316 ms1,146 ms$mol está 72% abaixo de VueTouching every tenth row of a thousand, sixteen times. This is where a framework either finds the changed rows or re-checks everything.js-framework-benchmark 03_update10th1k_x16, arithmetic mean of 10 runs.$molnin-jin.github.io/…/table.html2022-02-05Vuenin-jin.github.io/…/table.html2022-02-05Swap two rows46.3 ms178 ms$mol está 74% abaixo de VueTwo rows trade places out of a thousand. The ideal answer is two DOM moves, and the gap here shows who gets close to it.js-framework-benchmark 05_swap1k, arithmetic mean of 10 runs.$molnin-jin.github.io/…/table.html2022-02-05Vuenin-jin.github.io/…/table.html2022-02-05Remove one row26.9 ms37.9 ms$mol está 29% abaixo de VueDeleting a single row out of a thousand. The smallest possible change, so it measures the fixed cost of reacting at all.js-framework-benchmark 06_remove-one-1k, arithmetic mean of 10 runs.$molnin-jin.github.io/…/table.html2022-02-05Vuenin-jin.github.io/…/table.html2022-02-05Memory after load1.54 MB1.37 MBVue está 11% abaixo de $molHeap the framework occupies with nothing on the page yet.js-framework-benchmark 21_ready-memory, single run.$molnin-jin.github.io/…/table.html2022-02-05Vuenin-jin.github.io/…/table.html2022-02-05Memory with 1,000 rows1.94 MB3.47 MB$mol está 44% abaixo de VueHeap once a thousand rows are on screen. On a phone this is the difference between staying alive in the background and being killed.js-framework-benchmark 22_run-memory, single run.$molnin-jin.github.io/…/table.html2022-02-05Vuenin-jin.github.io/…/table.html2022-02-05Startup blocking time244 ms16.5 msVue está 93% abaixo de $molHow long the main thread is busy during startup, so taps and scrolls do nothing.js-framework-benchmark 32_startup-bt (Lighthouse total blocking time), arithmetic mean of 4 runs.$molnin-jin.github.io/…/table.html2022-02-05Vuenin-jin.github.io/…/table.html2022-02-05
Incluído
$mol 6 de 10, Vue 1 de 10 · $mol à frenteSe o framework já traz isso, ou se você recorre a uma biblioteca.$molVueRouterSimSimos dois têmWhether URLs and navigation come from the framework project itself, or you go pick a library and own that choice forever.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents a routing solution of its own. No when its own docs send you to a third-party project instead.$molgithub.com/…/arg2026-08-13Vuerouter.vuejs.org2026-08-13LocalizationSimNão$mol sim, Vue nãoTranslating an application is rarely planned at the start and always arrives later.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents localization of its own. An official CLI add-on that wires up somebody else’s i18n library is a no, because the library is still somebody else’s.$molgithub.com/…/locale2026-08-13Vuevuejs.org/api2026-08-14ThemingSimNão$mol sim, Vue nãoDark mode and brand colours without inventing your own CSS variable convention.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents a theming mechanism of its own. No when the word does not appear in its official API reference, which is the page linked, so the absence can be checked directly.$molgithub.com/…/lights2026-08-14Vuevuejs.org/api2026-08-13List virtualizationSimNão$mol sim, Vue nãoLong lists stay smooth because off-screen rows are never rendered. Without it, someone eventually bolts a library onto a list that already shipped.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents lazy or virtual rendering of long lists. No when no such component appears in its API reference.$molgithub.com/…/list2026-08-13Vuevuejs.org/api2026-08-14Offline supportSimNão$mol sim, Vue nãoA service worker set up by the framework rather than copied from a blog post.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project ships the service worker integration: a module it builds and registers for you. No when the docs only show where to drop your own sw.js and how to register it with the browser API, because that is the browser’s feature rather than the framework’s.$molgithub.com/…/offline2026-08-13Vuevuejs.org/…/tooling.html2026-08-14Server renderingNãoSimVue sim, $mol nãoRendering to HTML on the server, for search engines and for the first paint.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project publishes and documents a server rendering API of its own. No when its published module list contains no such module.$molgithub.com/hyoo-ru/mam_mol2026-08-14Vuevuejs.org/…/ssr.html2026-08-13Tests without a DOMSimNão$mol sim, Vue nãoComponents testable as plain objects, with no browser and no jsdom to boot up first.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when a component can be instantiated and asserted on with no document in play — the test never reaches for one. No when a DOM has to exist before a component can render at all, which is what every official testing guide here prescribes when it tells you to install jsdom, happy-dom or a browser. The question is whether a DOM is required, not whether the runtime happens to have one available: a runtime that provides a document nobody asks for does not make the test a DOM test.$molgithub.com/…/pair.test.ts2026-08-14Vuevuejs.org/…/testing.html2026-08-13Dependency injectionSimSimos dois têmSwapping a real service for a fake one in a test without touching the component that uses it.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project documents a way to hand a component a value from outside it and replace that value later, in a test or in another host. Context APIs count: the bar is a documented mechanism, not a particular shape of container.$molgithub.com/…/ambient2026-08-13Vuevuejs.org/…/provide-inject.html2026-08-14FormsSimNão$mol sim, Vue nãoValidation, dirty state and submission handled by the framework instead of a fourth form library per team.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when that project documents a form API that goes past binding one input to one variable, covering at least submission handling or validation state. Two-way binding on its own is a no.$molgithub.com/…/form2026-08-14Vuevuejs.org/…/forms.html2026-08-14Typed templatesSimSimos dois têmA typo in a template is caught by the compiler, not by a user.Built in means the framework project ships it itself: its own package, or one the same team maintains and publishes as official. A library from anyone else counts as no, however popular or de-facto standard it has become, which is why routing is a yes for Angular and a no for React. The same cut is applied to all six frameworks, and every value links to the official page it was read from. Yes when the framework’s official TypeScript documentation covers type checking of its template or view layer.$molgithub.com/…/view2026-08-14Vuevuejs.org/…/overview.html2026-08-13
Ecossistema e mercado
$mol 0 de 4, Vue 4 de 4 · Vue à frenteQuão fácil é contratar para isso, pesquisar sobre isso e achar uma peça pronta.$molVueGitHub stars74354,230Vue é 73× $molA popularity signal, and nothing more. It says how many people bookmarked the repository, not how many shipped with it.`stargazers_count` from the GitHub API for the repository that holds the framework's current source.$molgithub.com/hyoo-ru/mam_mol2026-08-13Vuegithub.com/vuejs/core2026-08-13npm downloads3,327 per week14,550,122 per weekVue é 4373.3× $molThe closest thing to a usage count. Inflated by CI runs, but inflated the same way for everyone.npm registry downloads for the last full week, for the package you install to use the framework.$molapi.npmjs.org/…/mam2026-08-13Vueapi.npmjs.org/…/vue2026-08-13Stack Overflow questions0107,927$mol não tem nenhum, Vue tem 107,927How likely it is that your problem was already asked and answered by someone else.Question count of the framework's Stack Overflow tag, via the Stack Exchange API.$molapi.stackexchange.com/2.3/tags2026-08-13Vuestackoverflow.com/…/vue.js2026-08-13npm maintainers12Vue é 2× $molHow many people can publish a release. A low number is a bus factor.Length of the `maintainers` array in the npm registry metadata of the framework's primary package.$molregistry.npmjs.org/mam2026-08-13Vueregistry.npmjs.org/vue2026-08-13
Custo de propriedade
$mol 0 de 2, Vue 1 de 2 · Vue à frenteO que a árvore de dependências e o histórico de versões cobram ao longo dos anos.$molVueAdvisories in shipped packages00os dois relatam o mesmo valorKnown vulnerabilities in the packages that reach the browser. These execute on your users’ machines, which makes them a different class of risk from anything in the build toolchain.Each shipped package, at its installed version, queried against the OSV database. Counts packages carrying at least one advisory.$moltodomvc.hyoo.ru/web.js.map2026-08-13Vuevuejs.org/guide/quick-start.html2026-08-13Advisories in the dev tree30Vue não tem nenhum, $mol tem 3Known vulnerabilities in the packages a fresh checkout installs. These run on developer and CI machines rather than in the browser, but somebody still has to triage every one.Total reported by `npm audit` on the starter project, straight after scaffolding it. Scaffolded on 2026-08-13 with each framework's own getting-started command: react `npm create vite@latest app -- --template react-ts`; vue `npm create vue@latest app -- --default`; svelte `npx sv create app --template minimal --types ts --no-add-ons --install npm`; solid `npm create solid@latest app -- --vanilla --ts --template basic`; angular `npx @angular/cli@21 new app --defaults --skip-git --package-manager=npm`; $mol `git clone --depth 1 https://github.com/hyoo-ru/mam.git app && npm install`.$molgithub.com/hyoo-ru/mam2026-08-13Vuevuejs.org/guide/quick-start.html2026-08-13Breaking releases in 3 years——Não contabilizado: sem dados de $molMajor versions shipped since 2023. Every one of them is a migration someone on the team pays for.
Como isto é medido
Cada valor aqui vem de uma medição ou de uma fonte externa, e carrega consigo o link e a data em que foi tirado. Uma métrica conta para uma categoria só quando os dois frameworks a publicam: caso contrário, aquele com a tabela mais completa venceria pelo tamanho dos seus dados e não pelo que os números dizem. Onde ninguém mediu ainda, a linha diz isso em vez de chutar.Metodologia e fontes no GitHub
Sugerir um framework
Falta algum? Dê o nome dele e abra uma issue. Adicionar um framework significa um arquivo de dados com as medições e, para os testes ao vivo, uma página runner: os dois ficam no repositório, ao lado dos que já estão aqui.Abrir uma issueType to search the documentation.
