Migration von Vue 1.x

template: '<p>message: {{ timeMessage }}</p>',
computed: {
  timeMessage: {
    cache: false,
    get: function () {
      return Date.now() + this.message
    }
  }
}

oder verwenden Sie die Komponentenmethode:

template: '<p>message: {{ getTimeMessage() }}</p>',
methods: {
  getTimeMessage: function () {
    return Date.now() + this.message
  }
}

cache: falseFühren Sie das

Beachten Sie, dass für andere Hook-Funktionen (wie und ) weiterhin die allgemeinen Regeln von js zur Beurteilung von wahren und falschen Werten gelten.

Die Verwendung von für eine Komponente überwacht jetzt nur noch benutzerdefinierte Ereignisse (Ereignisse, die durch Komponenten mit ausgelöst werden). Wenn Sie die nativen Ereignisse des Stammelements abhören möchten, können Sie den Modifikator verwenden, z. B.:

<my-component v-on:click.native="doSomething"></my-component>

Upgrade-Methode

Upgrade-Pfad

Führen Sie die Instanz Migrationstool mit dem Parameter debounce aus.

Upgrade-Methode

Führen Sie das Migrationstool aus, um diese veralteten Parameter zu finden.

Upgrade-Methode

Führen Sie den End-to-End-Test nach dem Upgrade durch und achten Sie auf v-model Inline-Parameter Konsole Warnungen

die Felder im Objekt synchron aktualisieren kann, zum Beispiel:

strings.map(function (str) {
  return createElement('input', ...)
})

, am besten schreiben Sie es in String-Form:

<p v-bind:style="{ color: myColor + ' !important' }">hello</p>

!importantRun

Upgrade-Methode

Führen Sie das Migrationstool aus, um v-el und v-ref herauszufinden in der Instanz.

<p v-for="item in items" ref="items"></p>

sollte jetzt so geschrieben werden:

<p v-if="foo">Foo</p>
<p v-else v-show="bar">Not foo, but bar</p>

v-else wird das v-showMigrationstool

Upgrade-Methode

Führen Sie das Migrationstool aus, um herauszufinden, wo die Direktive definiert ist. Das Hilfstool markiert diese Stellen, da diese Stellen wahrscheinlich umgestaltet werden müssen.

Upgrade-Methode

Führen Sie das Migrationstool aus, um herauszufinden, was in der Instanz verwendet wird Ein Platz für den Modifikator „.literal“.

.

transitionFühren Sie das

über Vorlagen wiederverwenden.

transitionFühren Sie das

.

transitionFühren Sie das

durch die neue prägnante Konfiguration durch Zum Beispiel:

<p v-my-directive="'foo bar baz'"></p>

Upgrade-MethodekeyCode

Upgrade-Methode

Führen Sie das Migrationstool ausFinden Sie die Instanzen mit $dispatch und <🎜 heraus > . $broadcast

Filter

Einfügen Filter außerhalb von Text ^Entfernt

Filter können jetzt nur innerhalb eingefügter Texte ({{ }}-Tags) verwendet werden. Wir haben festgestellt, dass die Verwendung von Filtern innerhalb von Anweisungen (z. B. v-model, v-on usw.) die Dinge komplizierter macht. Für Listenfilter wie v-for ist es am besten, die Verarbeitungslogik als berechnete Eigenschaft in js einzufügen, damit sie in der gesamten Vorlage wiederverwendet werden kann.

Kurz gesagt, für Dinge, die in nativem JS implementiert werden können, versuchen wir zu vermeiden, ein neues Symbol einzuführen, um wiederholt dasselbe Problem zu lösen. So ersetzen Sie die integrierten Filter von Vue:

Ersetzen Sie den debounce-Filter

, der nicht mehr so ​​ist

// Todos
// ...
created: function () {
  eventHub.$on('add-todo', this.addTodo)
  eventHub.$on('delete-todo', this.deleteTodo)
},
// 最好在组件销毁前
// 清除事件监听
beforeDestroy: function () {
  eventHub.$off('add-todo', this.addTodo)
  eventHub.$off('delete-todo', this.deleteTodo)
},
methods: {
  addTodo: function (newTodo) {
    this.todos.push(newTodo)
  },
  deleteTodo: function (todoId) {
    this.todos = this.todos.filter(function (todo) {
      return todo.id !== todoId
    })
  }
}

<input v-on:keyup="doStuff | debounce 500">

Bitte verwenden Sie Lodashs debounce (oder möglicherweise throttle) zur direkten Steuerung hochintensiver Aufgaben. Sie können die obige Funktion wie folgt implementieren:

methods: {
  doStuff: function () {
    // ...
  }
}

Weitere Vorteile dieser Schreibmethode finden Sie unter: v-modelBeispiel.

ersetzt den limitBy-Filter

nicht mehr so:

<input v-on:keyup="doStuff">

wird in der Berechnung verwendet Attribut js integrierte Methode: .slice Methode:

methods: {
  doStuff: _.debounce(function () {
    // ...
  }, 500)
}

<p v-for="item in items | limitBy 10">{{ item }}</p>

ersetzt den filterByFilter

nicht mehr so:

<p v-for="item in filteredItems">{{ item }}</p>

Verwenden Sie integrierte js-Methoden in berechneten Attributen .filterMethode:

computed: {
  filteredItems: function () {
    return this.items.slice(0, 10)
  }
}

<p v-for="user in users | filterBy searchQuery in 'name'">{{ user.name }}</p>

js native .filter kann auch viele komplexe Filteroperationen implementieren, da alle js-Methoden in berechneten Eigenschaften verwendet werden können. Um beispielsweise Benutzer zu finden, indem ihre Namen und E-Mail-Adressen abgeglichen werden (Groß- und Kleinschreibung wird nicht beachtet):

<p v-for="user in filteredUsers">{{ user.name }}</p>

Filter orderBy ersetzen

Schreiben Sie nicht so:

computed: {
  filteredUsers: function () {
    var self = this
    return self.users.filter(function (user) {
      return user.name.indexOf(self.searchQuery) !== -1
    })
  }
}

Verwenden Sie es stattdessen im berechneten Attribut lodashs orderBy (oder vielleicht sortBy):

var self = this
self.users.filter(function (user) {
  var searchRegex = new RegExp(self.searchQuery, 'i')
  return user.isActive && (
    searchRegex.test(user.name) ||
    searchRegex.test(user.email)
  )
})

<p v-for="user in users | orderBy 'name'">{{ user.name }}</p>

Sie können sogar nach Feld sortieren:

<p v-for="user in orderedUsers">{{ user.name }}</p>

Filterparameter-Notation^Geändert

Das Filterparameterformular funktioniert jetzt besser mit js Funktionsaufrufe erfolgen auf die gleiche Weise, daher werden Argumente nicht mehr durch Leerzeichen getrennt:

computed: {
  orderedUsers: function () {
    return _.orderBy(this.users, 'name')
  }
}

werden jetzt in Klammern eingeschlossen und durch Kommas getrennt:

_.orderBy(this.users, ['name', 'last_login'], ['asc', 'desc'])

Eingebauter Textfilter ^Entfernt

Der im Text eingefügte Filter bleibt jedoch bestehen Funktioniert, aber alle eingebauten Filter wurden entfernt. Stattdessen wird empfohlen, für jeden Bereich spezialisiertere Bibliotheken zu verwenden. (Verwenden Sie beispielsweise date-fns zum Formatieren des Datums und accounting zum Formatieren der Währung).

Für jeden eingebauten Filter fassen wir grob zusammen, wie man ihn austauscht. Codebeispiele können in benutzerdefinierten Hilfsfunktionen, Methoden oder berechneten Eigenschaften geschrieben werden.

json Filter ersetzen

Es besteht keine Notwendigkeit, sie einzeln zu ändern, da Vue sie automatisch formatiert hat Sie, egal ob es sich um eine Zeichenfolge, eine Zahl, ein Array oder ein Objekt handelt. Wenn Sie die Funktion JSON.stringify von js zur Implementierung verwenden möchten, können Sie sie auch in eine Methode oder ein berechnetes Attribut schreiben.

ersetzt capitalize Filter

<p>{{ date | formatDate 'YY-MM-DD' timeZone }}</p>

ersetzt uppercase filter

<p>{{ date | formatDate('YY-MM-DD', timeZone) }}</p>

ersetztlowercase filter

text[0].toUpperCase() + text.slice(1)

Ersetzenpluralize Filter

Die pluralize-Bibliothek auf NPM kann diese Funktion sehr gut implementieren. Wenn Sie nur bestimmte Wörter pluralisieren oder eine bestimmte Ausgabe für einen bestimmten Wert ('0') festlegen möchten, können Sie den Pluralformatierungsfilter auch einfach anpassen:

text.toUpperCase()

Ersetzen des currency Filtern

Für einfache Probleme können Sie Folgendes tun:

text.toLowerCase()

In den meisten Fällen wird es immer noch seltsame Phänomene geben (z. B. 0.035.toFixed(2) Aufrunden, um 0.04 zu erhalten, aber 0.045 Selbst wenn Sie nach unten wählen, erhalten Sie immer noch 0.04). Um diese Probleme zu lösen, können Sie die Bibliothek accounting verwenden, um eine zuverlässigere Währungsformatierung zu erreichen.

Bidirektionaler Filter ^ersetzt

Einige Benutzer nutzen Bidirektional bereits gerne über v-model Filter zum Erstellen interessanter Eingaben mit sehr wenig Code. Obwohl bidirektionale Filter oberflächlich betrachtet einfach sind, können sie einige enorme Komplexitäten verbergen – sie können sogar dazu führen, dass Statusaktualisierungen langsam erfolgen und das Benutzererlebnis beeinträchtigt werden. Es wird empfohlen, stattdessen eine Komponente zu verwenden, die eine Eingabe umschließt, sodass Sie benutzerdefinierte Eingaben expliziter und funktionsreicher erstellen können.

Lass uns jetzt zur Demonstration eine bidirektionale Wechselkursfiltermigration durchführen:

Es funktioniert grundsätzlich gut, aber die verzögerten Statusaktualisierungen verursachen seltsames Verhalten. Klicken Sie beispielsweise auf das Tag Result und versuchen Sie, 9.999 in eines der Eingabefelder einzugeben. Wenn das Eingabefeld den Fokus verliert, wird sein Wert auf .00 aktualisiert. Wenn wir uns jedoch den gesamten Rechner ansehen, werden Sie feststellen, dass die gespeicherten Daten 9.999 sind. Was Benutzer sehen, ist keine echte Synchronisierung mehr!

Um zu einer robusteren Vue 2.0-Lösung zu wechseln, packen wir diesen Filter zunächst in eine neue <currency-input> Komponente:

Es ermöglicht uns um Verhaltensweisen hinzuzufügen, die nicht durch unabhängige Filter gekapselt werden können, z. B. die Auswahl des Inhalts des Eingabefeldfokus. Als nächstes extrahieren wir die Geschäftslogik aus dem Filter. Als nächstes legen wir alles in ein externes currencyValidatorObjekt :

Dies wird modularer sein, nicht nur einfacher zu Vue migrieren 2. Ermöglicht auch Ratenlücken und Formatierungen:

• Getrennt von Ihrem Vue-Code für Unit-Tests

• in Ihrer Anwendung Wird in anderen Teilen von verwendet des Programms, z. B. die Überprüfung einer API End Load

Nachdem wir diesen Validator extrahiert haben, können wir ihn auch bequemer in eine robustere Lösung einbauen. Diese seltsamen Zustände werden ebenfalls eliminiert, und es ist nicht mehr wahrscheinlich, dass Benutzer Fehler machen, genau wie das native Zahleneingabefeld des Browsers.

Allerdings sind wir bei den Filtern von Vue 1.0 immer noch eingeschränkt, daher ist es besser, komplett auf Vue 2.0 zu aktualisieren:

You You ist vielleicht aufgefallen:

• Jeder Aspekt unseres Eingabefelds ist expliziter und verwendet Lebenszyklus-Hooks und DOM-Ereignisse, um das versteckte Verhalten bidirektionaler Filter zu ersetzen.

• Wir können v-model jetzt direkt im benutzerdefinierten Eingabefeld verwenden. Es wird nicht nur mit dem normalen Eingabefeld verwendet, sondern bedeutet auch, dass unsere Komponente Vuex-freundlich ist.

• Da wir keine Filteroptionen mehr benötigen, um einen Rückgabewert zu haben, kann unsere Wechselkursarbeit tatsächlich asynchron durchgeführt werden. Das heißt, wenn wir viele Anwendungen haben, die sich mit Wechselkursen befassen, können wir diese Logik leicht verfeinern und daraus einen gemeinsamen Mikroservice machen.

Slots

Slot mit demselben Namen Entfernen

ist veraltet. Sobald ein Slot gerendert wurde, kann er an keiner anderen Stelle in derselben Vorlage erneut gerendert werden. Wenn Sie denselben Inhalt an verschiedenen Orten rendern möchten, können Sie ihn mit prop übergeben. <slot>

slotSlot Stilparameter Entfernen

<slot>slotFragmente, die über benanntes eingefügt wurden, behalten nicht mehr die Parameter von bei. Bitte verwenden Sie ein Umhüllungselement, um das Styling zu steuern. Oder wählen Sie einen fortgeschritteneren Ansatz: Inhalte programmgesteuert ändern:

Besondere Eigenschaften

keep-alivekeep-alive Das Attribut ersetzt

keep-alive<transition>

, das kein spezielles Attribut mehr, sondern eine umschlossene Komponente ist, ähnlich zu <keep-alive>, wie zum Beispiel:

function pluralizeKnife (count) {
  if (count === 0) {
    return 'no knives'
  } else if (count === 1) {
    return '1 knife'
  } else {
    return count + 'knives'
  }
}

Dies kann in Unterkomponenten mit mehreren Zuständen verwendet werden

:<keep-alive>

'$' + price.toFixed(2)

verschiedene Unterkomponenten enthält, sollte es jede Unterkomponente separat beeinflussen. Nicht nur die erste, sondern alle untergeordneten Komponenten werden ignoriert. <transition>

<keep-alive>
  <component v-bind:is="view"></component>
</keep-alive>

.

Berechnete Interpolation innerhalb von Attributen Entfernen

<keep-alive>
  <todo-list v-if="todos.length > 0"></todo-list>
  <no-todos-gif v-else></no-todos-gif>
</keep-alive>

<transition>
  <keep-alive>
    <component v-bind:is="view"></component>
  </keep-alive>
</transition>

<button class="btn btn-{{ size }}"></button>

<button v-bind:class="'btn btn-' + size"></button>

Berechnete Interpolation innerhalb der Eigenschaft finden

HTML Berechnete Interpolation Entfernt

{{{ foo }}}v-htmlDie berechnete Interpolation von HTML () wurde entfernt und durch die

Einzelbindung^Ersetzt

Einzelbindung ({{* foo }}) Wurde ersetzt durch die neue v-onceRichtlinie.

Antwort

vm.$watchvm.$watch geändert

vm.$watch

Über vm.$watch erstellte Beobachter werden jetzt aktiviert, wenn die Komponente gerendert wird. Dadurch können Sie den Status aktualisieren, bevor die Komponente gerendert wird, ohne unnötige Aktualisierungen vorzunehmen. Sie können beispielsweise den Wert der Komponente selbst aktualisieren, indem Sie Änderungen an den Requisiten der Komponente beobachten. updated

Führen Sie den Test aus. Wenn es Beobachter gibt, die von der alten Methode abhängen, werden fehlgeschlagene Tests angezeigt.

vm.$setvm.$set

vm.$setÄnderungVue.set

Führen Sie das

Veraltete Verwendung findenvm.$delete

vm.$deleteVue.delete Änderung

Array.prototype.$set ^Veraltet

Verwenden Sie Vue.set Anstelle der

Array.prototype.$removeArray.prototype.$remove Entfernen

Array.prototype.splice

und ersetzen Sie es durch

<button v-bind:class="buttonClasses"></button>

computed: {
  buttonClasses: function () {
    return 'btn btn-' + size
  }
}

.

Vue.setVue.delete und auf Vue-Instanzen entfernen

Vue.setVue.delete $data

.

vm.$dataErsetzen Entfernen

vm.$get ^{Durch Entfernen von}

können die Antwortdaten direkt abgerufen werden.

rund um das DOM Instanzmethode von

vm.$appendTovm.$appendTo Entfernen

methods: {
  removeTodo: function (todo) {
    var index = this.todos.indexOf(todo)
    this.todos.splice(index, 1)
  }
}

vm.$beforevm.$before

Entfernen

methods: {
  removeTodo: function (index) {
    this.todos.splice(index, 1)
  }
}

zu finden. Wenn etwas fehlt, lesen Sie bitte die
Konsolenfehlermeldung

vm.$aftervm.$after

myElement.appendChild(vm.$el)

myElement.parentNode.insertBefore(vm.$el, myElement)

vm.$remove ^Entfernen

DOM verwenden Native Methode:

myElement.parentNode.insertBefore(vm.$el, myElement.nextSibling)

zugrunde liegende Instanzmethoden

vm.$evalvm.$eval Entfernen

.

vm.$interpolatevm.$interpolate

Entfernen

aus, um
zu finden. Wenn etwas fehlt, lesen Sie bitte die

. vm.$log

Instanz-DOM-Optionen

replace: falseersetzen: false Entfernen

replace: false

Jetzt ersetzen Komponenten immer diejenigen, an die sie gebunden sind bestimmte Elemente. Um das Verhalten von

myElement.parentNode.appendChild(vm.$el)

vm.$el.remove()

Standort verwendet.

Vue.config.debug Vue.config.debug

Entfernen

Führen Sie das
Migrationstool

enthält. Vue.config.async

Führen Sie das Vue.config.delimitersMigrationstool aus, um Instanzen mit zu finden.

Vue.config.delimiters

Vue.config.unsafeDelimiters ^Entfernen

HTML-Interpolationersetzt durch v-html.

Globale API

Mit el Die Vue.extend ^entfernte

el-Option wird in Vue.extend nicht mehr verwendet. Nur in Instanzerstellungsparametern verfügbar.

Vue.elementDirectiveVue.elementDirective Entfernen

Vue.partial ^Entfernt

Teile wurden entfernt und durch explizitere Daten ersetzt Fluss zwischen Komponenten – Requisiten. Sofern Sie keinen teilweise leistungskritischen Bereich verwenden, empfiehlt es sich, stattdessen einfach eine normale Komponente zu verwenden. Wenn Sie einen Teil von name dynamisch binden, können Sie dynamische Komponente verwenden.

Wenn Sie Teilkomponenten in leistungskritischen Teilen Ihrer Anwendung verwenden, sollten Sie ein Upgrade auf Funktionskomponenten durchführen. Sie müssen in reinen JS/JSX-Dateien vorliegen (nicht in .vue-Dateien) und zustands- und instanzlos sein, genau wie Teildateien. Dadurch wird das Rendern extrem schnell.

Ein Vorteil von Funktionskomponenten gegenüber Partialkomponenten besteht darin, dass sie dynamischer sein können, da sie Ihnen den Zugriff auf die volle Leistungsfähigkeit von JavaScript ermöglichen. Allerdings ist dies mit Kosten verbunden. Wenn Sie noch nie ein Framework für gerenderte Komponenten verwendet haben, kann es länger dauern, bis Sie es erlernt haben.