2020 前端面試題上 vue篇

沒有特別的幸運，那麼就特別的努力！！！

2020 前端面試題上 vue篇

• vue篇
• vue 雙向綁定原理
• v-model 的原理
• scoped樣式穿透
• 組件之間的傳值通訊
• axios攔截器怎麼配
• 自定義指令
• vuex
• computed 和 watch區別
• filter與computed
• 計算屬性——判斷是否有圖片
• v-if & v-show & v-for
• v-bind & v-mode
• vue生命週期
• $set , $get()
• trim 過濾首位空格
• 談談你對 keep-alive 的瞭解
• 組件中 data 爲何是一個函數？
• vue 父組件調用子組件方法
• vue-router 路由模式有幾種？
• 動態路由
• delete與vue.delete區別?
• Vue2.0 v-for 中 :key 到底有什麼用？
• vue相對於jq好處，優勢
• axios怎麼作到同步
• ajax與axios的區別？
• sass與less區別
• 你都作過哪些Vue的性能優化？
• 結語

vue篇

Vue.js是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，而且很是容易學習，很是容易與其它庫或已有項目整合。另外一方面，Vue 徹底有能力驅動採用單文件組件和Vue生態系統支持的庫開發的複雜單頁應用。

vue 雙向綁定原理

Vue是採用數據劫持結合發佈/訂閱模式的方式，經過Object.defineProperty() 來劫持各個屬性的setter，getter，而後通知訂閱者，訂閱者會觸發它的update方法，對視圖進行更新。

v-model 的原理

v-model是vue的一個語法糖,經過v-bind去單項綁定vue實例裏面的data數據，而後再經過各類事件好比@change @input等去進行觸發事件,從而達到修改實例數據的值

● text 和 textarea 元素使用 value 屬性和 input 事件；
● checkbox 和 radio 使用 checked 屬性和 change 事件；
● select 字段將 value 做爲 prop 並將 change 做爲事件

scoped樣式穿透

*** 對於less或者sass等預編譯，是不支持>>>操做符的，可使用/deep/來替換>>>操做符
方法一： deep

<style lang="less" scoped> .wrap /deep/ .box{
        background: red;
    }
</style>

方法二： 深度選擇器

<style scoped> .parent >>> .child {
        background: red
      }
</style>

組件之間的傳值通訊

1. 父組件給子組件傳值經過props
2. 子組件給父組件傳值經過$emit觸發回調
3. 兄弟組件通訊，經過實例一個vue實例eventBus做爲媒介，要相互通訊的兄弟組件之中，都引入eventBus
4. 多級組件傳遞數據，僅僅傳遞數據不作中間處理， a t t r s / attrs/ attrs/listeners
   $attrs 存放父組件中非綁定Props屬性
   $listeners 存放父組件中綁定非原生事件
   
   
5. provide / inject API 主要解決了跨級組件間的通訊問題，
   主要是子組件獲取上級組件的狀態，跨級組件間創建了一種主動提供與依賴注入關係
   
6. 公共組件倉庫vuex
   https://segmentfault.com/a/1190000019208626 參考組件傳值6種
   

axios攔截器怎麼配

// 添加請求攔截器
axios.interceptors.request.use(function (config) {
    // 在發送請求以前作些什麼
    return config;
}, function (error) {
    // 對請求錯誤作些什麼
    return Promise.reject(error);
});
// 添加響應攔截器
axios.interceptors.response.use(function (response) {
    // 對響應數據作點什麼
    return response;
  }, function (error) {
    // 對響應錯誤作點什麼
    return Promise.reject(error);
  })

自定義指令

經過directives指令，裏面有幾個鉤子 最經常使用的就是bind，只調用一次執行初始化操做，它裏面有兩個參數 bind(el,binding){} el能夠直接操做dom，binding一個對象，裏面包含property一些屬性。

directives:{ //自定義局部指令
      focus:{
           bind(el,binding){ },
            
           inserted(el,binding){
                 el.focus();
           }
      }
 }

vuex

vuex：模塊化管理，至關於一個公共組將倉庫
vuex五大核心屬性：state，getter，mutation，action，module
事實上4個重要參數，module將 store 分割成模塊，每一個模塊包含上面4個參數，使得結構更加完善。

四個重要參數（state，getters , mutations , actions）
查-----> state (物質)-----存放數據 $store.state.XXX
查------> getters 特定的物質------ $store.getters.XX

改-------> mutations 倉庫管理員-------- 惟一 改變數據state值
通常放同步數據，不推薦異步寫法 且 只能單獨改變
改-----> actions 倉庫總監 不能之間改變數據，必須經過commit方法 提交給mutations，從而改變state值
異步處理，流程判斷mount

運用：Actions
在mounted:{} 方 法 裏 面 — — t h i s . 方法裏面——this. 方法裏面——this.store.dispatch(「getGoods」)
方法2：輔助函數——mapActions——mounted:{}$方法裏面 直接this.getGoods()

computed 和 watch區別

computed-----計算屬性 該屬性是將數據掛載vue實例上 具備緩存 優勢：避免重複計算
watch------監聽 起 觀察做用 監聽已經掛載vue實例上的數據

filter與computed

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

計算屬性——判斷是否有圖片

<img class="cImg" :src="formatFull(item.picture)" alt="">

computed: {
    formatFull() {
     return function(image) {
        if(image) {
          return ourl + image
        }else {
            return defaultImg
        }
      }
    }
  },

v-if & v-show & v-for

v-show / v-if
v-if判斷條件少 v-show適用於頻繁切換
v-if：直接操做dom樹的新增和移除。
v-show隱藏則是爲該元素添加css–display:none，dom元素還在。

當 v-if 與 v-for 一塊兒使用時，v-for 具備比 v-if 更高的優先級。
解決方案：
v-for和v-if不該該一塊兒使用，必要狀況下應該替換成computed 計算屬性，filter過濾。

v-bind & v-mode

v-bind:綁定屬性： :style :src :class

<div :class="[Type==2?'timeDate active':'timeDate']">月</div>

v-mode:在表單控件或者組件上建立 雙向綁定。(能夠理解數據的雙向綁定)
表單事件——@change，@input 實時觸發，@click

vue生命週期

生命週期： Vue 實例從建立到銷燬的過程，就是生命週期。
從開始建立、初始化數據、編譯模板、掛載Dom→渲染、更新→渲染、銷燬等一系列過程，稱之爲 Vue 的生命週期。

beforeCreate 虛擬dom建立前 el，data都是undefined =>用於加入loading動畫
created 虛擬dom建立完成，el是underfinded 而data（數據）是初始化 =>結束loading動畫

beforeMount 元素掛載前， el，data已經初始化 =>虛擬dom解析， 數據未渲染
mounted 元素掛載後 => 對應的數據渲染完成

beforeUpdate 更新前
updated 更新後

beforeDestroy 銷燬前 => 用於定時器的清除，事件銷燬等
destroyed 銷燬後

$set , $get()

vue中set用途——vue實例已經建立好了，有時候須要再次給數據賦值時，並不能在視圖中改變
Vue.set(object,key,value) //設置，添加屬性 data裏面對象
//第一個操做對象，第二個鍵名，第三個鍵值

var vm=new Vue({
        el:'#itapp',
        data:{
            user:{
                id:1001,
                name:'tom'
            }
        },

this.$set(object,key,value)   //實例方法，添加屬性（推薦）
    //this.$set(this.user,'age',25);

get()讀取時會觸發

trim 過濾首位空格

若是要自動過濾用戶輸入的首尾空白字符，能夠給 v-model 添加 trim 修飾符：

<input v-model.trim="msg">

談談你對 keep-alive 的瞭解

keep-alive 是 Vue 內置的一個組件，可使被包含的組件保留狀態，避免從新渲染

1. 用於緩存組件
2. 對應兩個鉤子函數 activated 和 deactivated ------當組件激活時觸發activated,當組件移除時觸發deactivated

組件中 data 爲何是一個函數？

組件中data必須是一個函數,否則data裏面的屬性會相互影響
若是data是一個對象,這樣做用域就沒有隔離,子組件中的data會相互影響

vue 父組件調用子組件方法

父組件-------- this.$ref

//父組件
<template>
  <div>
    <button @click="clickParent">點擊</button>
    <child ref="mychild"></child>
  </div>
</template>
 
<script>
  import Child from './child';
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿嘿嘿");
      }
    }
  }
</script>

//子組件
<template>
  <div>
    child
  </div>
</template>
 
<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e)
      }
    }
  }
</script>

vue-router 路由模式有幾種？

默認hash

1. hash 支持全部瀏覽器,
   hash發生變化的url都會被瀏覽器記錄下來,
   hashchange 事件來監聽 hash 值的變化
   
   
2. History HTML5 提供了 History API 來實現 URL 的變化,
   URL中的#號就被去除了。
   可使用 popstate 事件來監聽 url 的變化
   history.pushState() 或 history.replaceState() 不會觸發 popstate 事件，這時咱們須要手動觸發頁面跳轉（渲染）
   
   
   
3. abstract 支持全部 JavaScript 運行環境

動態路由

2種方案：

1. 後端處理，前端處理就比較方便，Router.addRoutes()
2. 前端處理，再路由界面添加屬性meta:{}，再借助路由守衛（to，from，next）

delete與vue.delete區別?

delte會刪除數組的值，可是它依然會在內存中佔位置
而vue.delete會刪除數組在內存中的佔位

let arr1 = [1,2,3]
let arr2 = [1,2,3]
delete arr1[1]
this.$delete(arr2,2)
console.log(arr1)    //【1, empty, 3】
console.log(arr2)    //【1,2】

Vue2.0 v-for 中 :key 到底有什麼用？

1.用 id 做爲 key 就好了
2.永遠不要用 index 做爲 key
3. 經過這個key 咱們的diff操做能夠更準確·更快速

vue相對於jq好處，優勢

vue將數據層和視圖層分離開。採用虛擬dom，減小了dom操做，(虛擬dom 是js對象模擬dom，在操做過程當中不會直接操做dom，等待虛擬dom操做完成，只改變開始時和結束時變化，這裏面纔有diff算法)
因此說 vue無論代碼結構，操做性能，模塊化，單頁面運用都要優於jq

axios怎麼作到同步

es7 async/await

ajax與axios的區別？

axios提供併發封裝(同時進行多個請求，不在意返回順序)，體積小
axios 是一個基於Promise 用於瀏覽器和 node 的 HTTP 客戶端，本質上也是對原生XHR的封裝

sass與less區別

a.編譯環境不一樣，sass在服務端處理，less在瀏覽器端處理
b.變量符號不同，less用@ sass用$
c.sass支持條件語句，less不支持

你都作過哪些Vue的性能優化？

儘可能減小data中的數據，data中的數據都會增長getter和setter，會收集對應的watcher
v-if和v-for不能連用
SPA 頁面採用keep-alive緩存組件
使用路由懶加載、異步組件
防抖、節流
圖片懶加載
第三方模塊按需導入

結語

因爲精力時間及篇幅有限，這篇就先寫到這。你們慢慢來不急！！！
下篇內容我會寫下
webpack相關配置，性能優化
js相關基礎，閉包，原型，原型鏈，防抖，節流等
css一些相關樣式
es6
瀏覽器
服務器，nginx等

在面試中，不少領域並無真正的答案，能回答到什麼樣的深度，仍是得靠本身真正的去使用和研究。

但願能幫助到你們，同時祝願你們在開發旅途中愉快！！！

拿着 不謝 請叫我「錘」 ！！！