一、css3 新增：使用calc()計算寬高（vw/vh）

簡單來說就是CSS3中新增的一個函式，calculate（計算）的縮寫。

用於動態計算寬/高，你可以使用 calc() 給元素的各個屬性設定值【margin、border、padding、font-size】等

• 主要用於計算不確定值，例如一個外邊距為 10px, 寬度為 100% 的元素，這種情況我們怎麼設定呢？如果設定了

• .box {
      width: 100%;
      margin: 10px;
  }

  你可以看出這個box已經溢位了

• 那麼怎麼解決呢？就可以用calc函數了：

• .box {
      width: calc(100% - (10 *2)px);
      margin: 10px; 
  }

  父元素寬度的 100% - 左右的 10px

（1）calc() 語法

就是簡單的四則運算

• 使用“+”、“-”、“*” 和 “/”四則運算；
• 可以使用百分比、px、em、rem等單位；
• 可以混合使用各種單位進行計算；
• 表示式中有 “+” 和 “-” 時，其前後必須要有空格，如"width: calc(12%+5em)" 這種沒有空格的寫法是錯誤的；
• 表示式中有 “*” 和 “/” 時，其前後可以沒有空格，但建議留有空格。

（2）vw 和 vh是什麼？

• vw：視窗寬度的百分比（1vw 代表視窗的寬度為 1%）
• vh：視窗高度的百分比
• vmin：取當前Vw和Vh中較小的那一個值
• vmax：取當前Vw和Vh中較大的那一個值

vw、vh、vmin、vmax是一種視窗單位，也是相對單位。

它相對的不是父節點或者頁面的根節點。

而是由視窗（Viewport）大小來決定的，單位 1，代表類似於 1%。

• 視窗(Viewport)是你的瀏覽器實際顯示內容的區域
• 換句話說是你的不包括工具欄和按鈕的網頁瀏覽器

（3）vw、vh 與 % 百分比的區別

• % 是相對於父元素的大小設定的比率
• vw、vh 是視窗大小決定的。
• vw、vh 優勢在於能夠直接獲取高度
• % 在沒有設定 body 高度的情況下，是無法正確獲得可視區域的高度的

面試注意：

• ajax 請求最好放在 created 裡面，因為此時已經可以訪問 this 了，請求到資料就可以直接放在 data 裡面。
• 關於 dom 的操作要放在 mounted 裡面，在 mounted 前面訪問 dom 會是 undefined
• beforeDestory 可以訪問this，destroyed 不可以訪問 this，因為元件已經被銷燬了。特殊情況：

keep-alive 快取了的元件：

• 快取了元件之後，再次進入元件不會觸發 beforeCreate、created 、beforeMount、 mounted，

如果你想每次進入元件都做一些事情的話，你可以放在 activated 進入快取元件的鉤子中。

• 同理：離開快取元件的時候，beforeDestroy和destroyed並不會觸發，

可以使用 deactivated 離開快取元件的鉤子來代替。 =

二、生命週期函式鉤子（觸發鉤子的完整順序：）

將路由導航、keep-alive、和元件生命週期鉤子結合起來的

• beforeEach: 路由全域性前置守衛，可用於登入驗證、全域性路由loading等。

• beforeEnter: 路由獨享守衛

• beforeRouteEnter: 路由元件的元件進入路由前鉤子。

• beforeResolve:路由全域性解析守衛

• afterEach: 路由全域性後置鉤子

• beforeCreate: 不能訪問this。
• created: 可以訪問this，不能訪問 dom。
• beforeMount:

• mounted: 訪問/操作dom
• activated: 進入快取元件，進入a的巢狀子元件(如果有的話)。
• beforeRouteLeave: 路由元件的元件離開路由前鉤子，可取消路由離開。

• deactivated: 離開快取元件a ---- 或者 ---- 觸發 a 的beforeDestroy和destroyed元件銷燬鉤子。

三、vue 的路由鉤子

• 在被 keep-alive 包含的元件/路由中，會多出兩個生命週期的鉤子:activated與deactivated

<keep-alive>

<router-view></router-view>

</keep-alive>

使用keep-alive可以將所有路徑匹配到的路由元件都快取起來，包括路由元件裡面的元件，keep-alive大多數使用場景就是這種

• activated在元件第一次渲染時會被呼叫，之後在每次快取元件被啟用時呼叫。

（1）呼叫時機（第一次進入快取 路由/元件）：

在mounted後面，beforeRouteEnter 守衛傳給 next 的回撥函式之前呼叫

• beforeMount
      => 如果你是從別的 路由/元件 進來(元件銷燬 destroyed/ 或離開快取deactivated)
          => mounted
              => activated 進入快取元件
                  => 執行 beforeRouteEnter 回撥

因為元件被快取了，再次進入快取路由/元件時，不會觸發這些鉤子：

// beforeCreate

// created

// beforeMount

// mounted

（2）之後的呼叫時機是：

• 元件銷燬 destroyed    /或    離開快取 deactivated
          => activated 進入當前快取元件
              => 執行 beforeRouteEnter回撥 // 元件快取或銷燬，巢狀元件的銷燬和快取也在這裡觸發

• deactivated：元件被停用(離開路由)時呼叫

使用了 keep-alive 就不會呼叫 beforeDestroy(元件銷燬前鉤子) 和 destroyed(元件銷燬)，因為元件沒被銷燬，被快取起來了。

• 這個鉤子可以看作 beforeDestroy 的替代，如果你快取了元件，要在元件銷燬的的時候做一些事情，你可以放在這個鉤子裡
• 如果你離開了路由，會依次觸發：

• 元件內的離開當前路由鉤子beforeRouteLeave
      => 路由前置守衛 beforeEach
          => 全域性後置鉤子afterEach
              => deactivated 離開快取元件
                  => activated 進入快取元件(如果你進入的也是快取路由) // 如果離開的元件沒有快取的話 beforeDestroy會替換deactivated // 如果進入的路由也沒有快取的話  全域性後置鉤子afterEach
                     =>銷燬 destroyed
                         => beforeCreate 等

• 全域性導航守衛（三個守衛）：
• router.beforeEach 全域性前置守衛 進入路由之前
• router.beforeResolve 全域性解析守衛(2.5.0+) 在 beforeRouteEnter 呼叫之後呼叫
• router.afterEach 全域性後置鉤子 進入路由之後

使用方法：

•  // main.js 入口檔案
       import router from './router'; // 引入路由
  
       router.beforeEach((to, from, next) => { 
          next();
       });
       router.beforeResolve((to, from, next) => {
          next();
       });
       router.afterEach((to, from) => {
           console.log('afterEach 全域性後置鉤子');
       });

• 路由物件

指的是平時通過this.$route獲取到的路由物件

• 引數解析：
• to

將要進入的路由物件

• from

將要離開的路由物件

• next

:Function 這個引數是個函式，且必須呼叫，否則不能進入路由(頁面空白)

• next() 進入該路由
• next(false): 取消進入路由，url地址重置為from路由地址(也就是將要離開的路由地址)
• next 跳轉新路由，當前的導航被中斷，重新開始一個新的導航

• // 我們可以這樣跳轉：
  next('path地址')
  
  // 或者
  next({path:''})
  
  // 或者
  next({name:''})
  
  // 且允許設定諸如 replace: true、name: 'home' 之類的選項
  // 以及你用在router-link或router.push的物件選項。

• 路由獨享守衛

• const router = new VueRouter({
      routes: [
          {
              path: '/home',
              component: Hom e,
              beforeEnter: (to, from, next) => { 
                  // 引數用法什麼的都一樣,呼叫順序在全域性前置守衛後面，所以不會被全域性守衛覆蓋
                  // ...
              }
          }
      ]
  });

• 元件內導航守衛：

• beforeRouteEnter 進入路由前
• beforeRouteUpdate (2.2) 路由複用同一個元件時
• beforeRouteLeave 離開當前路由時

作用： 導航離開該元件的對應路由時呼叫，我們用它來

• 禁止使用者離開，比如還未儲存草稿

• beforeRouteLeave (to, from , next) {
        if (文章儲存) {
            next(); // 允許離開或者可以跳到別的路由 上面講過了
        } else {
            next(false); // 取消離開
        }
  }

• 在使用者離開前，將 setInterval 銷燬，防止離開之後，定時器還在呼叫

介紹：

• beforeRouteEnter (to, from, next) {
      // 在路由獨享守衛後呼叫 不！能！獲取元件例項 `this`，元件例項還沒被建立
  },
  
  beforeRouteUpdate (to, from, next) {
      // 在當前路由改變，但是該元件被複用時呼叫 可以訪問元件例項 `this`
      // 舉例來說，對於一個帶有動態引數的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉的時候，
      // 由於會渲染同樣的 Foo 元件，因此元件例項會被複用。而這個鉤子就會在這個情況下被呼叫。
  },
  
  beforeRouteLeave (to, from, next) {
      // 導航離開該元件的對應路由時呼叫，可以訪問元件例項 `this`
  }

1

1

四、定時器、延時器

d

五、首屏優化方案

• 減少請求數量：合併資源，減少HTTP請求，懶載入，內聯資源等
• 減少請求資源大小：壓縮資源，gzip，webp圖片，減少cookie等
• 提高請求速度：DNS預解析，資源預載入，CDN加速等
• 快取：瀏覽器快取，manifest快取等

分成 HTML 的快取，JS/CSS/image 資源的快取，以及 json 資料的快取

• 渲染：css、js載入順序，服務端渲染

六、cookie 的封裝

c

七、es6 的資料結構 Set

s

八、es6 的資料結構 Map

m

九、陣列的方法（作用及其返回值）