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

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

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

	UMD	CommonJS	ES Module
Completa	vue.js	vue.common.js	vue.esm.js
Runtime	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Completa (producción)	vue.min.js	-	-
Runtime (producción)	vue.runtime.min.js	-	-

• A versión Completa fai referencia a distribucións que levan o motor de execución e o "compilador" de Vue.
• A versón Runtime unicamente conten o JavaScript que forma parte do FrameWork.

Existen 3 versións distintas de distribución de Vue:

• UMD: Están deseñadas para ser utilizadas directamente no navegador mediante a etiqueta <script>
• CommonJS: Este formato está deseñado para empaquetadores de JavaScript tradicionais como webpack 1 ou broweserify.
• ES Module: Utiliza módulos ECMAScript para empaquetadores de JavaScript máis modernos como webpack 2 ou rollup.

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. Vue será rexistrado como unha variable global. Por exemplo: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>. Vue tamén está dispoñible nos CDN unpkg e cdnjs. A versión de produción completa é vue.min.js.