2020最新国产在线不卡a-爱看女同中文字幕av-国产大秀视频在线一区二区-大香蕉手机在线最新视频

尚武科技——負責任的企業(yè)公民

電話

電話咨詢

pHONE CONSulTING

0311-83796180

QQ

在線咨詢

ONliNE CONSulTING
百度商橋
科技以人為本
尚武旗下網(wǎng)站
尚武科技
搜索圖標
Sitemap | Mail | 合作答疑 | 招賢納士
網(wǎng)站公告 尚武科技服務熱線:0311-
 83796180
   
我們是誰  |  企業(yè)文化  |  新聞動態(tài)  |  加入我們  |  行業(yè)知識
數(shù)據(jù)動態(tài)過濾技巧在 Vue 項目中的實踐

  這個問題是在下在做一個 Vue 項目中遇到的實際場景,這里記錄一下我遇到問題之后的思考和最后怎么解決的(老年程序員記性不好 -。-),過程中會涉及到一些Vue源碼的概念比如 $mount、 render watcher等,接下來就由石家莊網(wǎng)站開發(fā)工程師簡單的講解一下。

  問題是這樣的:頁面從后臺拿到的數(shù)據(jù)是由 0、 1之類的key,而這個key代表的value比如 0-女、 1-男的對應關系是要從另外一個數(shù)據(jù)字典接口拿到的;類似于這樣的Api:

  那么如果view拿到的是 0,就要從字典中找到它的描述 女并且顯示出來;下面故事開始了。

  1. 思考

  有人說,這不是過濾器 filter 要做的事么,直接 Vue.filter 不就行了,然而問題是這個filter 是要等待異步的數(shù)據(jù)字典接口返回之后才能拿到,如果在 $mount 的時候這個filter沒有找到,那么就會導致錯誤影響之后的渲染(白屏并報 undefined錯);

  我想到的解決方法有兩個:

  把接口變?yōu)橥?,?beforeCreate或 created鉤子中同步地獲取數(shù)據(jù)字典接口,保證在 $mount的時候可以拿到注冊好的filter,保證時序,但是這樣會阻塞掛載,延長白屏時間,因此不推介;

  把filter的注冊變?yōu)楫惒?,在獲取filter之后通知 render watcher 更新自己,這樣可以利用vue自己的響應式化更新視圖,不會阻塞渲染,因此在下初步采用了這個方法。

  2. 實現(xiàn)

  因為filter屬于 assettypes ,關于在Vue實例中assettypes的訪問鏈有以下幾個結論;具體代碼實踐可以參考:Codepen - filter testasset_types包括 filters、 components、 directives,以下所有的 asset_types都自行替換成前面幾項子組件中的 asset_types訪問不到父組件中的 asset_types,但是可以訪問到全局注冊的掛載在 $root.$options.asset_types.__proto__上的 asset_types,這里對應源碼 src/core/util/options.js全局注冊方法Vue.assettypes,比如Vue.filters注冊的assettypes會掛載到根實例(其他實例的 $root)的$options.asset_types.__proto__上,并被以后所有創(chuàng)建的Vue實例繼承,也就是說,以后所有創(chuàng)建的Vue實例都可以訪問到組件的slot的作用域僅限于它被定義的地方,也就是它被定義的組件中,訪問不到父組件的 asset_types,但是可以訪問到全局定義的 asset_types同理,因為main.js中的 newVue()實例是根實例,它中注冊的 asset_types會被掛載在 $root.$options.asset_types上而不是 $root.$options.asset_types.__proto__上

  根據(jù)以上幾個結論,可以著手coding了~

  以上關于動態(tài)數(shù)據(jù)過濾屬石家莊網(wǎng)站建設工程師的個人觀點,大家如果對此有著不同的見解,可以關注公眾號“尚武科技派”給我留言,大家可以交流一下自己的心得體會,共同學習進步。




上一篇:設計不夠出彩該怎么辦呢?             下一篇:網(wǎng)站設計的技巧

標簽:
尚武科技
推薦閱讀
睿億網(wǎng)絡用心服務的團隊,竭誠為您服務 客服不能及時回復您,您可點擊QQ進行交談
欲了解業(yè)務詳情,請撥打咨詢熱線:
值班電話:15512183667
在線服務: 尚武科技售前專員   
合作答疑 |  企業(yè)郵箱 |  關于我們 |  聯(lián)系我們 |  版權聲明 |  會員中心 |  友情鏈接 |  免責聲明
Copyright ? 2008-2019 尚武科技 保留所有權利 >冀ICP備07012169號    Copyright ? 2008 m.dachencms.com, Inc. All rights reserved