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
filter Ändern Sie die Schnittstelle auf Synchronisierung und rufen Sie die Datenwörterbuchschnittstelle synchron im $mount- oder
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.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
render watcher umfasst
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
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
werden auf $root statt auf $options.asset_types.__proto__
asset_types2.1 Verwenden der Filter der Stammkomponenteasset_types
{
"SEX_TYPE": [
{ "paramValue": 0, "paramDesc": "女" },
{ "paramValue": 1, "paramDesc": "男" }
]
}Registrieren Sie die js des Filtersnew Vue()
<template>
<p>
{{ rootFilters( sexVal )}}
</p>
</template>
<script type='text/javascript'>
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 erhalten. Warum registrieren Sie ihn dann nicht direkt bei der Vue.filter-Methode, denn
Datenänderungen auf$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
使用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='text/javascript'>
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>这里不仅注册了过滤器，而且也暴露了数据字典，以方便某些地方的列表显示，毕竟这是实际项目中常见的场景。
相关推荐：
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!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
