Erste Schritte mit Vue3-Funktionen von Zero Basics: Erlernen Sie schnell die Kernmethoden von Vue3

Mit der kontinuierlichen Weiterentwicklung der Front-End-Technologie hat sich Vue.js zu einem sehr beliebten Front-End-Framework entwickelt. In Vue 3, der neuesten Version von Vue.js, wurden neue Funktionen und Methoden eingeführt und bestehende Funktionen und Methoden aktualisiert. In diesem Artikel stellen wir einige Kernfunktionen und -methoden von Vue 3 vor, um den Lesern einen schnellen Einstieg in das Vue 3-Framework zu erleichtern.

1. createApp

In Vue 3 verwenden wir die Funktion „createApp“, um eine Vue-Instanz zu erstellen. Die Funktion „createApp“ benötigt einen Parameter, bei dem es sich um ein Objekt handelt, das Anwendungsoptionen enthält. Der Beispielcode für die Verwendung der Funktion „createApp“ zum Erstellen einer Vue-Instanz lautet wie folgt:

const app = Vue.createApp({
  data() {
    return {
      message: 'Hello Vue 3!'
    }
  }
})

app.mount('#app')

Im obigen Code verwenden wir die Datenobjektdaten, um eine Nachrichtenvariable zu deklarieren, und verwenden dann die Funktion „createApp“, um eine Vue-Instanz zu erstellen. Verwenden Sie abschließend die Mount-Funktion, um die Vue-Instanz mit der ID-App am Element zu mounten.

2. reaktiv

In Vue 3 können wir die reaktive Funktion verwenden, um JavaScript-Objekte in reaktive Objekte umzuwandeln. Mit reaktiven Objekten können wir Änderungen an Objekten einfach überwachen und die Ansicht automatisch aktualisieren, wenn sich Eigenschaften des Objekts ändern. Der Beispielcode für die Verwendung der reaktiven Funktion zum Erstellen eines reaktiven Objekts lautet wie folgt:

const obj = { count: 0 }
const reactiveObj = Vue.reactive(obj)

console.log(reactiveObj.count) // 输出0

reactiveObj.count++

console.log(reactiveObj.count) // 输出1

Im obigen Code verwenden wir die reaktive Funktion, um das JavaScript-Objekt obj in das reaktive Objekt reactiveObj zu konvertieren. Wir können dann überprüfen, ob das reaktive Objekt ordnungsgemäß funktioniert, indem wir die count-Eigenschaft von reactiveObj ausgeben.

3. berechnet

In Vue 3 können wir die berechnete Funktion verwenden, um berechnete Eigenschaften zu erstellen. Eine berechnete Eigenschaft ist eine Eigenschaft, die vom Wert anderer Eigenschaften abhängt und deren Wert auf der Grundlage anderer Werte berechnet wird. Der Beispielcode zum Erstellen einer berechneten Eigenschaft mithilfe der berechneten Funktion lautet wie folgt:

const reactiveObj = Vue.reactive({
  count: 0
})

const computedVal = Vue.computed(() => {
  return reactiveObj.count * 2
})

console.log(computedVal.value) // 输出0

reactiveObj.count++

console.log(computedVal.value) // 输出2

Im obigen Code definieren wir eine berechnete Eigenschaft „computedVal“, deren Wert das Doppelte von „reactiveObj.count“ ist. Wenn sich der Wert von „reactiveObj.count“ ändert, wird der Wert von „computedVal“ automatisch aktualisiert.

4. watch

In Vue 3 können wir die Watch-Funktion verwenden, um Daten in der Vue-Instanz zu überwachen. Wenn sich Daten ändern, können wir bestimmte Aktionen durchführen. Der Beispielcode für die Verwendung der Watch-Funktion zum Überwachen von Daten in einer Vue-Instanz lautet wie folgt:

const reactiveObj = Vue.reactive({
  count: 0
})

Vue.watch(() => {
  return reactiveObj.count
}, (newVal, oldVal) => {
  console.log(`count变化了：${oldVal} -> ${newVal}`)
})

reactiveObj.count++ // 输出"count变化了：0 -> 1"

Im obigen Code definieren wir eine Watch-Funktion zum Überwachen von Änderungen in reactiveObj.count. Wenn sich der Wert von reactiveObj.count ändert, führt die Überwachungsfunktion die entsprechende Rückruffunktion aus.

5. bereitstellen und injizieren

In Vue 3 können wir die Funktionen „provide“ und „inject“ verwenden, um die Abhängigkeitsinjektion zwischen Komponenten zu implementieren. Die Funktionen „prove“ und „inject“ ermöglichen es übergeordneten Komponenten, Daten an untergeordnete Komponenten weiterzuleiten, ohne sie über Requisiten und Ereignisse weiterzuleiten. Der Beispielcode für die Abhängigkeitsinjektion mithilfe der Funktionen „prove“ und „inject“ lautet wie folgt:

const theme = Vue.reactive({
  color: 'red'
})

const ThemeProvider = {
  provide: {
    theme
  },
  template: `
    <div>
      <slot></slot>
    </div>
  `
}

const ThemeConsumer = {
  inject: ['theme'],
  template: `
    <div :style="{ color: theme.color }">
      <slot></slot>
    </div>
  `
}

const app = Vue.createApp({
  components: {
    ThemeProvider,
    ThemeConsumer
  }
})

app.mount('#app')

Im obigen Code definieren wir eine ThemeProvider-Komponente und eine ThemeConsumer-Komponente. Die ThemeProvider-Komponente verwendet die Provide-Funktion, um Theme-Daten für die Unterkomponente ThemeConsumer bereitzustellen. Die ThemeConsumer-Komponente verwendet die Inject-Funktion, um die Theme-Daten von der übergeordneten Komponente ThemeProvider abzurufen. Registrieren Sie abschließend die Komponenten ThemeProvider und ThemeConsumer bei der Vue-Instanz.

Zusammenfassung

Das Obige sind die fünf Kernfunktionen und -methoden von Vue 3. Durch das Erlernen dieser Kernfunktionen und -methoden können wir ein tieferes Verständnis der Framework-Struktur und der Funktionsmerkmale von Vue 3 erlangen. Gleichzeitig können wir Vue 3 auch besser nutzen, um effiziente, stabile und flexible Front-End-Anwendungen zu erstellen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit Vue3-Funktionen von Zero Basics: Erlernen Sie schnell die Kernmethoden von Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!