Vue

事件循環 (Event Loop)

JavaScript :是單執行緒的程式語言，一行程式碼執行完才會再執行下一行，這個概念稱之為同步 (synchronous)。

使用者體驗，於是就有了異步 (asynchronous) 的概念
透過事件循環機制，能有效解決 JavaScript 單執行緒的問題，讓耗時的操作不會阻塞主線成。

  • 堆 (Heap)：堆是一種數據結構，拿來儲存物件
  • 棧 (Stack)：採用後進先出的規則，當函式執行時，會被添加到棧的頂部，當執行完成時，就會從頂部移出，直到棧被清空
  • 隊列 (Queue)：也是一種數據結構，特性是先進先出 (FIFO)。在 JavaScript 的執行環境中，等待處理的任務會被放在隊列(Queue) 裡面，等待棧 (Stack) 被清空時，會從隊列(Queue)中拿取第一個任務進行處理
事件循環(Event loop)：事件循環會不斷地去查看棧(Stack) 是否空出，如果空出就會把隊列(Queue)中等待的任務放進棧(Stack)中執行.
步驟
所有任務都會在主線程上執行，形成一個執行棧 =>
如果遇到異步任務，例如：setTimeout，執行環境會調用相關的 API (例如在瀏覽器上會調用 Web API)，等待此異步任務的結果之後，再被放置到任務隊列中 =>
一旦執行棧的所有同步任務完成之後，就會讀取任務隊列，並將任務隊列第一個，加到執行棧中運行 =>
只要執行棧空了之後，就會讀取任務隊列，不斷重複這個步驟，直到所有任務完成，這個流程就是**事件循環 (Event loop) **