Observateurs, composants et contrôle de routage dans Vue.js

Cette fois, je vais vous présenter les Watchers, les composants et le contrôle de routage dans Vue.js. Quelles sont les précautions pour les Watchers, les composants et le contrôle de routage dans Vue.js ? Ce qui suit est un cas pratique, jetons un coup d'œil.

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 scène :

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

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 de déplacement :

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

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

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

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

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 ! En adhérant au principe d'être paresseux si vous le pouvez, 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)
})

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 : La clé du routeur qui prend un énorme coup

Restauration de la scène :

La scène suivante a vraiment brisé 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 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 exige que chaque composant ne puisse avoir qu'un seul élément Root, 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 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>
 )
}

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

Point clé : ce mouvement est infiniment puissant, assurez-vous de 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 du 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>

possède les points d'optimisation suivants :

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

vue axios调用接口时请求超时

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!