基於TOP-K的面試題解總結（4）
阿新 • • 發佈：2022-04-08
16.簡述 Vue 中 watch 和 computed 的區別
- watch：
- 可以執行任何邏輯，比如節流、Ajax非同步資料獲取、監聽等
- 通過監聽某一個屬性來影響另一個屬性，但不能通過影響了某個屬性之後再去影響原來的屬性，只能是單向的
- 使用watch監聽時，該屬性必須存在，沒有該屬性是無法監聽的
- watch還可以監聽路由的改變
- 適用於一個數據影響多個數據的情況下
- computed：
- 能夠進行資料快取
- 能夠對最終結果進行運算功能
- 適用於一個數據被多個數據影響的情況下
- 執行機制：
- 所有的任務都在主執行緒進行，形成執行棧
- 主執行緒之外有一個任務佇列，系統會叫非同步任務放在任務佇列中
- 待主執行緒任務執行完成後，系統將會讀取任務佇列中的任務
- 非同步任務結束了等待狀態，就會從任務佇列進入主執行緒執行棧，恢復執行
- 主執行緒重複以上步驟
- 非同步任務又分為巨集任務和微任務
- 巨集任務：setTimeout、script等
- 微任務：Promise（注意new Promise()是同步任務，resolve、catch、then是非同步任務）、nextTick等
- 微任務永遠比巨集任務先執行
- Flex：彈性佈局
- 彈性佈局中的元素具有伸展和收縮自身的能力。
- 彈性佈局中元素的大小是高度依賴父容器的大小
- 子元素的目標就是為了撐滿父元素
- 父元素屬性設定：
- display：可以設定為flex
- justifiy-content：定義內部元素在主軸上的對齊方式
- align-items：定義內部元素在交叉軸上的對齊方式
- align-content：定義多根軸線的對齊方式，如果專案只有一個軸線，該屬性不起作用。
- 使用場景：流式佈局，網格佈局，聖盃佈局
- Number：數字
- Boolean：布林值
- object：物件
- null：空
- undefined：未定義
- Symbol：符號
- 箭頭函式 const fn=()=>{}
- 優點：
- 函式定義整潔
- this指向上級作用域
- 可不新增return
- 缺點：
- 不能用於建構函式