Vue.js: Das progressive Framework, das Sie lieben werden

Vue.js von Evan You bietet ein zugängliches, performantes und flexibles Framework zum Erstellen von UIs. Warum es so schnell wächst und wie es sich mit React und Angular vergleicht.

Progressive Adoption¶

Vue.js zeichnet sich durch seinen progressiven Ansatz aus — Sie können es einer bestehenden Seite mit einem einzigen Script-Tag hinzufügen oder als vollwertiges SPA-Framework mit Router, State Management und Build-Tooling verwenden.

Evan You, ein Ex-Googler aus dem Angular-Team, hat Vue als Reaktion auf Angulars Komplexität entwickelt. Das Ziel: das Beste aus Angular und React nehmen und zugänglich verpacken.

Reaktives Datenmodell¶

Vue.js verwendet ein reaktives System — Datenänderungen aktualisieren automatisch das DOM:

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    todos: [
      { text: 'Learn Vue', done: true },
      { text: 'Build a project', done: false }
    ]
  },
  computed: {
    pendingTodos: function() {
      return this.todos.filter(function(t) { return !t.done; });
    }
  }
});

Kein setState() wie in React, kein zone.js wie in Angular. Ändern Sie einfach die Daten und Vue kümmert sich um den Rest.

Single File Components¶

Vue Single File Components (.vue-Dateien) kombinieren Template, Script und Style in einer Datei:

<template>
  <div class="todo-item" :class="{ done: todo.done }">
    <span>{{ todo.text }}</span>
    <button @click="$emit('remove')">X</button>
  </div>
</template>

<script>
export default {
  props: ['todo']
}
</script>

<style scoped>
.done { text-decoration: line-through; }
</style>

Scoped CSS stellt sicher, dass Styles andere Komponenten nicht beeinflussen. vue-loader für Webpack verarbeitet .vue-Dateien automatisch.

Vue vs React vs Angular¶

Jedes Framework hat seinen Platz:

• Vue — niedrigste Einstiegshürde, hervorragende Dokumentation, ideal für kleinere Teams und schrittweise Adoption
• React — größtes Ökosystem, Flexibilität, stark im Enterprise mit Redux
• Angular — Batteries-included, TypeScript first, am besten für große Enterprise-Teams

Vue wächst am schnellsten auf GitHub und hat eine begeisterte Community. Für neue Projekte ist es eine legitime Alternative zu React.

Fazit: Vue verdient Ihre Aufmerksamkeit¶

Vue.js beweist, dass ein Framework sowohl einfach als auch leistungsstark sein kann. Wenn Sie eine Alternative zu React oder Angular mit einer geringeren Lernkurve und hervorragender Dokumentation suchen, ist Vue eine großartige Wahl. Probieren Sie es bei Ihrem nächsten Projekt aus.