2021年前端面試題-vue篇（轉載）

1、多個元件之間如何拆分各自的state，每塊小的元件有自己的狀態，它們之間還有一些公共的狀態需要維護，如何思考這塊

（1）公共的資料部分可以提升至和他們最近的父元件，由父元件派發
（2）公共資料可以放到vuex中統一管理，各元件分別獲取

2、key主要是解決哪一類的問題，為什麼不建議用索引index（重繪）

（1）key的作用主要是為了高效的更新虛擬DOM
（2）當以index為key值時，如果陣列長度發生變化，會導致key的變化，比如刪除其中某一項，那麼index會相應變化。
所以用index作為key和不加index沒有什麼區別，都不能提升效能。一般用每項資料的唯一值來作為key，就算陣列長度變化，也不會影響到這個key

3、介紹虛擬DOM

（1）讓我們不用直接操作DOM元素，只操作資料便可以重新渲染頁面
（2）虛擬dom
虛擬dom是為了解決瀏覽器效能問題而被設計出來的
當操作資料時，將改變的dom元素快取起來，都計算完後再通過比較對映到真實的dom樹上
（3）diff演算法比較新舊虛擬dom
如果節點型別相同，則比較資料，修改資料
如果節點不同，直接幹掉節點及所有子節點，插入新的節點
如果給每個節點都設定了唯一的key，就可以準確的找到需要改變的內容，否則就會出現修改一個地方導致其他地方都改變的情況。
比如A-B-C-D, 我要插入新節點A-B-M-C-D,實際上改變的了C和D。但是設定了key，就可以準確的找到B C並插入

dom樹介紹直通車 ：https://www.jianshu.com/p/af0b398602bc（個人覺得還不錯很容易懂）

4、介紹高階元件
5、如何解決props層級過深的問題

(1)使用vuex
(2)傳遞資料，使用以下接收（均不含被props接收的資料）
this.$attrs 接收屬性
this.$listeners 接收事件（不含被 .native 修飾符的事件）

6、vue中如何編寫可複用的元件

（1）以元件功能命名
（2）只負責ui的展示和互動動畫，不要在元件裡與伺服器打交道（獲取非同步資料等）
（3）可複用元件不會因元件使用的位置、場景而變化。儘量減少對外部條件的依賴。

7、vue中物件更改檢測的注意事項

8、解決非工程化專案初始化頁面閃動問題

vue頁面在載入的時候閃爍花括號{{}}，使用v-cloak，隱藏未編譯時候的標籤
//css樣式
[v-cloak] {
    display: none;
}

//html程式碼
<div v-cloak>
   <ul>
      <li >{{ text }}</li>
   </ul>
</div>

9、十個常用的自定義過濾器

（1）去除空格
（2）時間轉換
（3）大小寫轉換
（4）字串替換
（5）金額字元轉金額/數字轉金額字元
（6）保留兩位小數
（7）判斷字串長度並省略
...
根據自己常用的來說

10、vue彈窗後如何禁止滾動條滾動？

methods : {
   //禁止滾動
   stop(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='hidden';
        document.addEventListener("touchmove",mo,false);//禁止頁面滑動
    },
    /***取消滑動限制***/
    move(){
        var mo=function(e){e.preventDefault();};
        document.body.style.overflow='';//出現滾動條
        document.removeEventListener("touchmove",mo,false);
    }

11、完整的 vue-router 導航解析流程
12、vue-router的幾種例項方法以及引數傳遞
13、vue-router如何定義巢狀路由？

在這種場景下就需要用到巢狀路由

const router = new VueRouter({
  routes: [
    { path: '/testPage', 
　　　 component: testPage,
      children: [
        {
          path: '/sonPageA',
          component: sonPageA
        },
        {
          path: '/sonPageB',
          component: sonPageB
        }， 
      ]
    }，
    {
        // 其他和testPage平級的路由
    }
  ]
})        

14、vue-router如何實現路由懶載入（ 動態載入路由 ）
15、vue-router路由的兩種模式

 vue-router中預設使用的是hash模式
（1）hash模式
http://localhost:8080/#/pageA
hash 的值為 #/pageA
改變hash，瀏覽器本身不會有任何請求伺服器動作的，但是頁面狀態和url已經關聯起來了。
（2）history模式
http://localhost:8080/ 正常的而路徑，並沒有#

16、vuex的核心概念

state => 基本資料 
getters => 從基本資料派生的資料 
mutations => 修改資料，同步 
actions => 修改資料，非同步 
modules => 模組化Vuex

17、vue如何優化首屏載入速度？

（1）按需載入元件，不一次性載入所有元件
（2）減少打包js，如果打包後的js檔案過大，會阻塞載入。如下：
A、在index.html檔案中：
<script src="/static/common/js/vue.min.js"></script>
B、在vue.config.js檔案中配置:
config.externals({
      vue: 'Vue',
 })
配置兩個步驟，不打包vue
（3）關閉sourcemap，開啟壓縮程式碼
vue.config.js檔案中配置：productionSourceMap: false,
（4）加個好看的loading效果

18、Vue.js 全域性執行機制
19、響應式系統的基本原理
20、怎麼註冊外掛

使用全域性方法Vue.use()
Vue.use( MyPlugin )

com.js中
import com from './xx.vue'
let test = {}
test.install = function(Vue,options){
    Vue.component(panel.name, panel)  // 註冊全域性元件
}
export default com

main.js中
import com from './com.js'
Vue.use(com)

所有vue檔案中都可以呼叫元件<com></com>

21、如何編譯template 模板？

compile編譯會有三個過程
（1）parse 根據正則進行字串解析，得到指令、class、style等資料，形成語法樹（AST）
（2）對 parse 生成的 AST 進行靜態內容的優化，標記靜態節點（和資料沒有關係不需要每次都重新整理的內容），標記靜態根節點。
（3）generate 生成 render
生成 render 的 generate 函式的輸入也是 AST，它遞迴了 AST 樹，為不同的 AST 節點建立了不同的內部呼叫方法，等待後面的呼叫。

compile編譯模板好文直通車:https://segmentfault.com/a/1190000012922342

22、diff演算法

diff演算法比較新舊虛擬dom
如果節點型別相同，則比較資料，修改資料
如果節點不同，直接幹掉節點及所有子節點，插入新的節點
如果給每個節點都設定了唯一的key，就可以準確的找到需要改變的內容，否則就會出現修改一個地方導致其他地方都改變的情況。比如A-B-C-D, 我要插入新節點A-B-M-C-D,實際上改變的了C和D。但是設定了key，就可以準確的找到B C並插入

23、批量非同步更新策略及 nextTick 原理？

（1）批量非同步策略
Vue 在修改資料後，檢視不會立刻更新，而是等同一事件迴圈中的所有資料變化完成之後，再統一進行檢視更新。
（2）nextTick
在下一次DOM更新迴圈結束之後執行延遲迴調

24、vue中proxy代理？

25、vue開發命令 npm run dev 輸入後的執行過程

（1）npm run dev是執行配置在package.json中的指令碼
（2）呼叫了webpack配置檔案
（3）配置檔案中呼叫了main.js
（4）main.js用到了一個html元素#app，引用路由等開始vue的模板編譯

26、devDependencies和dependencies的區別

（1）devDependencies
用於本地開發，打包時生產環境不會打包這些依賴
（2）dependencies
開發環境能用，生產環境也能用。生產環境會被打包

27、依賴版本~和^的區別

（1）~
會匹配最近的小版本依賴包，比如~1.2.3會匹配所有1.2.x版本，但是不包括1.3.0
（2）^
會匹配最新的大版本依賴包，比如^1.2.3會匹配所有1.x.x的包，包括1.3.0，但是不包括2.0.0

28、外掛機制

29、router的meta有什麼用

在meta物件中可以設定一些狀態，通常設定標題或是否需要快取。$route.meta.keepAlive/$route.meta.title
{
    path:"/test",
    name:"test",
    component:()=>import("@/components/test"),
    meta:{
        title:"測試頁面", //配置title
        keepAlive: true //是否快取
    }
}

30、如果子元件直接修改父元件的值會發生什麼？怎麼解決，要修改多個數據怎麼辦？

如果修改的不是引用型別的值時會報錯，告訴我們不能直接修改父元件的值。
(1)可以使用.sync修飾符來修改值，對一個 prop 進行“雙向繫結”。（注意.sync 修飾符的 v-bind 不能和表示式一起使用）
(2)父元件將改變值的方法傳遞給子元件