Vue元件間呼叫的理解 效能對比。

2021-08-21 07:46:23 字數 1288 閱讀 2715

元件間的互動大概有這幾種情況:

1.父子間的互動:watch,props,$emit,這幾個屬性,可以涵蓋父子元件間的互動。

父頁面中:

menu-aside元件的載入要隨著頁面的projectid的變動而變動,這時候,在menu-aside元件中用props屬性接收父傳來的projectid,並用watch監聽:

props:[projectid],

watch: }

那如果子元件變化,要求父元件互動,怎麼辦呢:

父頁面加乙個接收機智 @changefather ,接收到子元件執行的$emit('changefather',obj);  動作就會呼叫到reload方法

methods:);

這樣就能實現兩個元件間的通訊了,對比1)減少了中間層的互動。

3)使用vuex,vuex是乙個專為 vue.js 應用程式開發的狀態管理模式,相對於中大型單頁面應該推薦使用,小型單頁面應用可能會增加過多繁瑣冗餘的。(vuex的介紹放到後面)

接下來我們了解一下watch,watch是乙個實時監聽,那麼問題來了:

1.監聽乙個值與監聽乙個物件屬性有什麼區別?

深度監聽,可以監聽物件、陣列的變化,開啟deep:true的屬性。

監聽乙個值 key=1,和乙個物件 obj=:

watch:,

obj:

deep:true}}

這時候 key:1,2;name:2,2;物件的屬性只顯示了最新的值,舊的值沒監控到。如果想要監控到物件的舊值,那就要通過監控方法來獲取。

computed:

}watch:

},這時候列印出obj.name:1,2;

2.監聽的物件太多是否會影響效能?

當監聽乙個tree物件時,測試資料達到100條,deep:true開啟後,監控的屬性就會達到一定量,這時候頁面也許會產生卡頓延遲,這是因為監控的dom太多,導致效能受到影響。當deep改為false,頁面又會流暢了。  

3.監聽使用deep:true,因物件資料太大,導致卡頓,怎麼規避?

其實,父元件調動子元件,有的時候並不一定要用watch去監聽聯動,其實還可以用$refs對dom物件去操作。前提條件是元件是已經載入完畢的情況下,那這種前提,就必須在元件mounted初始化的時候載入好一遍,當父元件乙個值發生變化的時候,通過this.$refs.searchinit.getprojectname(this.projectid);這種方式去呼叫子元件的方法實現互動。

函式直接呼叫與反射效能對比

最近發現反射甚是好用,但是效能差距有多大呢。實驗環境是win8.1 64位系統,jre8,i7 4770cpu,8g記憶體。方法很簡單,對於乙個類,分別使用直接呼叫和函式反射的方式呼叫同乙個函式,看執行時間,時間使用system.currenttimemillis 函式僅申請乙個int型區域性變數並...

不同方式呼叫函式的效能對比

using system using system.diagnostics using system.reflection using system.reflection.emit using system.runtime.compilerservices public class calltest...

Vue父子元件間呼叫

父元件 在父元件中需要引入子元件,並通過 屬性名方式 進行資料繫結 子元件 在子元件中使用prop屬性進行接收資料,定義props屬性就無需在data中定義 export default methods props list 子元件 定義乙個方法,this.datalist 就是要傳遞的資料 met...