Troisième question d'entretien : veuillez parler de l'implémentation de la fonction de filtre dans Vue

L'utilisation de filtres dans Vue

Réfléchissons à la raison pour laquelle il existe un filtre alors qu'il existe des méthodes, car l'efficacité de mise en œuvre du filtre est bien supérieure à celle des méthodes.

Jetez un œil à la définition officielle :

Vue.js vous permet de personnaliser des filtres qui peuvent être utilisés pour certains formats de texte courants. Les filtres peuvent être utilisés à deux endroits : interpolation à double accolade et expressions v-bind (cette dernière est prise en charge à partir de la version 2.1.0+). Des filtres doivent être ajoutés à la fin de l'expression JavaScript, indiqués par le symbole « pipe » :

1. Filtre local (le plus fréquemment utilisé)

grammaire

modèle

<div>{
   
   { name | judgeRole }}</div>
//或者
<div v-bind:id="rawId | formatId"></div>

Après une opération, le filtre ci-dessus deviendra : _s(_f("capitalize")(message)).

_f : Cette fonction est en fait un alias de solveFilter. Sa fonction est de trouver le filtre à partir de _this.$options.filter et de le renvoyer. _s
: Cette fonction est un alias de la fonction toString. Sa fonction est d'obtenir le résultat filtré et transmettez-le à la fonction toString(). , le résultat sera enregistré dans l'attribut text du VNode et le résultat sera renvoyé pour restituer directement la vue.

Le principe de la fonction _f

La fonction _f recherche en fait le filtre. Si le filtre est trouvé, elle renvoie le filtre. S'il n'est pas trouvé, elle renvoie la même valeur que le paramètre. Son code est en fait très simple :

import {identity, resolveAssets} from 'core/util/index'

export function resolveFilter(id){
  return resolveAssets(this.$options, 'filters', id, true) || identity
}

Concentrons-nous sur ce que fait solveAssets.

export function resolveAsset (options, type, id, warnMissing){
  if(typeof(id) !== 'string'){
    return
  }
  
  const assets = options[type]
  if(hasOwn(assets, id)) return assets[id]
  const camelizedId = camelize(id)
  if(hasOwn(assets, camelizedId)) return assets[camelizedId]
  const PascalCaseId = capitlize(camelizedId)
  if(hasOwn(assets, PascalCaseId)) return assets[PascalCaseId]
  
  //检查原型链
  const res assets[id] || assets[camelizedId] || PascalCaseId
  if(process.env.NODE_ENV!=='production'&& warnMissing&&!res){
    warn('Fail to resolve' + type.slice(0,-1)+':'+id, options)
  }
  return res
}

En fait, son processus de recherche est également très simple, effectuant principalement les opérations suivantes (l'id est l'identifiant du filtre) :

1. Déterminez si l'identifiant du filtre est une chaîne, sinon, terminez-le.
2. Utilisez des actifs pour stocker le filtre. 3.
La fonction hasOwn vérifie si les actifs eux-mêmes ont un attribut id. Si c'est le cas, elle renvoie.
4. L'attribut La fonction hasOwn vérifie si les actifs eux-mêmes ont un identifiant camel-case. Attribut, s'il existe, il renvoie
5. La fonction hasOwn vérifie si les actifs eux-mêmes ont l'attribut id avec la première lettre en majuscule. S'il existe, il renvoie
6. S'il n'existe toujours pas, rendez-vous sur la chaîne de prototypes pour le trouver. S'il ne le trouve pas, un avertissement sera imprimé.

Principe d'analyse du filtre

Pensons-y, comment l'analyseur analyse-t-il la syntaxe du filtre ? En fait, il existe une telle fonction dans Vue pour analyser la syntaxe du filtre :parseFilters

Son principe est d'analyser la liste de filtres puis 循环过滤器列表de la fusionner 拼接字符串.

scénario

filter：{
    judgeRole(val) {
      if (val === '0') {
        return '平台'
      } else if (val === '1') {
        return '企业'
      } else if (val === '2') {
        return '企业用户'
      } else {
        return ''
      }
    }

}

illustrer

dans la fonction filtre valuese trouve |la valeur précédente, qui équivaut au premier paramètre
Une valeur doit être renvoyée dans la fonction filtre, qui est le résultat de notre traitement de format
En termes simples, lorsqu'un filtre est lié à un élément de données, il appellera la fonction du filtre correspondant à chaque fois que les données sont restituées.

Combat réel

Utilisez vue-cli pour télécharger un projet par défaut. J'utilise vue/cli4le répertoire par défaut comme suit

1. componentsCréez un nouveau filtre local sous le dossier FilterLoc.vueet écrivez le code suivant. Notre objectif est de changer la sunwukongpremière lettre en majuscule

<template>
    <div>{
   
   {name | capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'sunwukong'
        }
    },
    filters:{
        //当value改变的时候，他会执行这个函数
        capitalize:function (value) {
            //一定要返回一个值才能在组件中正常显示
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
}
</script>

2. Nous App.vuel'introduisons et le mappons en composants

<template>
    <div><filter-loc></filter-loc></div>
</template>

<script>
import FilterLoc from '@/components/FilterLoc'
export default {
    components:{
        FilterLoc
    }
}
</script>

3. Exécutez le projet et observez l'effet. sunwukongLa première a été en majuscule.

2. Filtre global

1. Nous pouvons définir des filtres globaux dans le fichier d'entrée, ou dans d'autres fichiers. Ici, nous changeons la dernière lettre initiale en majuscule.

main.js

/* 定义全局过滤器 */
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  const length = value.length - 1
  value = value.toString()
  return value.slice(0,length) + value.charAt(length).toUpperCase() 
})

2. componentsCréez-en un nouveau sous le dossier FilterGlo.vuepour utiliser le filtre global et écrivez le code suivant pour utiliser directement le filtre.

<template>
    <div>{
   
   {name | capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'zhubajie'
        }
    }
}
</script>

3. Nous App.vuel'introduisons et le cartographions en composants, exécutons le projet pour observer l'effet

Note
4. En fait, nous venons de définir deux idfiltres identiques, mais nous avons constaté que le local n'a pas changé, nous avons donc découvert que la priorité du filtre : le local a une priorité plus élevée que le global ;

3. Filtres en ligne

grammaire

<div>{
   
   { message | filterA | filterB }}</div>

Le paramètre reçu par ce dernier filtre est la valeur de retour du paramètre précédent.

Combat réel

1. componentsCréez-en un nouveau sous le dossier FilterSer.vuepour utiliser le filtre série, et écrivez le code suivant pour utiliser directement le filtre global (la dernière lettre est en majuscule) et notre filtre personnalisé (la première lettre est en majuscule)

<template>
    <div>{
   
   {name|initalWord|capitalize}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'shawujing'
        }
    },
    filters:{
        initalWord:function (value) {
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
        }
    }
}
</script>

2. Nous App.vuel'avons introduit et cartographié en composants, exécuté le projet pour observer l'effet et constaté que les deux sélecteurs étaient utilisés.

4. Paramètres de filtre

grammaire

<div>{
   
   { message | filterA('arg1', arg2) }}</div>

Combat réel

Créez-en un nouveau sous componentsle dossier FilterParam.vuepour utiliser les paramètres de filtre et écrivez le code suivant pour définir un filtre et transmettre les paramètres.

<template>
    <div>{
   
   {name|paramsFil('白骨精','白龙马')}}</div>
</template>

<script>
export default {
    data(){
        return {
            name:'师徒四人'
        }
    },
    filters:{
        paramsFil:function (value,arg1,arg2) {
            console.log(value,arg1,arg2)
            return value + arg1 + arg2
        }
    }
}
</script>

Nous App.vuel'avons introduit et cartographié en composants, et avons exécuté le projet pour observer l'effet avec les paramètres requis.

Les paramètres transmis sont filterA('arg1', arg2)les deux derniers paramètres du filtre.

Ce filtre est déjà très complet, et j'espère qu'il sera d'une certaine aide à tous les collègues. Si vous répondez à cette question sur le filtre dans l'interview, il est déjà très complet, car il inclut des conditions de poids spatial, des conditions multiparamétriques, et des conditions multi-filtres, de manière globale. Je souhaite également à mes collègues du succès dans leur travail et de l'harmonie au sein de leurs familles.