Vue JS Programming Standards 3 — Questions and Answers
Question 1: What is the recommended order priority for component options/attributes in the Vue style guide?
- A consistent, documented order such as name, components, props, data, computed, methods (Correct answer)
- Random order is fine
- Alphabetical only
- Methods always first
Correct answer: A consistent, documented order such as name, components, props, data, computed, methods
A consistent ordering of options makes components easier to scan and maintain.
Question 2: Per Vue standards, how should you reference a base/global component to make it distinguishable?
- Use a consistent prefix like Base, App, or V (Correct answer)
- Use a numeric suffix
- Use all lowercase
- Avoid any prefix
Correct answer: Use a consistent prefix like Base, App, or V
Base components that are app-wide and presentational should share a common prefix for clarity.
Question 3: Why does the style guide recommend using directive shorthands consistently (either always or never)?
- Mixing @ and v-on inconsistently reduces readability (Correct answer)
- Shorthands run faster
- Long forms are deprecated
- Shorthands change behavior
Correct answer: Mixing @ and v-on inconsistently reduces readability
Choosing one style for shorthands like @, :, and # keeps templates consistent and predictable.
Question 4: What does Vue recommend for components that should only ever have a single active instance, like a sidebar?
- Begin the name with 'The' to indicate a singleton (Correct answer)
- Mark it with a number
- Use lowercase
- Suffix it with 'Single'
Correct answer: Begin the name with 'The' to indicate a singleton
Single-instance components are prefixed with 'The' (e.g., TheHeader) to signal there is only one.
Question 5: Per standards, how should tightly coupled child component names relate to their parent?
- Start with the parent's name as a prefix (Correct answer)
- Use unrelated names
- Use numeric ids
- Always be single-word
Correct answer: Start with the parent's name as a prefix
Child components coupled to a parent should include the parent name as a prefix (e.g., TodoListItem).
Question 6: Why does the Vue style guide advise against accessing parent state directly from a child via this.$parent?
- It creates tight coupling and makes data flow hard to trace (Correct answer)
- It is syntactically invalid
- It causes memory leaks
- It disables reactivity
Correct answer: It creates tight coupling and makes data flow hard to trace
Implicit parent-child communication is hard to maintain; use props and events instead.
Question 7: What is the recommended scope for element selectors in scoped component styles?
- Avoid element selectors; prefer class selectors for performance (Correct answer)
- Always use element selectors
- Use only ID selectors
- Use inline styles only
Correct answer: Avoid element selectors; prefer class selectors for performance
Class selectors are faster than element selectors when combined with scoped attribute selectors.
Vue JS Programming Standards 3
What is the recommended order priority for component options/attributes in the Vue style guide?