Comment utiliser les fonctions setup() et reactive() dans vue3

1. Comparaison combinée de l'API vue2 structure du projet#🎜 🎜#

1. Avantages : Facile à prendre en main et à utiliser, l'emplacement d'écriture du code a été convenu.

• 2. Inconvénients : Pour les grands projets, il n'est pas propice à la réutilisation, à la gestion et à la maintenance du code.

• 3. Explication : Les données et la logique métier d'une même fonction sont dispersées à N endroits dans le même fichier. À mesure que la complexité métier augmente, nous avons souvent besoin de Traitement. allers-retours dans data() et méthodes #1. Avantages : les données et la logique métier de la même fonction peuvent être organisées ensemble pour faciliter la réutilisation et la maintenance.

• 2. Inconvénients : Cela nécessite une bonne organisation du code et des capacités de fractionnement, et il n'est pas aussi facile de démarrer que Vue2.

• 2. Utilisation de la fonction setup()
• #🎜 🎜#

  2.1 Concept de base de la fonction setup()

• Le setup() dans Vue3 est un nouvel élément de configuration de composant dans Vue3, utilisé pour remplacer le data() dans Vue2 , méthodes(), calculées() et autres éléments de configuration. setup() fournit une méthode d'écriture plus concise et peut mieux utiliser l'API de composition fournie par Vue3. La fonction setup() prend deux paramètres : props et context. Les valeurs de propriété reçues par le composant sont stockées dans les accessoires et certaines informations de configuration du composant sont contenues dans leur contexte.

2. Moment d'exécution : appelé avant la création de l'instance, encore plus tôt qu'avantCreate dans Vue2.

3 Remarque : étant donné que l'instance n'a pas été créée lors de l'exécution de l'installation, les données contenues dans les données et les méthodes ne peuvent pas être utilisées directement dans l'installation, donc la configuration de Vue3 est ici. également lié à indéfini.

Bien que les éléments de configuration des données et des méthodes dans Vue2 puissent également être utilisés dans Vue3, il n'est pas recommandé d'écrire les données et les méthodes dans la configuration. fonction, et Pour revenir via

directement dans le modèle (généralement, la configuration ne peut pas être une fonction asynchrone).

• 2.2.setup() première expérience

• App.vue

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

  Copier après la connexion
Vue des effets :

[Supplément petites questions d'entretien] Le retour en configuration doit-il n'être qu'un seul objet ? (le programme d'installation peut également renvoyer une fonction de rendu)

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

Copier après la connexion

La console imprime Hello Vue3 avec la balise h3.

2.3.reactive() fonction

App.vue

<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>

<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>

Copier après la connexion

J'ai défini la zone de saisie, défini les opérations de suppression et d'ajout d'événements et utilisé le modèle V pour lier les données de manière bidirectionnelle afin de terminer l'ajout et la suppression de mes données.
Comprenez-vous plus clairement l'utilisation de setup() maintenant ? Simplifions notre méthode d’écriture ci-dessous.

2.3.1 Extraction supplémentaire de reactive()

Optimisation : extraire les données et la logique métier de la même fonction en une seule fonction, coder Plus facile à lire et plus facile à réutiliser.

<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;
    export default {
        name: &#39;App&#39;,
        setup() {
            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)
            }

            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 {
                state,
                removeItem,
                user,
                handleSubmit,
            }
        },
    }
</script>

Rassembler les données et les méthodes pour faciliter notre gestion unifiée.

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 }
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!