Components have the same structure as the examples that we have been working with up to this moment, i.e. a template part containing HTML markup and a controller part containing the Vue app's logic.
When a new Vue component instance is created, it goes through a series of initialization steps such as data observation, template compilation, mounting data to DOM, and data updates. Through these initialization steps, Vue invokes functions - "lifecycle hooks", that give users the opportunity to add custom code at specific points of its lifecycle.
Watchers are another option in Vue as "computed" properties are. We declare watchers by adding a "watch" property inside the Object we pass inside Vue's createApp() function, then passing the names of variables we intend to watch for changes as subsequent functions names inside this property.
One of the most important activities in web applications is form interaction. We use forms for a number of activities such as user authentication, providing feedback in comments and responding to questionnaires, rating products, voting in polls, filling personal information on e-commerce websites, writing e-mails, and the list goes on.
We can package component styles in named selectors e.g the class attribute, then change it on state changes, or we can in-line our styles within HTML elements with the style attribute and directly change the styles when the states change.
Computed properties will only re-evaluate when one of their dependencies have changed. This is an important characteristic as it helps save on physical resources, especially when running complex expressions that require a lot of computations.