Vue 3

Introdución

Vue (pronunciado /vjuː/, como view) é un framework progresivo para construír interfaces de usuario. A diferenza doutros frameworks monolíticos, Vue está deseñado dende cero para ser utilizado de maneira incremental. A biblioteca central está enfocada só na capa de visualización, e é doada de utilizar e integrar con outras bibliotecas ou proxectos existentes.

Vue dispón dun "compilador" que se encarga de transformar as plantillas de Vue en código JavaScript optimizado que utilizará o navegador para renderizar o contido. Se encarga de convertir as directrices e etiquetas Vue (como v-if, v-for) en funcións JavaScript que manipulan o DOM.

As distribucións de desenvolvemento de Vue inclúen o compilador o que permite escribir as plantillas no HTML ou en ficheiros .vue sepearados sen compilalos previamente. Unha vez rematada a aplicación se "compilan" (build) xerando a aplicación de produción.

As distribucións de produción non precisan o compilador, unicamente o "runtime", xa que a aplicación xa estará "compilada" a JavaScript.

Un exemplo de plantilla Vue sería o seguinte:

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')
template
<div id="app">
  <button @click="count++">
    Count is: {{ count }}
  </button>
</div>
</script>

Vue pode utilizar dous tipos de API diferentes:

Options API

Coa Options API, definimos a lóxica dun compoñente usando un obxecto de opcións, como data, methods e mounted. As propiedades definidas polas opcións están dispoñibles en this dentro das funcións, que apunta á instancia do compoñente:

<script>
export default {
  // Properties returned from data() become 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 handlers 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>

Composition API

Coa Composition API, definimos a lóxica dun compoñente usando funcións da API importadas. Nos SFCs (Single File Components), a Composition API utilízase normalmente con <script setup>. O atributo setup é unha indicación que permite a Vue realizar transformacións en tempo de compilación que nos permiten usar a Composition API con menos código repetitivo. Por exemplo, as importacións e as variables/funcións de nivel superior declaradas en <script setup> son directamente utilizables na plantilla.

Na maioría dos proxectos de Vue habilitados para ferramentas de construción, autoramos compoñentes de Vue utilizando un formato de ficheiro semellante ao HTML chamado Compoñente de Ficheiro Único (tamén coñecido como ficheiros *.vue, abreviado como SFC). Un SFC de Vue, como suxire o nome, encapsula a lóxica do compoñente (JavaScript), a plantilla (HTML) e os estilos (CSS) nun único ficheiro.

<script>
<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>

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

Ambos os estilos de API son plenamente capaces de cubrir casos de uso comúns. Son interfaces diferentes impulsadas polo mesmo sistema subxacente. De feito, a Options API está implementada sobre a Composition API. Os conceptos fundamentais e o coñecemento sobre Vue son compartidos entre os dous estilos.

Se es novo en Vue, aquí está a nosa recomendación xeral:

Para fins de aprendizaxe, escolla o estilo que lle pareza máis fácil de entender. De novo, a maioría dos conceptos básicos son compartidos entre os dous estilos. Sempre podes aprender o outro estilo máis adiante.

Para uso en produción:

• Escolla a Options API se non está a usar ferramentas de construción, ou se planea usar Vue principalmente en escenarios de baixa complexidade, por exemplo, mellora progresiva.
• Escolla a Composition API + Compoñentes de Ficheiro Único se planea construir aplicacións completas con Vue.

Neste documento utilizaremos principalmente Composition API.

Instalación

Existen varios modos de instalación:

Inclusión Direta con <script>

Simplemente se debe descargar e incluír a etiqueta script coa ruta correcta, ou utilizar un CDN. Por exemplo: <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>. Vue tamén está dispoñible nos CDN unpkg e cdnjs.

As distribucións de Vue teñen a forma vue(.runtime).global(.prod).js, donde "runtime" conten únicamente o JavaScript necesario para executar as plantillas xa "compiladas" a JavaScript, mentres que as outras inclúen o compilador necesario para a "compilación" das plnatillas .vue.

Para o uso de módulos ES nativos e de xeito similar, a compilación de Vue a usar ten a forma vue(.runtime).esm-browser(.prod).js.

As versións global son de desenvolvemento e as prod de produción.

Existen distintas compilacións de Vue:

• Global Build: Na Global Build odas as APIs de nivel superior están expostas como propiedades no obxecto global Vue.

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp, ref } = Vue

  createApp({
    setup() {
      const message = ref('Hello vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

• ES Module Build: E o formato preferido para as aplicacións Vue, Utiliza módulos ECMAScript (ESM). Este enfoque permite importar Vue e outros módulos de forma máis flexible e organizada, facilitando a xestión de dependencias e a estrutura do código. Os ES Modules son compatibles co estándar moderno de JavaScript, e permiten realizar importacións e exportacións explícitas entre diferentes ficheiros. Usa a sintaxe de importación (import Vue from 'vue';), permitindo unha organización máis clara do código e un mellor control das dependencias.

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

Na demostración anterior, estamos importando desde a URL completa do CDN, pero no resto da documentación verás código como este:

import { createApp } from 'vue'

Podemos ensinar ao navegador onde localizar a importación de Vue utilizando *Import Maps*:

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.js"
    }
  }
</script>

<div id="app">{{ message }}</div>

<script type="module">
  import { createApp, ref } from 'vue'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>