Einführung in globale Methodenaufrufe und Mountmethoden in der Vue-Dokumentation

Vue.js ist ein beliebtes JavaScript-Framework, das viele globale Methoden und Eigenschaften bereitstellt, die es Entwicklern ermöglichen, Vue.js-Anwendungen einfach zu bedienen. In diesem Artikel werden die globalen Methodenaufruf- und Mountmethoden im Vue.js-Dokument vorgestellt, um Entwicklern dabei zu helfen, dieses Framework besser zu nutzen.

Globaler Methodenaufruf

In Vue.js beziehen sich globale Methoden auf Methoden, die in der Vue-Konstruktorfunktion definiert sind. Diese Methoden können von überall in der Anwendung aufgerufen werden, ohne ein Vue-Objekt zu instanziieren. Globale Methoden werden in zwei Typen unterteilt: gemountete und nicht gemountete.

Ungemountete globale Methoden

Vue.extend(options)

Die Methode Vue.extend() ermöglicht die Definition eines Unterkomponentenkonstruktors und die Rückgabe dieser Konstruktorfunktion. Bei dem übergebenen Optionsobjekt handelt es sich um die Komponentenoptionen, einschließlich der Daten, Methoden, Berechnungen, Überwachungsfunktionen, Lebenszyklusfunktionen und anderer Optionen der Komponente.

Verwenden Sie die Methode Vue.extend(), um den Komponentenkonstruktor zu definieren:

var MyComponent = Vue.extend({
  template: '<div>这是一个组件</div>'
})

Vue.nextTick(callback)

Führen Sie die Callback-Funktion aus, nachdem Vue das DOM aktualisiert hat. Das This der Callback-Funktion zeigt auf das Instanzobjekt. Diese Methode gibt ein Promise-Objekt zurück.

Verwenden Sie die Methode Vue.nextTick():

Vue.nextTick(function () {
  // 操作 DOM
})

Vue.set(target, key, value) und Vue.delete(target, key)

Die Methode Vue.set() fügt reaktionsschnell eine Eigenschaft zur Mitte des Zielobjekts hinzu . Die Methode Vue.delete() löscht reaktiv eine Eigenschaft aus dem Zielobjekt.

Verwenden Sie die Methoden Vue.set() und Vue.delete():

Vue.set(vm.someObject, 'b', 2)
Vue.delete(vm.someObject, 'a')

Vue.directive(id, [definition])

Definieren Sie globale Anweisungen.

Verwenden Sie die Vue.directive()-Methode:

Vue.directive('my-directive', {
  bind (el, binding, vnode, oldVnode) {
    // 操作 DOM
  }
})

Gemountete globale Methoden

Sie können globale Methoden in Vue.prototype oder Vue mounten, indem Sie einige Methoden des Vue-Objekts aufrufen.

Vue.use(plugin)

Installieren Sie das Vue.js-Plugin.

Verwenden Sie die Vue.use()-Methode:

// 引入插件
import myPlugin from './my-plugin'

// 安装插件
Vue.use(myPlugin)

Vue.mixin(mixin)

Definieren Sie ein globales Mixin, das die Optionen des Mixins in jeder Vue-Instanz zusammenführt.

Verwenden Sie die Vue.mixin()-Methode:

Vue.mixin({
  created: function () {
    console.log('全局混入')
  }
})

Vue.component(id, [definition])

Definieren Sie globale Komponenten.

Verwenden Sie die Vue.component()-Methode:

Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
})

Globale Methodenmontage

Zusätzlich zum Mounten der globalen Methode in Vue.prototype oder Vue können Sie sie auch am Instanzobjekt mounten, sodass Sie die globale Methode verwenden können Methode innerhalb der Komponentenmethode.

Verwenden Sie die Vue.mixin()-Methode, um globale Methoden in Komponenteninstanzen bereitzustellen, oder verwenden Sie Methoden oder berechnete Attribute in Komponentenoptionen, um globale Methoden aufzurufen.

Vue.mixin implementiert globale Methodenmontage

var myGlobalMethod = function () {
  // 全局方法
}

Vue.mixin({
  created: function () {
    this.myGlobalMethod = myGlobalMethod
  }
})

Methoden und ruft globale Methoden in

methods: {
  doSomething() {
    this.myGlobalMethod()
  }
}

computed

computed: {
  computedProperty() {
    return this.myGlobalMethod()
  }
}

Summary

Vue.js bietet viele globale Methoden und Attribute, die es Entwicklern ermöglichen, die App bequem zu bedienen. Globale Methoden werden in zwei Typen unterteilt: gemountete und nicht gemountete globale Methoden können direkt in Komponenten verwendet werden. Über die Vue.mixin()-Methode können globale Methoden am Instanzobjekt gemountet werden oder globale Methoden können mithilfe der Methoden und berechneten Attribute in den Komponentenoptionen aufgerufen werden. Die Verwendung globaler Methoden kann die Entwicklungseffizienz verbessern. Sie müssen jedoch auf die Lesbarkeit und Wartbarkeit des Codes achten, um den Missbrauch globaler Methoden zu vermeiden.

Das obige ist der detaillierte Inhalt vonEinführung in globale Methodenaufrufe und Mountmethoden in der Vue-Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!