Vue JS Programming Standards 2 — Questions and Answers
Question 1: Which naming convention does the official Vue style guide recommend for single-file component filenames?
- PascalCase or kebab-case (Correct answer)
- snake_case only
- lowercase with no separators
- UPPERCASE
Correct answer: PascalCase or kebab-case
Vue's style guide recommends component filenames be either consistently PascalCase or consistently kebab-case.
Question 2: Why does the Vue style guide require multi-word component names like 'TodoItem' instead of 'Todo'?
- To avoid conflicts with existing and future HTML elements (Correct answer)
- To improve render speed
- Because single words break the compiler
- To reduce bundle size
Correct answer: To avoid conflicts with existing and future HTML elements
Multi-word names prevent collisions with current or future standard HTML elements, which are all single-word.
Question 3: What is the recommended way to declare component props for clarity per Vue standards?
- Use detailed object form with type and validation (Correct answer)
- Use an array of string names only
- Avoid declaring props
- Declare them as global variables
Correct answer: Use detailed object form with type and validation
Detailed prop definitions specifying type, required, and default improve readability and catch errors.
Question 4: Per the Vue style guide, why must 'v-for' always be paired with a 'key'?
- To maintain internal component state and predictable DOM updates (Correct answer)
- To enable two-way binding
- To allow nested loops
- To cache the list in memory
Correct answer: To maintain internal component state and predictable DOM updates
A unique key helps Vue track node identity and preserves component state across re-renders.
Question 5: What does the Vue style guide say about using 'v-if' and 'v-for' on the same element?
- Avoid it because their priority is ambiguous and it hurts readability (Correct answer)
- It is required for filtered lists
- It improves performance
- It is the only way to conditionally render lists
Correct answer: Avoid it because their priority is ambiguous and it hurts readability
Combining them on one element is discouraged; filter via a computed property or wrap with a template instead.
Question 6: Which casing does the style guide recommend for prop names in JavaScript versus templates?
- camelCase in JS, kebab-case in templates (Correct answer)
- snake_case in both
- PascalCase in both
- UPPERCASE in JS, camelCase in templates
Correct answer: camelCase in JS, kebab-case in templates
Props are declared in camelCase in script but referenced in kebab-case within HTML templates.
Question 7: Why does Vue recommend scoping component styles (e.g., with 'scoped' or CSS modules)?
- To prevent styles from leaking and affecting other components (Correct answer)
- To make CSS load faster
- To enable inline styles
- To disable the cascade entirely
Correct answer: To prevent styles from leaking and affecting other components
Scoped styles keep CSS local to a component, avoiding unintended global side effects.
Vue JS Programming Standards 2
Which naming convention does the official Vue style guide recommend for single-file component filenames?