Meilleures pratiques Vue.js (cinq conseils pour faire de vous un maître Vue.js)-tutoriel php-php.cn

Cet article a principalement pour but de partager avec vous les meilleures pratiques de Vue.js, cinq conseils pour faire de vous un maître de Vue.js, j'espère que cela pourra aider des amis dans le besoin

Pour la plupart des gens, maîtriser Vue. Après quelques API .js de base, vous pouvez déjà développer normalement des sites Web front-end. Mais si vous souhaitez utiliser Vue pour développer plus efficacement et devenir un maître de Vue.js, alors vous devez étudier sérieusement les cinq astuces que je vais vous apprendre ci-dessous.

Premier coup : Watchers simplifiés

Restauration de scène :

created(){
    this.fetchPostList()
},
watch: {
    searchInputValue(){
        this.fetchPostList()
    }
}

Copier après la connexion

Lorsque le composant est créé, on obtient la liste une fois, et à la en même temps Il est très courant de surveiller la zone de saisie et de réobtenir la liste filtrée à chaque fois qu'il y a un changement. Existe-t-il un moyen de l'optimiser ?

Analyse des mouvements :
Tout d'abord, dans les observateurs, vous pouvez utiliser directement le nom littéral de la fonction. Deuxièmement, en déclarant immédiat : true signifie qu'elle sera exécutée immédiatement lorsque ; le composant est créé.

watch: {
    searchInputValue:{
        handler: 'fetchPostList',
        immediate: true
    }
}

Copier après la connexion

Deuxième étape : enregistrement une fois pour toutes des composants

Restauration de la scène :

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'

export default {
  components: {
    BaseButton,
    BaseIcon,
    BaseInput
  }
}

Copier après la connexion

<BaseInput
  v-model="searchText"
  @keydown.enter="search"
/>
<BaseButton @click="search">
  <BaseIcon name="search"/>
</BaseButton>

Copier après la connexion

Nous avons écrit un tas de Les composants de base de l'interface utilisateur, et chaque fois que nous devons utiliser ces composants, nous devons d'abord les importer puis déclarer les composants, ce qui est très fastidieux ! Adhérant au principe d'être paresseux quand nous le pouvons, nous devons trouver des moyens d'optimiser !

Analyse de déplacement :
Nous devons utiliser le webpack d'artefacts et utiliser la méthode require.context() pour créer notre propre contexte (de module) afin d'obtenir des composants dynamiques automatiques. Cette méthode prend 3 paramètres : le répertoire du dossier à rechercher, si ses sous-répertoires doivent également être recherchés et une expression régulière pour faire correspondre les fichiers.

Nous ajoutons un fichier appelé global.js dans le dossier des composants et utilisons webpack pour empaqueter dynamiquement tous les composants de base requis dans ce fichier.

import Vue from 'vue'

function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1)
}

const requireComponent = require.context(
  '.', false, /\.vue$/
   //找到components文件夹下以.vue命名的文件
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)

  const componentName = capitalizeFirstLetter(
    fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
    //因为得到的filename格式是: './baseButton.vue', 所以这里我们去掉头和尾，只保留真正的文件名
  )

  Vue.component(componentName, componentConfig.default || componentConfig)
})

Copier après la connexion

Enfin nous sommes dans main.js import 'components/global.js', et nous pouvons alors utiliser ces composants de base à tout moment et n'importe où sans avoir à les introduire manuellement.

Troisième coup : La clé du routeur qui enlève l'argent par le bas

Restauration de la scène :
La scène suivante a vraiment brisé le cœur de nombreux programmeurs.. . Premièrement, par défaut, tout le monde utilise Vue-router pour implémenter le contrôle de routage.
Supposons que nous écrivions un site Web de blog et que l'exigence soit de passer de /post-page/a à /post-page/b. Ensuite, nous avons découvert avec surprise que les données n'étaient pas mises à jour après le saut de page ? ! La raison en est que vue-router a découvert "intelligemment" qu'il s'agissait du même composant, puis il a décidé de réutiliser ce composant, donc la méthode que vous avez écrite dans la fonction créée n'a pas été exécutée du tout. La solution habituelle est d'écouter les changements dans $route pour initialiser les données, comme suit :

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
}, 
watch: {
  '$route': {
    handler: 'resetData',
    immediate: true
  }
},
methods: {
  resetData() {
    this.loading = false
    this.error = null
    this.post = null
    this.getPost(this.$route.params.id)
  },
  getPost(id){

  }
}

Copier après la connexion

Le bug est résolu, mais est-ce trop inélégant d'écrire comme ça à chaque fois ? Adhérant au principe d'être paresseux si vous le pouvez, nous espérons que le code sera écrit comme ceci :

data() {
  return {
    loading: false,
    error: null,
    post: null
  }
},
created () {
  this.getPost(this.$route.params.id)
},
methods () {
  getPost(postId) {
    // ...
  }
}

Copier après la connexion

Analyse des mouvements :

Alors, comment pouvons-nous obtenir un tel effet ? La réponse est d'ajouter une clé unique à la vue du routeur, de sorte que même s'il s'agit d'un composant public, tant que l'URL change, le composant sera recréé. (Même si cela perd un peu en performances, cela évite une infinité de bugs). En même temps, notez que j'ai mis la clé directement sur le trajet complet du parcours, faisant d'une pierre deux coups.

<router-view :key="$route.fullpath"></router-view>

Copier après la connexion

La quatrième astuce : la fonction de rendu omnipotente

Restauration de scène :
Vue exige que chaque composant ne puisse avoir qu'un seul élément racine lorsque vous en avez. plusieurs éléments racine, vue vous signalera une erreur

<template>
  <li
    v-for="route in routes"
    :key="route.name"
  >
    <router-link :to="route">
      {{ route.title }}
    </router-link>
  </li>
</template>


 ERROR - Component template should contain exactly one root element. 
    If you are using v-if on multiple elements, use v-else-if 
    to chain them instead.

Copier après la connexion

Analyse de déplacement :
Y a-t-il un moyen de la résoudre La réponse est oui, mais pour le moment, nous vous devez utiliser la fonction render() pour créer du HTML au lieu d'un modèle. En fait, l'avantage d'utiliser js pour générer du HTML est qu'il est extrêmement flexible et puissant, et vous n'avez pas besoin d'apprendre à utiliser l'API d'instructions à fonctions limitées de Vue, telles que v-for et v-if. (reactjs supprime complètement le modèle)

functional: true,
render(h, { props }) {
  return props.routes.map(route =>
    <li key={route.name}>
      <router-link to={route}>
        {route.title}
      </router-link>
    </li>
  )
}

Copier après la connexion

Cinquième coup : composants de haut niveau qui peuvent gagner sans aucun mouvement

Point clé : ce mouvement est extrêmement puissant, s'il vous plaît. assurez-vous de maîtriser
Lorsque nous écrivons des composants, la communication entre les composants parent et enfant est très importante. Habituellement, nous devons transmettre une série d'accessoires du composant parent au composant enfant, et en même temps le composant parent écoute une série d'événements émis par le composant enfant. Par exemple :

//父组件
<BaseInput 
    :value="value"
    label="密码" 
    placeholder="请填写密码"
    @input="handleInput"
    @focus="handleFocus>
</BaseInput>

//子组件
<template>
  <label>
    {{ label }}
    <input
      :value="value"
      :placeholder="placeholder"
      @focus=$emit(&#39;focus&#39;, $event)"
      @input="$emit(&#39;input&#39;, $event.target.value)"
    >
  </label>
</template>

Copier après la connexion

a les points d'optimisation suivants :

1 Pour chaque prop passé du composant parent au composant enfant, nous devons le déclarer explicitement dans les Props du. Le composant enfant peut être utilisé. De cette façon, nos composants enfants doivent déclarer de nombreux accessoires à chaque fois, mais pour les propriétés natives du DOM comme placeholer, nous pouvons en fait les transmettre directement du parent à l'enfant sans les déclarer. La méthode est la suivante :

    <input
      :value="value"
      v-bind="$attrs"
      @input="$emit(&#39;input&#39;, $event.target.value)"
    >

Copier après la connexion

$attrs contient des liaisons de propriétés (sauf classe et style) qui ne sont pas reconnues (et obtenues) comme accessoires dans la portée parent. Lorsqu'un composant ne déclare aucun accessoire, toutes les liaisons de portée parent sont incluses ici et les composants internes peuvent être transmis via v-bind="$attrs" - très utile lors de la création de composants de niveau supérieur.

2. Notez que le @focus=$emit('focus', $event)" du composant enfant ne fait rien. Il renvoie simplement l'événement au composant parent. Il est en fait similaire à ce qui précède. :

<input
    :value="value"
    v-bind="$attrs"
    v-on="listeners"
>

computed: {
  listeners() {
    return {
      ...this.$listeners,
      input: event => 
        this.$emit('input', event.target.value)
    }
  }
}

Copier après la connexion

$listeners包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

3.需要注意的是，由于我们input并不是BaseInput这个组件的根节点，而默认情况下父作用域的不被认作 props 的特性绑定将会“回退”且作为普通的 HTML 特性应用在子组件的根元素上。所以我们需要设置inheritAttrs:false，这些默认行为将会被去掉, 以上两点的优化才能成功。

结尾

掌握了以上五招，你就能在Vue.js的海洋中自由驰骋了，去吧少年。
陆续可能还会更新一些别的招数，敬请期待。