Une brève analyse de l'utilisation des fonctions setup() et reactive() dans vue3

Cet article vous parlera des concepts de base de l'API combinée, du concept de fonction d'entrée setup() et de l'utilisation de reactive() dans le projet vue3. J'espère qu'il sera utile à tout le monde !

1. Comparaison combinée des API vue2 structure du projet

Dans vue2

• 1. Avantages : facile à apprendre et à utiliser, l'emplacement d'écriture du code a été convenu.

• 2. Inconvénients : Pour les grands projets, cela 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 devons souvent traiter des allers-retours dans data() et méthodes

.

In vue3

• 1 Avantages : Les données et la logique métier d'une même fonction peuvent être organisées ensemble pour une réutilisation et une maintenance faciles.

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

• 3. Explication : Remarque : Afin de permettre à tout le monde de mieux passer à la version Vue3.0, la méthode d'écriture de l'API de l'option Vue2.x est actuellement prise en charge.

2. L'utilisation de la fonction setup()

2.1 Le 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 data(), METHODS(), Computed() et d'autres éléments de configuration dans Vue2. setup() fournit une méthode d'écriture plus concise et peut mieux utiliser l'API de composition fournie par Vue3. La fonction setup() accepte deux paramètres, les accessoires et le contexte. Parmi eux, les props sont les valeurs de propriété reçues par le composant, et le contexte contient certaines informations de configuration du composant.

• 1. Qu'est-ce que c'est : setup est un nouvel élément de configuration de composant dans Vue3, qui sert de fonction d'entrée de l'API de combinaison.

• 2. Calendrier 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 la configuration, les données contenues dans les données et les méthodes ne peuvent pas être utilisées directement dans la configuration, donc cela dans la configuration de Vue3 est également lié à undefined.

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é que les données et les méthodes soient écrites dans la fonction de configuration et renvoyées via return, qui peut être utilisé directement. dans le modèle (Généralement, la configuration ne peut pas être une fonction asynchrone).

Première expérience 2.2.setup()

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>

Vue d'effet :

Remarque : Data() et les méthodes similaires à vue2 doivent être écrites en retour avant de pouvoir être utilisées Le résultat est appelé.

【Petites questions d'entretien supplémentaires】Y a-t-il un seul objet qui peut être retourné lors de la configuration ? (le programme d'installation peut également renvoyer une fonction de rendu)

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>

La console imprime Hello Vue3 avec la balise h2.

Fonction 2.3.reactive()

Utilisez la fonction réactive pour envelopper le tableau dans des données réactives. reactive est une fonction utilisée pour envelopper des objets/tableaux ordinaires dans des données réactives à utiliser. Elle ne peut pas gérer directement les types de données de base (car elle est basée sur Proxy et Proxy ne peut que proxy des objets).

Par exemple, lorsque j'ai besoin : cliquez pour supprimer les informations de la ligne actuelle
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>

Affichez-la via vueTools, les données sont supprimées après avoir cliqué, mais il n'y a pas de rendu réel sur la page

Ceci Quand, utilisez reactive() pour envelopper le tableau afin de le rendre réactif aux données, n'oubliez pas d'importer

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

Maintenant, la page est réactive, supprimez lorsque vous cliquez dessus, la page est réactive

De même : nous utilisez reactive() pour envelopper nos objets et utilisez

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

Interprétation du code ci-dessus :

J'ai défini la zone de saisie, défini les opérations de suppression et d'ajout d'événements et exécuté la liaison bidirectionnelle via v-model Personnalisez les données pour terminer l'ajout et la suppression de mes données.
À présent, avez-vous une compréhension plus claire de l’utilisation de setup() ? 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 dans une fonction, rendant le code plus lisible 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;
    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入门教程、编程基础视频）

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!