Résumé de plusieurs points à connaître pour améliorer Vue.js

Cette fois, je vais vous apporter un résumé de ce que vous devez savoir sur l'amélioration de Vue.js. Quelles sont les précautions pour l'amélioration de Vue.js. Voici des cas pratiques, jetons un coup d'œil. .

La première astuce : des observateurs qui simplifient la complexité

Restauration de scène :

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

Lorsque le composant est créé, nous obtenons la liste une fois et surveillons la zone de saisie en même temps. Chaque fois qu'un changement se produit, nous obtenons à nouveau la liste filtrée. Ce scénario est très courant. Existe-t-il un moyen de l'optimiser ?

Analyse des mouvements :

Premièrement, dans watchers, vous pouvez directement utiliser le nom littéral de la fonction et deuxièmement, déclarer immédiat: true signifie qu'il sera exécuté immédiatement lors de la création du composant.

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

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

Restauration de scène :

import BaseButton from './baseButton'
import BaseIcon from './baseIcon'
import BaseInput from './baseInput'
export default {
 components: {
  BaseButton,
  BaseIcon,
  BaseInput
 }
}

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

Nous avons écrit un tas de composants d'interface utilisateur de base, 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 des mouvements :

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

Nous ajoutons un fichier appelé global.js dans le dossier des composants et utilisons webpack pour regrouper 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)
})

Enfin, nous importons « components/global.js » dans main.js, et nous pouvons ensuite utiliser ces composants de base à tout moment et n'importe où sans les introduire manuellement.

Troisième coup : Clé du routeur qui enlève tout l'argent du fond du chaudron

Restauration de scène :

La scène suivante brise vraiment le cœur de nombreux programmeurs... Tout d'abord, 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 consiste à écouter les modifications 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){
 }
}

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

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

Analyse des déplacements :

Alors, comment pouvons-nous obtenir cet 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éé. (Bien que certaines performances soient perdues, des bugs infinis sont évités). 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>

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

. Analyse des déplacements :

Existe-t-il un moyen de résoudre ce problème ? La réponse est oui, mais pour le moment, nous devons 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, telle que v-for, v-si. (reactjs abandonne 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>
 )
}

Cinquième coup : des composants haut de gamme qui gagnent sans aucun coup

Points importants : Ce mouvement est extrêmement puissant, assurez-vous de le maîtriser

Lorsque nous écrivons des composants, nous devons généralement 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>

Il y a plusieurs points d'optimisation comme suit :

1.每一个从父组件传到子组件的props,我们都得在子组件的Props中显式的声明才能使用。这样一来，我们的子组件每次都需要申明一大堆props, 而类似placeholer这种dom原生的property我们其实完全可以直接从父传到子，无需声明。方法如下：

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

$attrs包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。

2.注意到子组件的@focus=$emit('focus', $event)"其实什么都没做，只是把event传回给父组件而已，那其实和上面类似，我完全没必要显式地申明：

<input
  :value="value"
  v-bind="$attrs"
  v-on="listeners"
>
computed: {
 listeners() {
  return {
   ...this.$listeners,
   input: event => 
    this.$emit('input', event.target.value)
  }
 }
}

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

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

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

vue的新手入门教程

Vue项目怎样分环境打包

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!