Opciones de instancia de Vue

Las opciones en Vue son las diferentes opciones disponibles en una instancia de Vue cuando se utiliza Options API.

Algunas opciones comunes de la instancia de Vue:

  • el- Especifica el elemento DOM donde se monta la instancia de Vue. Si no se proporciona, la instancia de Vue no se montará automáticamente.

  • data- Define el objeto de datos de la instancia de Vue. La plantilla, las propiedades computadas, los métodos, los observadores, etc. de la instancia de Vue pueden acceder a estos datos.

  • computed- Contiene propiedades computadas, cuyos valores se almacenan en caché según sus dependencias. Solo cuando las dependencias cambian, las propiedades computadas se recalcular.

  • methods- Define los métodos de la instancia de Vue, que pueden invocarse en la plantilla mediante escuchadores de eventos.

  • watch- Contiene uno o más observadores para observar y responder a los cambios de datos en la instancia de Vue.

  • props- Define los datos externos que el componente puede recibir.

  • components- Permite registrar componentes personalizados en la instancia de Vue.

  • directives- Permite registrar directivas personalizadas globales.

  • filters- Define filtros que se pueden usar en la plantilla para formatear texto.

  • model- Especifica las propiedades y eventos personalizados de v-model que utiliza el componente.

  • provide/inject- Proporciona capacidad de inyección de dependencias, permitiendo transmitir datos entre componentes.

  • lifecycle hooks- IncluyeonMounted, onUpdated, onUnmountedganchos de ciclo de vida, etc., para ejecutar código en diferentes etapas de la instancia de Vue.

  • template- Define la plantilla HTML de la instancia de Vue.

  • render function- Permite usar funciones de JavaScript para renderizar componentes, ofreciendo capacidades de personalización más avanzadas.

  • errorCaptured- Se utiliza para capturar errores globalmente en la instancia de Vue.

  • emits- Define los eventos que el componente puede emitir.

  • setup- Función de entrada en la Composition API de Vue 3, utilizada para organizar la lógica del componente.

el

Punto de montaje, utilizado para especificar el elemento DOM donde se monta la instancia de Vue:

Instancia

const app = Vue.createApp({
  // options
});
app.mount('#app');

data

  • Tipo: función u objeto

  • Función: dataEs el lugar en la instancia de Vue para almacenar datos del componente. Puedesdatadefinir varias propiedades de datos en él y usarlas en la página mediante la sintaxis de plantilla.dataLos datos se actualizan de forma reactiva, es decir, cuando los datos cambian, el contenido relacionado de la página se actualiza automáticamente.

Instancia

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
});

computed

  • Tipo: objeto

  • Función: computedLa propiedad te permite declarar propiedades computadas basadas en dependencias reactivas. Las propiedades computadas solo se reevalúan cuando las dependencias relacionadas cambian, y almacenan en caché el resultado para evitar cálculos repetidos innecesarios.

Instancia

const app = Vue.createApp({
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  }
});

methods

  • Tipo: objeto

  • Función: methodsLa propiedad se utiliza para almacenar los métodos de la instancia de Vue. Estos métodos se pueden invocar en la plantilla y también se pueden usar en otros métodos de la instancia. A diferencia de las propiedades computadas, los métodos se ejecutan de nuevo cada vez que se invocan, adecuados para responder a eventos o realizar operaciones asincrónicas.

Instancia

const app = Vue.createApp({
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
});

watch

  • Tipo: objeto o función

  • Función: watchLa propiedad se utiliza para observar y responder a los cambios de datos en la instancia de Vue. Cuando los datos observados cambian, se ejecuta la función de devolución de llamada especificada. Adecuada para manejar lógica de cambios de datos asincrónica o compleja.

Instancia

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  watch: {
    message(newValue, oldValue) {
      console.log(`Message changed from ${oldValue} to ${newValue}`);
    }
  }
});

props

  • Tipo: array u objeto

  • Función: propsLa propiedad se utiliza para recibir los datos que el componente padre transmite al componente hijo. El componente hijo, a través depropsrecibe los datos transmitidos por el componente padre y puede usarlos internamente en el componente.

En el siguiente ejemplo, MyComponent recibe una propiedad title y la usa en la plantilla:

Instancia

const MyComponent = {
  props: ['title'],
  template: '<h1>{{ title }}</h1>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Hello Vue 3!"></my-component>'
});

app.mount('#app');

template

  • Tipo: cadena

  • Función: templateLa propiedad define la estructura de la plantilla del componente Vue. En la plantilla se puede usar la sintaxis de plantilla de Vue, incluyendo interpolación, directivas, propiedades computadas, etc. Finalmente, la plantilla se compila en una función de renderizado para generar el DOM virtual del componente.

Instancia

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  template: '<div>{{ message }}</div>'
});

components

components se utiliza para registrar componentes locales.

Instancia

const ChildComponent = {
  template: '<div>A child component</div>'
};

const app = Vue.createApp({
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

provide / inject

El componente padre proporciona los datos, y el componente hijo los inyecta para su uso.

Instancia

const ChildComponent = {
  inject: ['message'],
  template: '<div>{{ message }}</div>'
};

const app = Vue.createApp({
  provide() {
    return {
      message: 'Provided Message'
    };
  },
  components: {
    'child-component': ChildComponent
  },
  template: '<child-component></child-component>'
}).mount('#app');

Ganchos del ciclo de vida

beforeCreate

Se llama antes de la inicialización de la instancia.

Instancia

const app = Vue.createApp({
  beforeCreate() {
    console.log('beforeCreate');
  }
}).mount('#app');

created

Se llama después de que se crea la instancia.

Instancia

const app = Vue.createApp({
  created() {
    console.log('created');
  }
}).mount('#app');

beforeMount

Se llama antes del montaje.

Instancia

const app = Vue.createApp({
  beforeMount() {
    console.log('beforeMount');
  }
}).mount('#app');

mounted

Se llama después de que la instancia se monta.

Instancia

const app = Vue.createApp({
  mounted() {
    console.log('mounted');
  }
}).mount('#app');

beforeUpdate

Se llama antes de la actualización de los datos.

Instancia

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello'
    };
  },
  beforeUpdate() {
    console.log('beforeUpdate');
  }
}).mount('#app');

updated

Se llama después de la actualización de los datos.

Instancia

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello'
    };
  },
  updated() {
    console.log('updated');
  }
}).mount('#app');

beforeUnmount

Se llama antes de que la instancia se desmonte.

Instancia

const app = Vue.createApp({
  beforeUnmount() {
    console.log('beforeUnmount');
  }
}).mount('#app');

unmounted

Se llama después de que la instancia se desmonta.

Instancia

const app = Vue.createApp({
  unmounted() {
    console.log('unmounted');
  }
}).mount('#app');

Otras opciones

directives

Registrar directivas locales.

Instancia

const app = Vue.createApp({
  directives: {
    focus: {
      mounted(el) {
        el.focus();
      }
    }
  },
  template: '<input v-focus>'
}).mount('#app');

mixins

Mixins.

Instancia

const myMixin = {
  created() {
    console.log('Mixin created');
  }
};

const app = Vue.createApp({
  mixins: [myMixin],
  created() {
    console.log('Component created');
  }
}).mount('#app');

extends

Extender otro componente.

Instancia

const BaseComponent = {
  created() {
    console.log('BaseComponent created');
  }
};

const app = Vue.createApp({
  extends: BaseComponent,
  created() {
    console.log('Extended component created');
  }
}).mount('#app');

inheritAttrs

Si se heredan los atributos del componente padre.

Instancia

const MyComponent = {
  inheritAttrs: false,
  props: ['title'],
  template: '<div><h1>{{ title }}</h1></div>'
};

const app = Vue.createApp({
  components: {
    'my-component': MyComponent
  },
  template: '<my-component title="Hello" id="app"></my-component>'
}).mount('#app');

setup

Utilizado para la Composition API.

Instancia

const app = Vue.createApp({
  setup() {
    const message = Vue.ref('Hello Vue 3!');
    return { message };
  },
  template: '<h1>{{ message }}</h1>'
}).mount('#app');

expose

En la Composition API de Vue 3, al usar la función setup para definir la lógica del componente, se puede usar el método expose para especificar explícitamente las propiedades y métodos que se expondrán al exterior.

El siguiente es un ejemplo sencillo que muestra cómo usar expose para exponer propiedades y métodos en un componente Vue 3:

Componente padre (ParentComponent.vue)

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">Call Child Method</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  setup() {
    const child = ref(null);

    const callChildMethod = () => {
      if (child.value) {
        child.value.exposedMethod();
      }
    };

    return {
      child,
      callChildMethod
    };
  }
};
</script>

Componente hijo (ChildComponent.vue)

<template>
  <div>
    <p>{{ exposedData }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup(_, { expose }) {
    const exposedData = ref('Hello from Child Component');
   
    const exposedMethod = () => {
      console.log('Child component method called');
    };

    expose({
      exposedData,
      exposedMethod
    });

    return {
      exposedData
    };
  }
};
</script>

Explicación:

  1. Componente padre:

    • En el componente padre, se usarefse crea una referencia al componente hijochild。
    • EncallChildMethoden el método, a través dechild.valuese accede a la instancia del componente hijo y se llaman los métodos expuestos por el componente hijo.exposedMethod。

  2. Componente hijo:

    • En el componente hijo,setupdentro de la función, medianterefse crea un dato reactivoexposedData。
    • se define un métodoexposedMethod, para mostrar cómo exponer métodos.
    • Usando elexposemétodo expose, se exponen explícitamenteexposedDatayexposedMethodal componente padre.
    • Se devuelveexposedData, para poder usarlo en la plantilla.
Otras extensiones