所以，在我的Vue元件中，有一個非同步的created方法和幾個帶有非同步watcher的變數。這些變數被一些元件template部分中的元素用作v-model。 watcher呼叫其他方法來改變這些變數的值。
這個過程會持續一段時間（幾百毫秒），直到所有資料都被初始化，沒有變數再改變。現在，我有一些程式碼必須在所有變數都有初始值定義時運行。但問題是，我如何知道元件中的所有程式碼都執行完了呢？
當然，我可以在created方法的末尾運行我的程式碼，但是由於template部分中的一些元素正在更新它們用作v-model的變量，這些watcher獨立於created方法運行，而created方法在watcher之前完成得多。甚至mounted方法在watcher之前退出。因此，我不能只是把程式碼放在created方法的末尾。
所以，我的問題是，如何在元件初始化的最後運行一些程式碼？所以，在created方法之後，以及在所有與變數值變更相關的watcher完成之後？我只是說關於watcher的初始運行，這是由v-model的初始化引起的，這是由script部分中元素的初始化引起的，而不是組件生命週期中稍後的watcher執行。所以，我需要在script部分的元素完成初始化和與它們的v-model變數相關的watcher執行之後運行它。
如何做到這一點？
您可以使用布林標誌的數組，用於監視您需要監視的任何數量的事物。它們都初始化為一個單獨的數組，初始值為false，每個監視器負責將不同的索引設為true。一旦所有監視器都運行完畢，所有標誌都為true 並通過觀察該數組，您可以知道所有內容都已初始化。
export default { data() { return { initialized: [false, false], watch1: null, watch2: null, isDone: false } }, watch: { watch1(newVal) { if (newVal) { this.initialized[0] = true } }, watch2(newVal) { if (newVal) { this.initialized[1] = true } }, initialized: { handler: function (newVal) { if (newVal.every(i => i)) { this.isDone = true // initialization is completely done } }, deep: true } }, created() { setTimeout(() => { this.watch1 = 'some value1' }, 2000) setTimeout(() => { this.watch2 = 'some value2' }, 3000) } }Vue Playground範例
#