Code

How to learn Vue

Vue is an awesome JavaScript framework for building user interfaces.

Here’s what using the Vue Framework in code looks like:

import { createApp } from 'vue'

// reactivity.
createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')
// declarative Rendering.
<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>

We can see two core features of Vue:

  • Reactivity: Tracking state changes and efficiently updating the DOM when changes happen.

Vue single-file components (SFC)

SFC is a defining feature of Vue, and is the recommended way to author Vue components.

They encapsulates the component’s code in a single file:

  • Logic (JavaScript)
  • Template (HTML)
  • Styles (CSS)
<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">Count is: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

API Styles

You can author author Vue components in two different API styles:

  • Options API.
  • Composition API.

Options API (class-based mental mode)

You can define a component’s logic using an object of options such as:

Data()Data properties become the reactive state.
Methods: {}Mutate State
Mounted()Lifecycle Hooks

Properties defined by options are exposed on this inside functions, which points to the component instance:

<script>
export default {
  // Properties returned from data() becomes reactive state
  // and will be exposed on `this`.
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

<template>
  <button @click="increment">count is: {{ count }}</button>
</template>

Go with Options API if you are not using build tools, or plan to use Vue primarily in low-complexity scenarios, e.g. progressive enhancement.

The Options API is centered around the concept of a “component instance” (this as seen in the example), which typically aligns better with a class-based mental model for users coming from OOP language backgrounds. It is also more beginner-friendly by abstracting away the reactivity details and enforcing code organization via option groups.

Composition API (less boilerplate)

Go with Composition API + Single-File Components if you plan to build full applications with Vue.

  • With Composition API, we define a component’s logic using imported API functions.
  • In SFCs, Composition API is typically used with <script setup>.
  • Imports and top-level variables / functions declared in are directly usable in the template.
// less boilerplate
<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${count.value}.`)
})
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

It is more free-form, and requires understanding of how reactivity works in Vue to be used effectively.

Does Vue scale?

Yes, Vue is perfectly capable of handling large scale applications.

Learning Paths

The TutorialRead the fine quick startCheck out the examples

Lifecycle hooks

Essentialshttps://vuejs.org/guide/essentials/lifecycle.html
APIhttps://vuejs.org/api/options-lifecycle.html
Component lifecycle diagram