Eine kurze Analyse der Verwendung der Funktionen setup() und reactive() in vue3

In diesem Artikel erfahren Sie mehr über die Grundkonzepte der kombinierten API, das Konzept der Eingabefunktion setup() und die Verwendung von reactive() im vue3-Projekt. Ich hoffe, dass er für alle hilfreich ist! 1. Kombinierter API-Vergleich der Vue2-Projektstruktur stimmte zu.

2. Nachteile: Bei großen Projekten ist die Wiederverwendung, Verwaltung und Wartung von Code nicht förderlich.

3. Die Daten und die Geschäftslogik derselben Funktion sind an N Stellen in derselben Datei verstreut. Da die Geschäftskomplexität zunimmt, müssen wir häufig Daten () und Methoden verarbeiten

In vue3

1 Vorteile: Daten und Geschäftslogik derselben Funktion können zur einfachen Wiederverwendung und Wartung gemeinsam organisiert werden.
2. Nachteile: Es erfordert eine gute Codeorganisation und Aufteilungsfähigkeiten und ist nicht so einfach zu starten wie Vue2.
3. Erläuterung: Hinweis: Um allen einen besseren Übergang zur Vue3.0-Version zu ermöglichen, wird derzeit die Schreibmethode der Vue2.x-Options-API unterstützt. 2. Die Verwendung der Funktion setup() Vue3. Wird zum Ersetzen von Daten (), Methoden (), berechnet () und anderen Konfigurationselementen in Vue2 verwendet. setup() bietet eine präzisere Schreibmethode und kann die von Vue3 bereitgestellte Kompositions-API besser nutzen. Die Funktion setup() akzeptiert zwei Parameter: props und context. Unter diesen sind Requisiten die von der Komponente empfangenen Eigenschaftswerte, und der Kontext enthält einige Konfigurationsinformationen der Komponente.
1. Was ist das: Setup ist ein neues Komponentenkonfigurationselement in Vue3, das als Eingabefunktion der Kombinations-API dient.

2. Ausführungszeitpunkt: Wird vor der Instanzerstellung aufgerufen, sogar früher als beforeCreate in Vue2. 3. Hinweis: Da die Instanz beim Ausführen des Setups nicht erstellt wurde, können die Daten in Daten und Methoden nicht direkt im Setup verwendet werden, sodass dies im Vue3-Setup ebenfalls an undefiniert gebunden ist.

• Obwohl die Daten- und Methodenkonfigurationselemente in Vue2 auch in Vue3 verwendet werden können, wird nicht empfohlen, die Daten und Methoden in die Setup-Funktion zu schreiben und über

  return zurückzugeben, was direkt verwendet werden kann in der Vorlage
(Im Allgemeinen kann Setup keine asynchrone Funktion sein).
• 2.2.setup() erste Erfahrung

App.vue

<template>
    <h1 @click="say()">{{ msg }}</h1>
</template>
<script>
    export default {
        setup() {
            const msg = &#39;Hello Vue3&#39;
            const say = () => {
                console.log(msg)
            }
            return { msg, say }
        },
    }
</script>

Effektansicht:

Hinweis: Data() und Methoden ähnlich wie vue2 müssen im Gegenzug geschrieben werden, bevor sie verwendet werden können Das Ergebnis heißt. 【Ergänzende kleine Interviewfragen】Muss die Rückgabe im Setup nur ein Objekt sein? (Setup kann auch eine Rendering-Funktion zurückgeben)

App.vue

<script>
    import { h } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            return () => h(&#39;h2&#39;, &#39;Hello Vue3&#39;)
        },
    }
</script>

Die Konsole gibt Hello Vue3 mit dem h2-Tag aus.

2.3.reactive()-Funktion

• Verwenden Sie die reaktive Funktion, um das Array in reaktionsfähige Daten zu verpacken. reaktiv ist eine Funktion, die verwendet wird, um gewöhnliche Objekte/Arrays zur Verwendung in reaktive Daten zu verpacken. Sie kann grundlegende Datentypen nicht direkt verarbeiten (da sie auf Proxy basiert und Proxy nur Objekte vertreten kann).

• Zum Beispiel, wenn ich ein Bedürfnis habe: Klicken Sie, um die aktuellen Zeileninformationen zu löschen.

  App.vue

• In diesem Fall verwenden Sie reactive(), um das Array zu umschließen, um es zu responsiven Daten zu machen. Vergessen Sie nicht,

  <template>
      <ul>
          <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
      </ul>
  </template>
  
  <script>
      export default {
          name: &#39;App&#39;,
          setup() {
              const arr = [&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]
              const removeItem = (index) => {
                  arr.splice(index, 1)
              }
              return {
                  arr,
                  removeItem,
              }
          },
      }
  </script>

zu importieren. Jetzt ist die Seite responsiv, löschen Sie, wenn Sie darauf klicken, die Seite reagiert

Ähnlich: wir Verwenden Sie reactive(), um unsere Objekte zu umschließen, und verwenden Sie

<template>
    <ul>
        <li v-for="(item, index) in arr" :key="item" @click="removeItem(index)">{{ item }}</li>
    </ul>
</template>

<script>
    import { reactive } from &#39;vue&#39;
    export default {
        name: &#39;App&#39;,
        setup() {
            const arr = reactive([&#39;a&#39;, &#39;b&#39;, &#39;c&#39;])
            const removeItem = (index) => {
                arr.splice(index, 1)
            }
            return {
                arr,
                removeItem,
            }
        },
    }
</script>

Interpretation des obigen Codes:

Ich habe das Eingabefeld definiert, die Vorgänge zum Löschen und Hinzufügen von Ereignissen definiert und die bidirektionale Bindung durchgeführt v-Modell Passen Sie die Daten an, um das Hinzufügen und Löschen meiner Daten abzuschließen.

Haben Sie inzwischen ein klareres Verständnis für die Verwendung von setup()? Vereinfachen wir unten unsere Schreibmethode.

2.3.1 Weitere Extraktion von reactive()

Optimierung: Extrahieren Sie die Daten und Geschäftslogik derselben Funktion in eine Funktion, wodurch der Code besser lesbar und einfacher wiederverwendbar ist.

<template>
    <form @submit.prevent="handleSubmit">
        <input type="text" v-model="user.id" />
        <input type="text" v-model="user.name" />
        <input type="submit" />
    </form>
    <ul>
        <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
    </ul>
</template>

<script>
    import { reactive } from &#39;vue&#39;
    function useRemoveItem() {
        const state = reactive({
            arr: [
                {
                    id: 0,
                    name: &#39;ifer&#39;,
                },
                {
                    id: 1,
                    name: &#39;elser&#39;,
                },
                {
                    id: 2,
                    name: &#39;xxx&#39;,
                },
            ],
        })
        const removeItem = (index) => {
            state.arr.splice(index, 1)
        }
        return { state, removeItem }
    }
    function useAddItem(state) {
        const user = reactive({
            id: &#39;&#39;,
            name: &#39;&#39;,
        })
        const handleSubmit = () => {
            state.arr.push({
                id: user.id,
                name: user.name,
            })
            user.id = &#39;&#39;
            user.name = &#39;&#39;
        }
        return {
            user,
            handleSubmit,
        }
    }
    export default {
        name: &#39;App&#39;,
        setup() {
            const { state, removeItem } = useRemoveItem()
            const { user, handleSubmit } = useAddItem(state)
            return {
                state,
                removeItem,
                user,
                handleSubmit,
            }
        },
    }
</script>

将方法抽离出来，用类似于导入的方式进行一个抽离，将数据与方法放在一起，便于我们的统一管理。

2.3.2reactive()再进行进一步文件拆分并且引入

App.vue

<template>
  <form >
      <input type="text" v-model="user.id" />
      <input type="text" v-model="user.name" />
      <button type="submit" @click.prevent="submit">提交</button>
  </form>
  <ul>
      <li v-for="(item, index) in state.arr" :key="item.id" @click="removeItem(index)">{{ item.name }}</li>
  </ul>
</template>

<script>
import {useRemoveItem,handleSubmit} from &#39;./hooks&#39;
  export default {
      name: &#39;App&#39;,
      setup() {
          const { state, removeItem } = useRemoveItem()
          const { user, submit } = handleSubmit(state)
          return {
              state,removeItem,user,submit
          }
      },
  }
</script>

hooks/index.js

import { reactive } from 'vue'
export const useRemoveItem=()=> {
  const state= reactive( {
          arr: [
                    {
                        id: 0,
                        name: 'ifer',
                    },
                    {
                        id: 1,
                        name: 'elser',
                    },
                    {
                        id: 2,
                        name: 'xxx',
                    },
                ]
              })
  const removeItem=(index)=>{
      state.arr.splice(index,1)
            console.log(state.arr);
          }
      return { state, removeItem }
}
export const handleSubmit=(state)=>{
  const user = reactive({
                id: '',
                name: '',
            })
            console.log(1);
  const submit = () => {
       state.arr.push({
        ...user
       })
       user.id = ''
       user.name = ''
            }
      return { user, submit }
}

（学习视频分享：vuejs入门教程、编程基础视频）

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung der Funktionen setup() und reactive() in vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!