Components are Functions

Underneath it all, components are just functions that return some HTML.

It's a huge simplification, and if you've ever looked at the complexity of the Vue codebase you know this isn't actually true. But, fundamentally, this is what Vue is doing for us — plus a million other amazing things.

Take a look at this component:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>Some words that describe this thing</p>
    <button>Clickity click!</button>
  </div>
</template>

Now, here is some Javascript that does essentially the same thing:

function component(title) {
  let html = '';

  html += '<div>';
  html += `<h1>${title}</h1>`;
  html += '<p>Some words that describe this thing</p>';
  html += '<button>Clickity click!</button>';
  html += '</div>';

  return html;
}

This code constructs the HTML in much the same way that the Vue component would.

Granted, we don't get reactivity, event handling, or a bunch of other features with this, but the HTML that gets output is the same thing.

This means that we can apply all of the patterns and experience from Javascript (and other languages) to our components. Things like breaking components down into smaller pieces, naming them well, and avoiding over-abstraction are all examples.

Of course, there are many more!