module 01

cleaning up the template

by Michael Thiessen

1.1 different tasks lonely children

01 allow us to get rid of nesting as well as
cohesion how well code is organized based on simplifying our logic
what it does. 02 refactor v-for and v-if so they are acting
low cohesion upon single child components
01 is more difficult to understand All extra levels of nesting get refactored into a
02 harder to reuse single custom component, eliminating nesting
03 will be touched more often problems that make code hard to read.
Group together elements based on the task they In a similar way, our logic no longer has to
perform. deal with this nesting either and is dramatically
Split up your component when the task being simplified.
performed changes.

1.6 different levels of

1.2 reducing redundant
abstraction
repetition
Two kinds of components:
The less code you need to write the better. 01 components that do the actual work of
Replace static parts of the template with a rendering things to the page
declarative, data-driven approach: 02 components that organize and coordinate
01 find the repetition and replace it with a v-for components across the application
02 repeat this as needed, even for nested Keeping these roles as separate as possible
loops! ensures high levels of cohesion
Converting logic into configuration is better even Reduces cognitive load from switching between
if we don’t reduce the amount of code: different types of code
01 it’s easier to read configuration
02 bugs are typically found in logic, not
configuration
03 dynamic components give you more
flexibility

1.3 - 1.5 cleaning up control

flow
control flow directives that give us control over
what gets rendered to the page (v-if and v-for)
clean components