Partage de projet pratique Vue.js

Cette fois je vais partager avec vous un projet pratique de Vue.js. Quelles sont les précautions pour une utilisation pratique de Vue.js Voici des cas pratiques, jetons un oeil.

Pour la plupart des gens, après avoir maîtrisé quelques API de base de Vue.js, ils peuvent 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 la scène :

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

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

Analyse des mouvements :

Tout d'abord, dans les observateurs, vous pouvez directement utiliser le nom littéral de la fonction et deuxièmement, déclarer immédiate:true signifie qu'elle sera; exécuté immédiatement lors de la création du composant.

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

La deuxième astuce : l'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 a écrit un tas de 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 une demande dynamique automatique composants . 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 qui correspond aux 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)
})

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 avoir à les introduire manuellement.

La troisième astuce : 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... Allons utilisez-le d'abord par défaut. C'est Vue-router qui implémente 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 de surveiller 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){
 }
}

Le bug est résolu, mais est-ce 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 comme ceci :

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

Analyse des mouvements :

Comment pouvons-nous obtenir cet effet ? est pour la vue du routeur Ajoutez une clé unique afin 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>

La quatrième astuce : la fonction de rendu omnipotente

Restauration de scène :

vue nécessite que tous les composants ne puissent avoir un é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>

ERREUR - Le modèle de composant doit contenir exactement un élément racine
Si vous utilisez v-if sur plusieurs. éléments, utilisez v-else-if
pour les enchaîner à la place. Mais cette fois, 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, telles que v-for et v-if. (reactjs supprime complètement le modèle)

La cinquième astuce : des composants de haut niveau qui peuvent gagner sans aucune astuce

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

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

当我们写组件的时候，通常我们都需要从父组件传递一系列的props到子组件，同时父组件监听子组件emit过来的一系列事件。举例子：

//父组件
<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>

有下面几个优化点：

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项目步骤详解

怎样使用Node.js内Koa实现JWT用户认证

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!