vue元件中的data為什麼是一個函式?

1.vue中元件是用來複用的，為了防止data複用，將其定義為函式。

2.vue元件中的data資料都應該是相互隔離，互不影響的，元件每複用一次，data資料就應該被複制一次，之後，當某一處複用的地方元件內data資料被改變時，其他複用地方元件的data資料不受影響，就需要通過data函式返回一個物件作為元件的狀態。

3.當我們將元件中的data寫成一個函式，資料以函式返回值形式定義，這樣每複用一次元件，就會返回一份新的data，擁有自己的作用域，類似於給每個元件例項建立一個私有的資料空間，讓各個元件例項維護各自的資料。

4.當我們元件的date單純的寫成物件形式，這些例項用的是同一個建構函式，由於JavaScript的特性所導致，所有的元件例項共用了一個data，就會造成一個變了全都會變的結果。

為什麼new Vue這個裡面的data可以放一個物件？

因為這個類建立的例項不會被複用。它只會new一次，不用考慮複用

JWT (jsonwebtoken)

• JWT出現的原因:

  • http無狀態協議: 當客戶端發來請求時，服務端並不清楚該請求是哪臺主機發出的，因此需要有一種識別和鑑定機制來實現這一需求
  • 對比傳統的session儲存的缺點:伺服器快取session_id，需要定期清理session_id表,且不能識別跨域請求等

• jwt原理：全稱是json web token， 簡單來說JWT就是通過可逆加密演算法，生成一串包含使用者、過期時間等關鍵資訊的Token，每次請求伺服器拿到這個Token解密出來就能得到使用者資訊，從而判斷使用者狀態。jwt的組成部分:標準的jwt令牌分為三部分，分別是Header、payload、signature；

• 單機情況下實現JWT的實現流程

（1）客戶端登入成功後（必須是在登陸成功才行，與session一樣的前提條件），伺服器會根據使用者名稱和簽名以及其他資訊加密生成唯一的token串，用來區分他們，不需要存入服務端的快取中，但會把這個token返回給相應的主機，

（2）主機收到token後會存入cookie或者localStorage中，以後主機的每一次傳送其他型別的請求的操作都會攜帶這個token，

（3）伺服器會將客戶端發來的這個token和服務端從資料庫查詢出來的並且重新計算得到的使用者資訊進行對比，如果匹配，則認證成功，如果使用者請求的資源需要相應的許可權，則校驗token中的payload中儲存的許可權等相關資訊，如果有許可權則返回給對應主機所需要的資源（即做到了許可權鑑權

Vue中的key到底有什麼用

1、key的作用主要是為了高效的更新虛擬dom，其原理是vue在patch過程中通過key可以精準判斷兩個節點是否是同一個，從而避免頻繁更新不同元素，使得整個patch過程更加高效，減少dom操作量，提高效能。

2、另外，若不設定key還可能在列表更新時候引發一些隱藏的bug。

3、vue中在使用相同標籤名元素的過渡切換時，也會使用到key屬性，其目的也是為了讓vue可以區分它們，否則vue只會替換其內部屬性而不會觸發過渡效果。

v-for中為什麼要用key

key的作用: key是給每一個vnode的唯一id，也是diff的一種優化策略，可以根據key，更準確， 更快的找到對應的vnode節點

（1）、如果不用key，Vue會採用就地復地原則：最小化element的移動，並且會嘗試盡最大程度在同適當的地方對相同型別的element，做patch或者reuse。

（2）、如果使用了key，Vue會根據keys的順序記錄element，曾經擁有了key的element如果不再出現的話，會被直接remove或者destoryed

官方文件: 如果不使用 key，Vue 會使用一種最大限度減少動態元素並且儘可能的嘗試就地修改/複用相同型別元素的演算法。而使用 key 時，它會基於 key 的變化重新排列元素順序，並且會移除 key 不存在的元素。有相同父元素的子元素必須有獨特的 key。重複的 key 會造成渲染錯誤

vue的移動端適配是怎麼做的

vue 的移動端適配我們可以參考 vant-ui 元件庫給我們提供的方案。

使用 amfe-flexible(用於自動定義跟字型大小)外掛和 postcss-pxtorem(用於將 px 自動轉成 rem)外掛

在 main.ts 裡面 import "amfe-flexible"

在根目錄新建 .postcssrc.js 檔案

module.exports = { 
  plugins: { 
    "postcss-pxtorem": { 
      rootValue: 37.5, 
      propList: ["*"], 
}, }, };

rem 是相對於跟字型的倍數，如果我們整個專案都是用 rem 作為單位，那麼當我們做移動端的響應式的

時候只需要去改變跟字型的大小就能做到適配。

後臺管理系統使用者驗證許可權

1. 登入

使用者填寫完賬號和密碼後向服務端驗證是否正確，登入成功後，服務端會返回一個 token（該token 的是一個能唯一標示使用者身份的一個 key），之後我們將 token 儲存在本地localstorage 之中，這樣下次開啟頁面或者重新整理頁面的時候能記住使用者的登入狀態，不用再去登入頁面重新登入了。為了保證安全性，後臺所有 token 有效期(Expires/Max-Age)都是 Session，就是當瀏覽器關閉了就丟失了。重新開啟瀏覽器都需要重新登入驗證，後端也會在每週固定一個時間點重新重新整理 token，讓後臺使用者全部重新登入一次，確保後臺使用者不會因為電腦遺失或者其它原因被人隨意使用賬號。

2. 攔截路由進行判斷

頁面會先從 localstorage 中檢視是否存有 token，沒有，就走一遍上一部分的流程重新登入，如果有 token,就會把這個 token 返給後端去拉取 user_info，保證使用者資訊是最新的。 當然如果是做了單點登入得的的話，使用者資訊儲存在本地也是可以的。當你一臺電腦登入時，另一臺會被提下線，所以總會重新登入獲取最新的內容。

3. 許可權控制

前端會有一份路由表，它表示了每一個路由可訪問的許可權。當用戶登入之後，通過 token 獲取使用者的 role ，動態根據使用者的 role 算出其對應有許可權的路由，再通過 router.addRoutes 動態掛載路由。但這些控制都只是頁面級的，說白了前端再怎麼做許可權控制都不是絕對安全的，後端的許可權驗證是逃不掉的。前端控制頁面級的許可權，不同許可權的使用者顯示不同的側邊欄和限制其所能進入的頁面(也做了少許按鈕級別的許可權控制)，後端則會驗證每一個涉及請求的操作，驗證其是否有該操作的許可權，每一個後臺的請求不管是 get 還是 post 都會讓前端在請求 header 裡面攜帶使用者的 token，後端會根據該 token 來驗證使用者是否有許可權執行該操作。若沒有許可權則丟擲一個對應的狀態碼，前端檢測到該狀態碼，做出相對應的操作。

4. 利用 vuex 管理路由表，根據 vuex 中可訪問的路由渲染側邊欄元件。

建立 vue 例項的時候將 vue-router 掛載，但這個時候 vue-router 掛載一些登入或者不用許可權的公用的頁面。

當用戶登入後，獲取用 role，將 role 和路由表每個頁面的需要的許可權作比較，生成終端使用者可訪問的路由表。

呼叫 router.addRoutes(store.getters.addRouters)新增使用者可訪問的路由。

使用 vuex 管理路由表，根據 vuex 中可訪問的路由渲染側邊欄元件。

vuex做資料請求重新整理頁面，資料可能會發生丟失這個問題怎麼解決

因為 store 裡的資料是儲存在執行記憶體中的,當頁面重新整理時，頁面會重新載入 vue 例項，store 裡面的資料就會被重新賦值初始化。

所以我們可以在修改 store 的資料同時將資料再存一份到本地儲存(localStorage 或者 sessionStorage),本地儲存的內容是存在瀏覽器裡面的，不會因為重新整理而丟失。

我們也可以用過比如 vuex-persistedstate 這樣的第三方包來幫助我們做 vuex 的持久化資料。

route和router的區別

route 和 router 是vue-router中經常會操作的兩個物件， route 表示當前的路由資訊物件，包含了當前 URL 解析得到的資訊，包含當前的路徑、引數、query物件等，一般用於獲取跳轉時傳入的引數。

router 物件是全域性路由的例項，是router構造方法的例項，一般使用者路由跳轉，如

router.push() 、 router.replace() 等方法