[
{
"No": "1",
"Category": "Composition",
"Guideline": "Use Composition API for new projects",
"Description": "Composition API offers better TypeScript support and logic reuse",
"Do": "<script setup> for components",
"Don't": "Options API for new projects",
"Code Good": "<script setup>",
"Code Bad": "export default { data() }",
"Severity": "Medium",
"Docs URL": "https://vuejs.org/guide/extras/composition-api-faq.html"
},
{
"No": "2",
"Category": "Composition",
"Guideline": "Use script setup syntax",
"Description": "Cleaner syntax with automatic exports",
"Do": "<script setup> with defineProps",
"Don't": "setup() function manually",
"Code Good": "<script setup>",
"Code Bad": "<script> setup() { return {} }",
"Severity": "Low",
"Docs URL": "https://vuejs.org/api/sfc-script-setup.html"
},
{
"No": "3",
"Category": "Reactivity",
"Guideline": "Use ref for primitives",
"Description": "ref() for primitive values that need reactivity",
"Do": "ref() for strings numbers booleans",
"Don't": "reactive() for primitives",
"Code Good": "const count = ref(0)",
"Code Bad": "const count = reactive(0)",
"Severity": "Medium",
"Docs URL": "https://vuejs.org/guide/essentials/reactivity-fundamentals.html"
},
{
"No": "4",
"Category": "Reactivity",
"Guideline": "Use reactive for objects",
"Description": "reactive() for complex objects and arrays",
"Do": "reactive() for objects with multiple properties",
"Don't": "ref() for complex objects",
"Code Good": "const state = reactive({ user: null })",
"Code Bad": "const state = ref({ user: null })",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "5",
"Category": "Reactivity",
"Guideline": "Access ref values with .value",
"Description": "Remember .value in script unwrap in template",
"Do": "Use .value in script",
"Don't": "Forget .value in script",
"Code Good": "count.value++",
"Code Bad": "count++ (in script)",
"Severity": "High",
"Docs URL": ""
},
{
"No": "6",
"Category": "Reactivity",
"Guideline": "Use computed for derived state",
"Description": "Computed properties cache and update automatically",
"Do": "computed() for derived values",
"Don't": "Methods for derived values",
"Code Good": "const doubled = computed(() => count.value * 2)",
"Code Bad": "const doubled = () => count.value * 2",
"Severity": "Medium",
"Docs URL": "https://vuejs.org/guide/essentials/computed.html"
},
{
"No": "7",
"Category": "Reactivity",
"Guideline": "Use shallowRef for large objects",
"Description": "Avoid deep reactivity for performance",
"Do": "shallowRef for large data structures",
"Don't": "ref for large nested objects",
"Code Good": "const bigData = shallowRef(largeObject)",
"Code Bad": "const bigData = ref(largeObject)",
"Severity": "Medium",
"Docs URL": "https://vuejs.org/api/reactivity-advanced.html#shallowref"
},
{
"No": "8",
"Category": "Watchers",
"Guideline": "Use watchEffect for simple cases",
"Description": "Auto-tracks dependencies",
"Do": "watchEffect for simple reactive effects",
"Don't": "watch with explicit deps when not needed",
"Code Good": "watchEffect(() => console.log(count.value))",
"Code Bad": "watch(count, (val) => console.log(val))",
"Severity": "Low",
"Docs URL": "https://vuejs.org/guide/essentials/watchers.html"
},
{
"No": "9",
"Category": "Watchers",
"Guideline": "Use watch for specific sources",
"Description": "Explicit control over what to watch",
"Do": "watch with specific refs",
"Don't": "watchEffect for complex conditional logic",
"Code Good": "watch(userId, fetchUser)",
"Code Bad": "watchEffect with conditionals",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "10",
"Category": "Watchers",
"Guideline": "Clean up side effects",
"Description": "Return cleanup function in watchers",
"Do": "Return cleanup in watchEffect",
"Don't": "Leave subscriptions open",
"Code Good": "watchEffect((onCleanup) => { onCleanup(unsub) })",
"Code Bad": "watchEffect without cleanup",
"Severity": "High",
"Docs URL": ""
},
{
"No": "11",
"Category": "Props",
"Guideline": "Define props with defineProps",
"Description": "Type-safe prop definitions",
"Do": "defineProps with TypeScript",
"Don't": "Props without types",
"Code Good": "defineProps<{ msg: string }>()",
"Code Bad": "defineProps(['msg'])",
"Severity": "Medium",
"Docs URL": "https://vuejs.org/guide/typescript/composition-api.html#typing-component-props"
},
{
"No": "12",
"Category": "Props",
"Guideline": "Use withDefaults for default values",
"Description": "Provide defaults for optional props",
"Do": "withDefaults with defineProps",
"Don't": "Defaults in destructuring",
"Code Good": "withDefaults(defineProps<Props>(), { count: 0 })",
"Code Bad": "const { count = 0 } = defineProps()",
"Severity": "Medium",
"Docs URL": ""
},
{
"No": "13",
"Category": "Props",
"Guideline": "Avoid mutating props",
"Description": "Props should be read-only",
"Do": "Emit events to parent for changes",
"Don't": "Direct prop mutation",
"Code Good": "emit('update:modelValue', newVal)",
"Code Bad": "props.modelValue = newVal",
"Severity": "High",
"Docs URL": ""
},
{
"No": "14",
"Category": "Emits",
"Guideline": "Define emits with defineEmits",
"Description": "Type-safe event emissions",
"Do": "defineEmits with types",
"Don't": "Emit without definition",
"Code Good": "defineEmits<{ change: [id: number] }>()",
"Code Bad": "emit('change', id) without define",
"Severity": "Medium",
"Docs URL": "https://vuejs.org/guide/typescript/composition-api.html#typing-component-emits"
}
]
