📚

Vue3 タグの順番

に公開
Vue.js
Vue 3
tech

推奨されがちな順番

<template></template>
<script></script>
<style></style>
  1. templateがUI中心だから一番上にあると直感的に把握しやすい
  2. scriptはロジックなので次に読むのが自然
  3. デザインはUIやロジックを理解したあとに確認することが多い
<script></script>
<template></template>
<style></style>
  1. ロジック中心で設計したい場合、特にTypeScriptを使っていると、型やprops、emitの設計が先にくるケースもある
  2. ツールによってはscriptがデフォルトで上に来る
  3. Reactのようなロジックファーストに慣れている開発者ならscriptを上に置くほうがスムーズになる

Vueに慣れている人が読みやすいのは前者だけど、Reactで慣れてしまったので、後者のほうが開発しやすい

いずれにしろ、チームの方針による

Discussion