這篇文章給大家分享的是有關(guān)Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過(guò)濾怎么弄的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)專(zhuān)注為客戶(hù)提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于成都網(wǎng)站制作、成都做網(wǎng)站、哈爾濱網(wǎng)絡(luò)推廣、重慶小程序開(kāi)發(fā)、哈爾濱網(wǎng)絡(luò)營(yíng)銷(xiāo)、哈爾濱企業(yè)策劃、哈爾濱品牌公關(guān)、搜索引擎seo、人物專(zhuān)訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等,從售前售中售后,我們都將竭誠(chéng)為您服務(wù),您的肯定,是我們最大的嘉獎(jiǎng);創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供哈爾濱建站搭建服務(wù),24小時(shí)服務(wù)熱線:18980820575,官方網(wǎng)址:bm7419.com
這個(gè)問(wèn)題是在下在做一個(gè)Vue項(xiàng)目中遇到的實(shí)際場(chǎng)景,這里記錄一下我遇到問(wèn)題之后的思考和最后怎么解決的(老年程序員記性不好
問(wèn)題是這樣的:
頁(yè)面從后臺(tái)拿到的數(shù)據(jù)是由0、1之類(lèi)的key,而這個(gè)key代表的value比如0-女、1-男的對(duì)應(yīng)關(guān)系是要從另外一個(gè)數(shù)據(jù)字典接口拿到的;
類(lèi)似于這樣的Api: { "SEX_TYPE": [ { "paramValue": 0, "paramDesc": "女" }, { "paramValue": 1, "paramDesc": "男" } ] }
那么如果view拿到的是0,就要從字典中找到它的描述女并且顯示出來(lái);下面故事開(kāi)始了
有人說(shuō),這不是過(guò)濾器 filter 要做的事么,直接Vue.filter不就行了。
然而問(wèn)題是這個(gè)filter是要等待異步的數(shù)據(jù)字典接口返回之后才能拿到,如果在$mount的時(shí)候這個(gè)filter沒(méi)有找到。
那么就會(huì)導(dǎo)致錯(cuò)誤影響之后的渲染(白屏并報(bào)undefined錯(cuò));
我想到的解決方法有兩個(gè):
把接口變?yōu)橥剑赽eforeCreate或created鉤子中同步地獲取數(shù)據(jù)字典接口,保證在 $mount的時(shí)候可以拿到注冊(cè)好的 filter,保證時(shí)序,但是這樣會(huì)阻塞掛載,延長(zhǎng)白屏?xí)r間,因此不推介;
把filter的注冊(cè)變?yōu)楫惒剑讷@取filter之后通知 render watcher 更新自己,這樣可以利用vue自己的響應(yīng)式化更新視圖,不會(huì)阻塞渲染,因此在下初步采用了這個(gè)方法。
因?yàn)閒ilter屬于 asset_types ,關(guān)于在Vue實(shí)例中asset_types的訪問(wèn)鏈有以下幾個(gè)結(jié)論;
具體代碼實(shí)踐可以參考: Codepen - filter test
asset_types包括filters、components、directives,以下所有的asset_types都自行替換成前面幾項(xiàng)
子組件中的asset_types訪問(wèn)不到父組件中的asset_types,但是可以訪問(wèn)到全局注冊(cè)的掛載在$root.$options.asset_types.__proto__上的asset_types,這里對(duì)應(yīng)源碼 src/core/util/options.js
全局注冊(cè)方法Vue.asset_types,比如Vue.filters注冊(cè)的asset_types會(huì)掛載到根實(shí)例(其他實(shí)例的$root)的$options.asset_types.__proto__上,并被以后所有創(chuàng)建的Vue實(shí)例繼承,也就是說(shuō),以后所有創(chuàng)建的Vue實(shí)例都可以訪問(wèn)到
組件的slot的作用域僅限于它被定義的地方,也就是它被定義的組件中,訪問(wèn)不到父組件的asset_types,但是可以訪問(wèn)到全局定義的asset_types
同理,因?yàn)閙ain.js中的new Vue()實(shí)例是根實(shí)例,它中注冊(cè)的asset_types會(huì)被掛載在$root.$options.asset_types上而不是$root.$options.asset_types.__proto__上
根據(jù)以上幾個(gè)結(jié)論,可以著手coding了~
2.1 使用根組件的filters
因此首先我考慮的是把要注冊(cè)的filter掛載到根組件上,這樣其他組件通過(guò)訪問(wèn)$root可以拿到注冊(cè)的filter。
這里的實(shí)現(xiàn):
<template> <div> {{ rootFilters( sexVal )}} </div> </template> <script type='text/javascript'> import Vue from 'vue' import { registerFilters } from 'utils/filters' export default { data() { return { sexVal: 1 // 性別 } }, methods: { /* 根組件上的過(guò)濾器 */ rootFilters(val, id = 'SEX_TYPE') { const mth = this.$root.$options.filters[id] return mth && mth(val) || val } }, created() { // 把根組件中的filters響應(yīng)式化 Vue.util.defineReactive(this.$root.$options, 'filters', this.$root.$options.filters) }, mounted() { registerFilters.call(this) .then(data => // 這里獲取到數(shù)據(jù)字典的data ) } } </script>
注冊(cè)filter的js
// utils/filters import * as Api from 'api' /** * 獲取并注冊(cè)過(guò)濾器 * 注冊(cè)在$root.$options.filters上不是$root.$options.filters.__proto__上 * 注意這里的this是vue實(shí)例,需要用call或apply調(diào)用 * @returns {Promise} */ export function registerFilters() { return Api.sysParams() // 獲取數(shù)據(jù)字典的Api,返回的是promise .then(({ data }) => { Object.keys(data).forEach(T => this.$set(this.$root.$options.filters, T, val => { const tar = data[T].find(item => item['paramValue'] === val) return tar['paramDesc'] || '' }) ) return data }) .catch(err => console.error(err, ' in utils/filters.js')) }
這樣把根組件上的filters變?yōu)轫憫?yīng)式化的,并且在渲染的時(shí)候因?yàn)樵趓ootFilters方法中訪問(wèn)了已經(jīng)在created中被響應(yīng)式化的$root.$options.filters。
所以當(dāng)異步獲取的數(shù)據(jù)被賦給$root.$options.filters的時(shí)候,會(huì)觸發(fā)這個(gè)組件render watcher的重新渲染,這時(shí)候再獲取rootFilters方法的時(shí)候就能取到filter了;
那這里為什么不用Vue.filter方法直接注冊(cè)呢。
因?yàn)镺bject.defineProperty不能監(jiān)聽(tīng)__proto__上數(shù)據(jù)的變動(dòng)。
而全局Vue.filter是將過(guò)濾器注冊(cè)在了根組件$root.$options.asset_types.__proto__上,因此其變動(dòng)不能被響應(yīng)。
這里的代碼可以進(jìn)一步完善,但是這個(gè)方法存在一定的問(wèn)題,首先這里使用了Vue.util上不穩(wěn)定的方法。
另外在使用中到處可見(jiàn)this.$root.$options這樣訪問(wèn)vue實(shí)例內(nèi)部屬性的情況,不太文明,讀起來(lái)也讓人困惑。
因此在這個(gè)項(xiàng)目做完等待測(cè)試的時(shí)候我思考了一下,誰(shuí)說(shuō)過(guò)濾器就一定放在filters里面 -。-,也可以使用mixin來(lái)實(shí)現(xiàn)嘛
2.2 使用mixin
使用mixin要注意一點(diǎn),因?yàn)関ue中把data里所有以_、$開(kāi)頭的變量都作為內(nèi)部保留的變量。
并不代理到當(dāng)前實(shí)例上,因此直接this._xx是無(wú)法訪問(wèn)的,需要通過(guò)this.$data._xx來(lái)訪問(wèn)。
// mixins/sysParamsMixin.js import * as Api from 'api' export default { data() { return { _filterFunc: null, // 過(guò)濾器函數(shù) _sysParams: null, // 獲取數(shù)據(jù)字典 _sysParamsPromise: null // 獲取sysParams之后返回的Promise } }, methods: { /* 注冊(cè)過(guò)濾器到_filterFunc中 */ _getSysParamsFunc() { const { $data } = this return $data._sysParamsPromise || ($data._sysParamsPromise = Api.sysParams() .then(({ data }) => { this.$data._sysParams = data this.$data._filterFunc = {} Object.keys(data).forEach(paramKey => this.$data._filterFunc[paramKey] = val => { const tar = data[paramKey].find(item => item['paramValue'] === val) return tar && tar['paramDesc'] || '' }) return data }) .catch(err => console.error(err, ' in src/mixins/sysParamsMixin.js'))) }, /* 按照鍵值獲取單個(gè)過(guò)濾器 */ _rootFilters(val, id = 'SEX_TYPE') { const func = this.$data._filterFunc const mth = func && func[id] return mth && mth(val) || val }, /* 獲取數(shù)據(jù)字典 */ _getSysParams() { return this.$data._sysParams } } }
這里把Api的promise保存下來(lái),如果其他地方還用到的話直接返回已經(jīng)是resolved狀態(tài)的promise,就不用再次去請(qǐng)求數(shù)據(jù)了。
另外為了在其他實(shí)例中也可以方便的訪問(wèn),這里掛載在根組件上。
那在我們的根組件中怎么使用呢:
// src/main.js import sysParamsMixin from 'mixins/sysParamsMixin' new Vue({ el: '#app', mixins: [sysParamsMixin], render: h => h(App), }) 在需要用過(guò)濾器的組件中: <template> <div> {{ $root._rootFilters( sexVal )}} </div> </template> <script type='text/javascript'> export default { data() { return { sexVal: 1 } }, mounted() { this.$root._getSysParamsFunc() .then(data => // 這里獲取到數(shù)據(jù)字典的data ) } } </script>
這里不僅注冊(cè)了過(guò)濾器,而且也暴露了數(shù)據(jù)字典,以方便某些地方的列表顯示,畢竟這是實(shí)際項(xiàng)目中常見(jiàn)的場(chǎng)景。
當(dāng)然如果使用vuex更好,不過(guò)這里的場(chǎng)景個(gè)人覺(jué)得沒(méi)必要用vuex,如果還有更好的方法可以討論一下下啊~
感謝各位的閱讀!關(guān)于Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過(guò)濾怎么弄就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
當(dāng)前標(biāo)題:Vue項(xiàng)目數(shù)據(jù)動(dòng)態(tài)過(guò)濾怎么弄
轉(zhuǎn)載源于:http://bm7419.com/article6/pphgog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供面包屑導(dǎo)航、企業(yè)網(wǎng)站制作、品牌網(wǎng)站設(shè)計(jì)、、網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)公司
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)