Vue.JS, ou simplement Vue, est un framework progressif pour les interfaces utilisateur pour les apps et sites JavaScript. Il s’agit d’un des frameworks front-end JS les plus populaires. On le compare souvent à React, Angular, Ember, etc. Par leur approche et leur ressemblance, Vue et React partagent de nombreux points communs. Le framework apparaît à l’été 2013. Il est développé par Evan You. Peu à peu, Vue va faire parler de lui et s’imposer chez les développeurs JS.
Vue est un framework front-end pour créer les interfaces. Il utilise deux éléments clés : le data binding et le DOM.
Vue reprend des principes bien connus du modèle MVVM : ViewModel. Pour cela, Vue utilise le data binding et le DOM (et surtout le virtual DOM) pour lier les deux et connecter la vue et le modèle. Vue repose sur une notion de composants, c’est même sa particularité. Cela signifie qu’une “app” Vue possède plusieurs composants qui sont réutilisables et vivent indépendamment les uns des autres.
Un arbre de composants
Un développement Vue peut donc être vu comme un composant intégrant des sous-composants. Ces sous-composants ont leur propre vie et peuvent être réutilisés. Cette approche permet une grande souplesse et de faire évoluer ou mettre à jour une partie de son app Vue, et non l’ensemble.
Comme nous l’avons vu plus haut, Vue reprend le concept de ViewModel. La view est l’interface utilisateur, le modèle est le data binding. Le DOM est utilisé sur la partie view. Une instance Vue est une ViewModel. Elle est instanciée par le constructeur Vue. Rappelons aussi que Vue s’appuie sur DOM car chaque instance Vue utilise un DOM.
Un point important de Vue est la notion de DOM virtuel. Ce concept se retrouve dans d’autres frameworks JavaScript. L’intérêt du virtuel DOM est que les modifications apportées par les développeurs ne sont pas directement intégrées au DOM mais à une réplique. L’intérêt est d’éviter de mettre à jour le DOM d’origine à chaque modification. Cette approche facilite les évolutions. Le DOM “original” est mis à jour quand toutes les évolutions sont faites. Ainsi, on ne touche au DOM “racine” qu’une seule fois. Le DOM virtuel est un objet JavaScript. Cette approche est appréciable quand votre app contient beaucoup de données, ce qui alourdit d’autant le DOM.
La notion de composant est l’un des points forts de Vue. Une app Vue est un arbre de composants (Component System). Pour simplifier, tout objet d’interface est un composant que l’on retrouve dans l’arbre de composants constituant son interface.
Comment installer Vue ?
Le plus simple est d’utiliser le npm.
Pour développer rapidement en Vue, vous pouvez utiliser Vue CLI. Actuellement, nous sommes à la version 3.2. Elle introduit plusieurs évolutions et nouveautés : nouvelle méthode defineCustomElement, et performances en hausse avec un important travail d’optimisation.
