vuejs vue style single multiple example component vue.js

vue.js - style - vue component vue



¿Diferencias entre vue instance y vue component? (5)

Soy nuevo en vue js y tengo algunas preguntas al aprenderlo.

Ahora estoy un poco confundido acerca de la relación entre su instancia y componente. Por lo que he aprendido, cada aplicación build by vue debería tener solo una instancia y una sola instancia, puede tener tantos componentes como desee, si es necesario. Pero recientemente he visto una demostración, y en esa demostración tiene más de una instancia.

Así que mi pregunta es, ¿está bien tener múltiples intenciones en una aplicación (el código de demostración funciona bien, pero es la forma correcta)? ¿Cuál es la mejor práctica para usar instancias y componentes en la aplicación vue?


Los componentes de Vue extends instancias de Vue.

pero las instancias de Vue aceptan propiedades como el , router , los componentes de Vue no pueden.

mejores prácticas:

una instancia de Vue

muchos componentes Vue


Depende mucho de tu situación.

Trabajo en un gran proyecto web que no es un SPA. Tenemos una instancia de Vue para cada "silo" de la aplicación. Estamos realizando una transición lenta de un proyecto más antiguo desde una interfaz en su mayoría jQuery, por lo que es posible que a medida que evolucione podamos condensar en una sola instancia de Vue, pero no tenemos problemas con varias instancias. La facilidad de uso de Vue en proyectos existentes fue uno de los factores decisivos más importantes al elegirlo sobre otra biblioteca, como reaccionar.

He tomado un enfoque diferente con el desarrollo verde, una instancia y muchos componentes.


Está bien tener dos instancias en el mismo proyecto, sin embargo, es probable que no quieras hacerlo.

Un buen escenario es tener una instancia principal para controlar su aplicación, especialmente si está creando una aplicación de una sola página (SPA). Luego usa tantos componentes como quieras.

Los componentes son una excelente manera de reutilizar el código y mantenerlo organizado, y, con Vue.js, es muy fácil comunicarse entre sus componentes y su instancia "principal" de Vue.


Hay algo en común, y alguna diferencia entre la instancia de Vue y el componente de Vue.

  1. De documentos Vue :

todos los componentes de Vue también son instancias de Vue y, por lo tanto, aceptan el mismo objeto de opciones (excepto algunas opciones específicas de la raíz).

Las instancias de Vue raíz aceptan propiedades como el , router , los componentes de Vue no pueden. La propiedad de data en instancias de Vue raíz es un objeto, pero en Vue los componentes deben ser una función.

  1. El objetivo de diseño es diferente:

Una instancia de Vue raíz es un lanzador de aplicaciones de Vue, el componente de Vue es una extensión de la instancia de Vue.

Los componentes de Vue pueden crear elementos para ser reutilizados en muchos lugares. Esta es una característica de Vue de la componente principalmente refleja el punto.


La instancia de Vue puede asociarse y manipular un elemento que ya existe.

El componente Vue es más adecuado para crear nuevos elementos y reutilizarlos en cualquier lugar.