vue mixins使用注意事項和高階用法

因為在專案中mixins(混合)特性使用頻率是很高的 有必要熟練掌握

官方文件: mixins

實際專案中 一般都存在 列表(list) 這種很常見的使用場景

file: mixins/list.js

1 module.exports =9},

10created () ,
13watch: ,
16methods: 
21*/
22getparams (params) , params)
27},
28/**29
* 載入更多
30*/
31loadmore () ,
34/**35
* 推送到list中 因為vue的監聽特性 只能用push進行資料的新增 如果有特殊處理 通過傳遞乙個filter來過濾資料
36* @param list
37* @param filter
38*/
39pushtolist (list, filter)  else
46})
47},
48/**49
* 初始化列表
50*/
51initlist () ,
56/**57
* @overwrite
58* 載入資料方法 用到該mixin的都應該重寫該方法 否則無法實現載入資料
59*/
60loaddata () 63}
64 }

乙個列表的基本屬性

作用或備註

list

列表page

頁碼limit

每頁條數

total

總條數

基本方法

作用或備註

initlist()

初始化列表

loaddata()

載入資料

loadmore()

載入更多

擴充套件方法[主要用於引數的處理和結果的處理]

作用或備註

getparams()

獲取http請求引數

pushtolist()

資料處理方法

每乙個列表結構都具備的屬性以及方法 可以放到mixins的宣告中

從這段**中可以得知 載入了該mixins的元件會在建立之後執行乙個initlist方法

顧名思義 就是初始化列表的方法

1

created ()

但是問題來了 如果我的元件 不只是在初始化的時候使用

而是在使用了keep-alive的應用下在route->data()的鉤子中執行初始化呢?

1

route: 
5 }

這時候你開啟控制台 重新整理頁面 就會發現 第一次進入 初始化了兩次

因為mixins的合併策略

當混合物件與元件包含同名選項時，這些選項將以適當的策略合併。例如，同名鉤子函式被併入乙個陣列，因而都會被呼叫。另外，混合的鉤子將在元件自己的鉤子之前呼叫。

1

var mixin =5}
6new
vue(
11})
12//
-> "mixin hook called"
13//
-> "component hook called"

值為物件的選項，如 methods, components 和 directives 將合併到同乙個物件內。如果鍵衝突則元件的選項優先。

1

var mixin =,
6     conflicting: function
() 9}10
}11var vm = new
vue(,
17     conflicting: function
() 20}21
})22 vm.foo() //
-> "foo"
23 vm.bar() //
-> "bar"
24 vm.conflicting() //
-> "from self"

注意 vue.extend() 使用同樣的合併策略。

怎麼解決?

我這裡提供乙個文件中提到的比較靈活的簡單的方案加乙個自定義選項

1

created () 
6 }

通過該選項donotinit來判斷是否需要在元件建立完畢之後就初始化

在呼叫該mixins的元件中 新增這麼乙個選項 就可以讓元件不執行初始化方法

而是通過route->data()鉤子來控制列表的初始化

file: anyvuecomponent.vue

1 import list from 'path/mixins/list'

2 export default8},
9methods: )14}
15},
16     donotinit: true,17
route: 21}
22 }

說到底 仔細閱讀vue文件 專案中遇到的絕大多數問題 都能迎刃而解~

LCD使用注意事項

a.lcd使用注意事項 1.確保是在電源關閉的狀態下拔插線纜 2.對液晶屏進行固定安裝時，注意使整個液晶屏保持平整，避免外力導致液晶屏 彎曲 扭曲 3.一定要小心液晶屏的表面偏光片，避免被堅硬物體劃傷 決不能將堅硬物品置於液晶屏之上 4.如果水滴長時間滯留在液晶模組上，可能導致變色或出現汙斑，所以務...

using使用注意事項

在c 的語法中，using關鍵字有幾個作用 一 匯入乙個命名空間，以便於能使用該命名空間下的相關型別定義，如下的例項 中，將匯入system.text下的相關型別定義 二 為乙個命名空間設定別名，這種情況下並不會匯入對應命名空間下的型別定義，如例項 為system.text定義了別名systext，...

LCD使用注意事項

a.lcd使用注意事項 1.確保是在電源關閉的狀態下拔插線纜 2.對液晶屏進行固定安裝時，注意使整個液晶屏保持平整，避免外力導致液晶屏 彎曲 扭曲 3.一定要小心液晶屏的表面偏光片，避免被堅硬物體劃傷 決不能將堅硬物品置於液晶屏之上 4.如果水滴長時間滯留在液晶模組上，可能導致變色或出現汙斑，所以務...