我有一個復雜的組件，它在一個render函式中完成所有的渲染。這有多個部分，視圖的不同部分被渲染 - 其中之一是過濾器欄，顯示已應用的過濾器。
我注意到發生的事情是，如果我應用一個過濾器，它反過來呈現這個欄，它會導致其他一切都被完全重新渲染。這導致了許多其他問題，我需要嘗試阻止它發生。
我在使用普通模板時從未遇到過這個問題，因為 Vue 似乎非常聰明地處理這些問題，但我不知道如何解決這個問題。我唯一能想到的就是key在我不想重新渲染的每件事上設定一個，但不確定這是否會 a) 解決問題，并且 b) 可以通過插槽傳入的內容
有沒有其他人遇到過這個問題，如果有，如何解決？
uj5u.com熱心網友回復：
在復雜的組件中使用 vuetify 文本輸入時，我遇到了類似的問題，這導致應用程式急劇變慢。
在我的搜索中，我找到了這個特定于 vuetify 的鏈接：
使用大量 v-text-field 時的高性能影響
然后從這個 GitHub 問題中發現這實際上是一個 vue 的東西：
即使插槽或組件資料沒有改變，帶有插槽的組件也會重新渲染
并且有計劃改進這一點，在這里跟蹤（vue 3應該解決這個問題）：
更新插槽內容而不重新渲染組件的其余部分
因此，在閱讀完所有這些內容后，我發現了一些對提高應用程式性能有很大幫助的解決方法，我希望這些方法也能對您有所幫助：
將復雜的組件分成較小的組件，特別是當有一些代碼更改系結到模板的資料導致重新渲染時（將它們放在自己的組件中）
我將所有資料層控制移至 vuex 存盤，而不是使用
v-model每個位置并將資料作為事件和道具傳遞，所有資料都通過操作在存盤中更新，并通過 getter 從存盤中讀取。（從資料中我的意思是在模板中回圈的東西v-for，API 結果等等......所有這些都被設定、更新和讀取通過商店。我的組件仍然有資料物件，但僅用于與樣式和模板控制元件相關的東西，比如一個布林值來控制模板中使用的模態或匯入的圖示等）最后我寫了一個函式
lazyCaller，它的作業是延遲更新存盤中的值（當不需要立即更新資料時）以避免快速更新來自文本輸入之類的東西（沒有這個，每個擊鍵都會觸發值更新操作）
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/346404.html
標籤：javascript Vue.js