Der Implementierungsprozess der dynamischen Filterung von Vue-Projektdaten

Der Inhalt dieses Artikels befasst sich mit dem Implementierungsprozess der dynamischen Filterung von Vue-Projektdaten. Ich hoffe, dass er für Freunde hilfreich ist.

Dieses Problem ist ein tatsächliches Szenario, auf das ich bei der Arbeit an einem Vue-Projekt gestoßen bin. Hier ist eine Aufzeichnung meiner Gedanken, nachdem ich auf das Problem gestoßen bin, und wie ich es schließlich gelöst habe (alte Programmierer haben schlechte Erinnerungen ...) und Der Prozess umfasst einige Vue-Quellcodekonzepte wie $mount, render watcher usw. Wenn Sie nicht viel darüber wissen, können Sie sich die Vue-Quellcode-Leseserie ansehen~

Das Problem ist folgendes: Die Seite wird vom Backend abgerufen. Die Daten bestehen aus Schlüsseln wie 0 und 1 und der entsprechenden Beziehung zwischen den durch diesen Schlüssel dargestellten Werten, wie z. B. 0-女 und 1-男, muss von einer anderen Datenwörterbuchschnittstelle abgerufen werden; beginnt

1. Nachdenken0 女Einige Leute sagen, dass dies nicht das ist, was der Filter

tun sollte. Das Problem ist jedoch, dass dieser Filter warten muss damit die asynchrone Datenwörterbuchschnittstelle zurückkehrt, bevor sie abgerufen werden kann. Wenn dieser Filter nicht gefunden wird, führt dies zu einem Fehler, der sich auf das nachfolgende Rendern auswirkt (weißer Bildschirm und undefinierter Fehler). >Ich habe zwei Lösungen im Sinn:

filter Ändern Sie die Schnittstelle auf Synchronisierung und rufen Sie die Datenwörterbuchschnittstelle synchron im $mount- oder

-Hook ab, um sicherzustellen, dass der registrierte Filter dies kann muss bei

abgerufen werden, um das Timing sicherzustellen. Dies führt jedoch zu einer Verlängerung der White-Screen-Zeit. Es wird daher nicht empfohlen, die Registrierung des Filters auf asynchron zu ändern , und benachrichtigt

, sich nach Erhalt des Filters selbst zu aktualisieren, damit Vues eigene Reaktionsfähigkeit genutzt werden kann. Durch das Aktualisieren der Ansicht wird das Rendern nicht blockiert, daher wird diese Methode zunächst im Folgenden übernommen.

1. beforeCreate2. Implementierungcreated$mountDa der Filter zu asset_types gehört, gibt es mehrere Schlussfolgerungen über die Zugriffskette von asset_types in Vue-Instanzen, siehe: Codepen - Filtertest

2. render watcher umfasst

   ,
und

. Alle folgenden

werden durch die vorherigen

in der untergeordneten Komponente kann nicht auf
1. in der übergeordneten Komponente zugreifen, kann jedoch auf das global registrierte

   zugreifen, das auf asset_types gemountet ist, was dem Quellcode src/core entspricht /util/ options.jsfilterscomponentsdirectivesasset_typesGlobale Registrierungsmethode Vue.asset_types, zum Beispiel werden die von Vue.filters registrierten Asset_types am

   der Root-Instanz ( von anderen Instanzen) und von allen in der Zukunft erstellten Vue-Instanzen geerbt, das heißt, alle in der Zukunft erstellten Vue-Instanzen können auf die Komponente

2. asset_types zugreifen Der Steckplatz ist auf den Ort beschränkt, an dem er definiert ist. Das heißt, in der Komponente, in der er definiert ist, kann nicht auf das asset_types der übergeordneten Komponente zugegriffen werden, sondern auf das global definierte $root.$options.asset_types.__proto__asset_types

kann auf die gleiche Weise zugegriffen werden, da die
3. in main.js Die 🎜>-Instanz ist die Root-Instanz und die darin registrierten

   werden auf $root statt auf $options.asset_types.__proto__

4. Gemäß den obigen Schlussfolgerungen können Sie mit dem Codieren beginnen ~

   asset_types2.1 Verwenden der Filter der Stammkomponenteasset_types

   Also das erste, was ich bedenke besteht darin, den zu registrierenden Filter auf der Root-Komponente zu mounten, damit andere Komponenten die Registrierung erhalten können, indem sie auf den
-Filter zugreifen. Hier ist die Implementierung:

5. {
     "SEX_TYPE": [
       { "paramValue": 0, "paramDesc": "女" },
       { "paramValue": 1, "paramDesc": "男" }
     ]
   }

   Registrieren Sie die js des Filtersnew Vue()

   <template>
     <p>
       {{ rootFilters( sexVal )}}
     </p>
   </template>
    
   <script type=&#39;text/javascript&#39;>
     import Vue from 'vue'
     import { registerFilters } from 'utils/filters'
    
     export default {
       data() {
         return {
           sexVal: 1  // 性别
         }
       },
       methods: {
         /* 根组件上的过滤器 */
         rootFilters(val, id = 'SEX_TYPE') {
           const mth = this.$root.$options.filters[id]
           return mth && mth(val) || val
         }
       },
       created() {
         // 把根组件中的filters响应式化
         Vue.util.defineReactive(this.$root.$options, 'filters', this.$root.$options.filters)
       },
       mounted() {
         registerFilters.call(this)
           .then(data =>
             // 这里获取到数据字典的data
           )
       }
     }
   </script>

   asset_typesDadurch reagieren die Filter auf der Stammkomponente und beim Rendern, da in der $root.$options.asset_types-Methode Zugriffe auf $root.$options.asset_types.__proto__ erstellt werden, die reagiert haben. Wenn also die asynchron erhaltenen Daten zugewiesen werden, wird das ausgelöst Rendern Sie den Render-Watcher dieser Komponente erneut und rufen Sie dann die
-Methode ab. Dann können Sie den Filter

erhalten. Warum registrieren Sie ihn dann nicht direkt bei der Vue.filter-Methode, denn

Datenänderungen auf

können nicht überwacht werden, und der globale Vue.filter registriert den Filter in der Stammkomponente

, sodass auf seine Änderungen nicht reagiert werden kann.

$rootDer Code hier kann noch verbessert werden, es gibt jedoch bestimmte Probleme mit dieser Methode. Erstens wird hier die instabile Methode verwendet. Darüber hinaus ist überall im Einsatz zu sehen, dass

Greift auf diese Weise auf die internen Eigenschaften der Vue-Instanz zu. Die Situation ist nicht sehr zivilisiert, aber auch verwirrend zu lesen.

Als dieses Projekt abgeschlossen war und auf den Test wartete, dachte ich darüber nach: Wer hat gesagt, dass Filter in Filtern platziert werden müssen? -, Sie können auch Mixin verwenden, um dies zu erreichen

2.2 使用mixin

使用mixin要注意一点，因为vue中把data里所有以_、$开头的变量都作为内部保留的变量，并不代理到当前实例上，因此直接this._xx是无法访问的，需要通过this.$data._xx来访问。

// mixins/sysParamsMixin.js
 
import * as Api from 'api'
 
export default {
  data() {
    return {
      _filterFunc: null,       // 过滤器函数
      _sysParams: null,        // 获取数据字典
      _sysParamsPromise: null  // 获取sysParams之后返回的Promise
    }
  },
  methods: {
    /* 注册过滤器到_filterFunc中 */
    _getSysParamsFunc() {
      const thisPromise = this.$data._sysParamsPromise
      return thisPromise || Api.sysParams()            // 获取数据字典的Api
        .then(({ data }) => {
          this.$data._filterFunc = {}
          Object.keys(data).forEach(paramKey =>
            this.$data._filterFunc[paramKey] = val => {        // 过滤器注册到_filterFunc中
              const tar = data[paramKey].find(item => item['paramValue'] === val)
              return tar['paramDesc'] || ''
            })
          return data
        })
        .catch(err => console.error(err, ' in src/mixins/sysParamsMixin.js'))
    },
 
    /* 按照键值获取单个过滤器 */
    _rootFilters(val, id = 'SEX_TYPE') {
      const func = this.$data._filterFunc
      const mth = func && func[id]
      return mth && mth(val) || val
    },
 
    /* 获取数据字典 */
    _getSysParams() {
      return this.$data._sysParams
    }
  },
  mounted() {
    this.$data._filterFunc ||
    (this.$data._sysParamsPromise = this._getSysParamsFunc())
  }
}

这里把Api的promise保存下来，如果其他地方还用到的话直接返回已经是resolved状态的promise，就不用再次去请求数据了。

那在我们的组件中怎么使用呢：

<template>
  <p>
    {{ _rootFilters( sexVal )}}
  </p>
</template>
 
<script type=&#39;text/javascript&#39;>
  import * as Api from 'api'
  import sysParamsMixin from 'mixins/sysParamsMixin'
 
  export default {
    mixins: [sysParamsMixin],
    data() {
      return { sexVal: 1 }
    },
    mounted() {
      this._getSysParamsFunc()
        .then(data =>
          // 这里获取到数据字典的data
        )
    }
  }
</script>

这里不仅注册了过滤器，而且也暴露了数据字典，以方便某些地方的列表显示，毕竟这是实际项目中常见的场景。

相关推荐：

如何在项目中使用Vue+animate过渡动画

Vue过滤器filters使用详解

Das obige ist der detaillierte Inhalt vonDer Implementierungsprozess der dynamischen Filterung von Vue-Projektdaten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!