Vue.js：管理其他組件的JS的最佳實踐

我有一個簡單的網站Vue.js設置。每個頁面都有一個組件（關於我們，聯繫我們等）。每個組件通過ajax獲取頁面的標記，然後使用<vue-router>注入該標記。Vue.js：管理其他組件的JS的最佳實踐

到目前爲止這麼好。

我的問題是：我應該如何處理所有僅用於特定組件的JS？我的主頁可能有100行左右的JS，僅用於設置圖像滑塊，懸停事件等。一旦加載關於我們組件，主頁的所有JS仍然存在於瀏覽器中，但它不再相關。我應該手動取消我的變量嗎？

這種情況怎麼樣：用戶訪問主頁，然後關於頁面，然後回到主頁。在主頁的第二次訪問中，我所有的舊變量仍然存在，但不一定處於正確的狀態。我將要將滑塊移回幻燈片1，重置任何盤旋......基本上只是重置頁面。

我想我要求就如何最好地管理JS多個部件的一個非常高的水平概述，這一切是如何聯繫在document.ready和window.load回調一旦他們已經解僱，並且不會再次觸發。謝謝。

2017-08-15 Brian

這個問題因爲它存在有點寬泛。您不應該擔心javascript內存限制，因爲您可能永遠不會遇到它們，而是優化以減少線路上的字節數。變量和不需要在你的應用程序的不同部分之間恢復的東西應該照顧Vue.js，不是嗎？ – Qix

對於第二個：[有沒有適當的方法來重置vuejs中的組件的初始數據？]（https://stackoverflow.com/questions/35604987/is-there-a-proper-way-of-resetting-a -components-initial-data-in-vuejs） – yuriy636

@Qix「應用程序的不同部分之間需要恢復的變量和不需要的部分應該關注Vue.js」我不確定這是我的第一個Vue項目............... yuruy683，感謝您的鏈接！ – Brian

我應該手動取消我的變量嗎？

不，這不是一個很好的使用你的時間/工作/努力。在開始成爲問題之前，不要擔心績效。

Vue具有document.ready的和mounted的形式的類似回調，但這些是每個組件，而文檔是每..文檔？

如果您使用的是keep-alive包裝爲您router-view，你應該使用activated，deactivated回調執行工作，如重置組件狀態。

如果不是，那麼組件在離開路徑時被銷燬，您不必重置任何東西。至於重置，我傾向於定義一個返回初始狀態的函數，然後當我需要狀態重置時使用這個函數。

<script> 

function initialState(){ 
    return { 
     test:'hi', 
    } 
} 

export default { 
    data(){ 
     ...initialState(), 
     hello: 'yoyo', //state that doesn't need to be reset. 
    }, 
    activated(){//user has returned to this route 
     Object.assign(this.$data, initialState()) 
    } 
} 

</script>

來源

2017-08-15 19:46:05

它看起來像Vue的'created'和'mounted'是我正在尋找的。我沒有使用'保持活力'，但我會再次看看它，因爲回想起來可能是我需要的。非常感謝 – Brian

Vue.js：管理其他組件的JS的最佳實踐

回答

相關問題