[Organisation et partage] 8 conseils pratiques pour le développement de Vue

Cet article compile et partage 8 grandes compétences de développement Vue, y compris le découplage des paramètres de routage, les composants fonctionnels, la portée du style, l'utilisation avancée de la montre, la surveillance de plusieurs variables par la montre, etc. J'espère qu'il sera utile à tout le monde !

1. Découplage des paramètres d'itinéraire

Habituellement, lors de l'utilisation de paramètres d'itinéraire dans les composants, la plupart des gens feront ce qui suit.

export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}

L'utilisation de $route dans un composant entraîne un couplage fort avec sa route correspondante, limitant la flexibilité du composant en le restreignant à certaines URL. La bonne approche consiste à le découpler via des accessoires.

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: true
    }]
})

Après avoir défini l'attribut props de la route sur true, le composant peut recevoir les paramètres params via les accessoires à l'intérieur du composant. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end]

export default {
    props: [ id ],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

Vous pouvez également renvoyer des accessoires via le mode fonctionnel.

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})

2. Composant fonctionnel

Le composant fonctionnel est apatride, il ne peut pas être instancié et n'a aucun cycle de vie ni méthode. Créer des composants fonctionnels est aussi simple que d’ajouter une déclaration fonctionnelle à votre modèle. Il convient généralement aux composants qui reposent uniquement sur des modifications de données externes et améliore les performances de rendu grâce à sa légèreté. Tout ce dont le composant a besoin est transmis via les paramètres de contexte. Il s'agit d'un objet contextuel, voir la documentation pour les propriétés spécifiques. props voici un objet contenant toutes les propriétés liées.

<template functional>
    <div class="list">
        <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
            <p>{{item.title}}</p>
            <p>{{item.content}}</p>
        </div>
    </div>
</template>

Le composant parent utilise

<template>
    <div>
        <List :list="list" :itemClick="item => (currentItem = item)" />
    </div>
</template>

import List from  @/components/List.vue
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{
                title:  title ,
                content:  content
            }],
            currentItem:
        }
    }
}

3 Style Scope

Il est courant de modifier le style des composants tiers pendant le développement, mais en raison de l'isolation du style de l'attribut scoped, vous devrez peut-être le faire. supprimer la portée ou créer un nouveau style. Ces pratiques ont des effets secondaires (pollution du style des composants, manque d'élégance) et sont implémentées en utilisant la pénétration du style dans le préprocesseur CSS. Nous pouvons utiliser>>> ou /deep/ pour résoudre ce problème :

<style scoped>
Outer layer >>> .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

<style scoped>
/deep/ .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

4. L'utilisation avancée de watch

watch est déclenchée lorsque la propriété de l'auditeur change. Le composant est créé et exécuté immédiatement. Une façon qui pourrait venir à l'esprit serait de l'appeler une fois au cours du cycle de vie de la création, mais ce n'est pas une manière élégante de l'écrire, alors peut-être pourrions-nous utiliser quelque chose comme ceci.

export default {
    data() {
        return {
            name:  Joe
        }
    },
    watch: {
        name: {
            handler:  sayName ,
            immediate: true
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}

Écoute profonde

Lors de l'écoute d'un objet, lorsque les propriétés à l'intérieur de l'objet changent, la montre ne se déclenche pas, nous pouvons donc définir une écoute profonde pour celui-ci.

export default {
    data: {
        studen: {
            name:  Joe ,
            skill: {
                run: {
                    speed:  fast
                }
            }
        }
    },
    watch: {
        studen: {
            handler:  sayName ,
            deep: true
        }
    },
    methods: {
        sayName() {
            console.log(this.studen)
        }
    }
}

Déclenchez l'écouteur pour exécuter plusieurs méthodes

À l'aide de tableaux, vous pouvez définir plusieurs formes, notamment des chaînes, des fonctions et des objets.

export default {
    data: {
        name:  Joe
    },
    watch: {
        name: [
             sayName1 ,
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler:  sayName3 ,
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log( sayName1==> , this.name)
        },
        sayName2() {
            console.log( sayName2==> , this.name)
        },
        sayName3() {
            console.log( sayName3==> , this.name)
        }
    }
}

5.watch surveille plusieurs variables

watch elle-même ne peut pas surveiller plusieurs variables. Cependant, nous pouvons « écouter plusieurs variables » en renvoyant un objet avec une propriété calculée, puis en écoutant cet objet.

export default {
    data() {
        return {
            msg1:  apple ,
            msg2:  banana
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log( msg1 is change )
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log( msg2 is change )
                }
            },
            deep: true
        }
    }
}

6. Paramètres d'événement $event

$event est une variable spéciale de l'objet événement, qui nous fournit plus de paramètres disponibles pour implémenter des fonctions complexes dans certains scénarios. Événements natifs : se comporte de la même manière que l'objet événement par défaut dans les événements natifs.

<template>
    <div>
        <input type="text" @input="inputHandler( hello , $event)" />
    </div>
</template>

export default {
    methods: {
        inputHandler(msg, e) {
            console.log(e.target.value)
        }
    }
}

Événement personnalisé : représenté dans un événement personnalisé pour capturer la valeur générée par le composant enfant.

export default {
    methods: {
        customEvent() {
            this.$emit( custom-event ,  some value )
        }
    }
}

<template>
    <div>
        <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
            </my-list>
    </div>
</template>

export default {
    methods: {
        customEvent(index, e) {
            console.log(e) //  some value
        }
    }
}

7. Écouteur d'événements programmatique

Par exemple, définissez une minuterie lorsque la page est montée, et la minuterie doit être effacée lorsque la page est détruite. Cela ne semble pas poser de problème. Mais en y regardant de plus près, le seul but de this.timer est de pouvoir obtenir le numéro du timer avant Destroy, sinon cela ne sert à rien.

export default {
    mounted() {
        this.timer = setInterval(() => {
            console.log(Date.now())
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}

Il est préférable de n'accéder aux hooks de cycle de vie que si possible. Ce n’est pas un problème grave mais peut prêter à confusion. Nous pouvons résoudre ce problème en utilisant ou une fois pour écouter la destruction du cycle de vie des pages :

export default {
    mounted() {
        this.creatInterval( hello )
        this.creatInterval( world )
    },
    creatInterval(msg) {
        let timer = setInterval(() => {
            console.log(msg)
        }, 1000)
        this.$once( hook:beforeDestroy , function() {
            clearInterval(timer)
        })
    }
}

使用这种方法，即使我们同时创建多个定时器，也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。8.监听组件生命周期通常我们使用 $emit 监听组件生命周期，父组件接收事件进行通知。

子组件

export default {
    mounted() {
        this.$emit( listenMounted )
    }
}

父组件

<template>
    <div>
        <List @listenMounted="listenMounted" />
    </div>
</template>

其实有一种简单的方法就是使用@hook 来监听组件的生命周期，而不需要在组件内部做任何改动。同样，创建、更新等也可以使用这个方法。

<template>
    <List @hook:mounted="listenMounted" />
</template>

（学习视频分享：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!