前端總結面試題（每日更新）第一天

面試第一天

vuex的屬性

1. state：聲明定義數據
2. getters：存放有依賴關係的數據，相似於computed計算屬性
3. mutation：同步的修改state中的數據
4. actions：異步修改數據
5. modules：讓每個模塊都有本身的state，getters，mutation，actions

vue雙向綁定的原理

Vue實現雙向綁定的原理就是利用了Object.defineProperty()這個方法從新定義了對象獲取屬性值（get）和設置屬性值（set）的操做來實現的。

vue全家桶有什麼（❎）

1. Vue-cli項目構建工具
2. vue-router 路由
3. vuex狀態管理
4. axios http 請求工具
5. webpack

vue常見的一些指令

1. v-for 如今要配合 :key使用
2. v-if 是否渲染這個標籤
3. v-bind 簡寫:
4. v-show display控制 none/block
5. v-else 配合v-if使用
6. v-on 簡寫@

vue中的data爲何是返回的函數

由於一個組件是能夠共享的，但他們的data是私有的，因此每一個組件都要return一個新的對象，返回一個惟一的對象，不要和其餘組件共用一個對象

合併數組的方法

1. concat

var a = [1,2,3]
var b = [4,5,6]
var c = a.concat(b)  //c = [1,2,3,4,5,6]
複製代碼

2. apply

var a = [1,2,3]
var b = [4,5,6]
var c = a.push.apply(a,b)
複製代碼

3. 數組合並去重

let arr1 = [1,2,3]
let arr2 = [2,3,4]
let arr = arr1.concat(arr2) //合併數組
let arrNew = new Set(arr)  //經過set集合去重
Array.from(arrNew)  //將set集合轉化爲數組
複製代碼

垂直居中的方式（❎）

1. absolute+transform：絕對定位+轉換

.parent {
    position: relative;
}
.child {
    position: absolute;
    left: 50%;
    rigth: 50%;
    transfrom: translate(-50%，-50%)
}
複製代碼

2. flex + justify-content + align-items

.parent {
    display: flex;
    justify-content: center; //水平居中
    align-items: center;   //垂直居中
}
複製代碼

面試次日

call,apply,bind的區別，並實現方法（❎）

1. call和apply都是爲了解決改變this的指向。做用都相同，只是傳參的方式不一樣。除了第一個參數外，call能夠接受一個參數的列表，apply只接受一個參數的數組

call的實現思路

//call的實現思路
Function.prototype.myCall = function (context){
  if (typeof this !== 'function') {
     throw new TypeError('Error')
  }
  var context = context || window
  //給context添加一個屬性
  context.fn = this
  //經過參數僞數組將context後面的參數取出來
  var args = [...arguments].slice(1)
  var result = context.fn(...args)
  //刪除 fn
  delete context.fn
  return result
}
複製代碼

apply的實現思路

//apply的實現思路
Function.prototype.myApply = function (context) {
    if (typeof this !== 'function') {
     throw new TypeError('Error')
  }
    var context = context || window
    //爲context添加一個屬性
    context.fn = this
    var result 
    //判斷是否存在第二個參數
    //若是存在就將第二個參數也展開
    if(arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn
    return result
}
複製代碼

bind的實現思路：bind返回了一個函數，對於函數來講有兩種調用方式，一種是直接的調用，一種是經過new的方式

Function.prototype.myBind = function (context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    const _this = this 
    const args = [...arguments].slice(1)
    //返回一個函數
    return function F () {
        if (this instanceof F) {
            return new _this(...args, ...arguments)
        }
        return _this.apply(context,args.concat(...arguments))
    }
}
複製代碼

vue中爲何使用axios

vue是虛擬DOM操做的，JQuery.ajax和都須要操做DOM，官方不推薦，並且axios自己就能夠解決回調地獄的問題

cookie和session和window.localstore的區別（❎）

loaclStorage聲明週期是永久的，存放數據通常爲5MB；sessionStorage僅在當前會話下有效，關閉頁面或者瀏覽器後被清除，存放數據大小通常爲5MB；cookie具備極高的擴展性和可用性，存放數據大小爲4k左右，有個數限制，通常不能超過20個。localStorage、sessionStorage、Cookie共同點：都是保存在瀏覽器端，且同源的。

new操做的過程（❎）

在調用new的過程當中會發生四件事：

1. 新生成了一個對象
2. 連接到原型
3. 綁定this
4. 返回新對象 其實咱們徹底能夠本身實現一個new的過程

function createNew() {
  let obj  = {}
  let Sunday  = [].shift.call(arguments)
  obj.__proto__ = Sunday.prototype
  let result = Sunday.apply(obj,arguments)
  return result instanceof Object ? result : obj
}
複製代碼

vue-router的原理（❎）

vue-router路由提供了兩種路由模式：hash模式和history模式。

• hash模式：ue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。
• history模式：若是不想要很醜的 hash，咱們能夠用路由的 history 模式，這種模式充分利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面

vue組件通訊

組件通訊通常分爲三種：

1. 父子組件通訊

• 父組件經過props傳遞給子組件數據，子組件經過$emit發送數據傳遞數據，子組件不能修改父組件的數據，父子組件通訊屬於典型的單向數據流。

2. 兄弟組件通訊

• 對於這種狀況能夠經過查找父組件中的子組件實現，也就是 this.children，在 $children 中能夠經過組件 name 查詢到須要的組件實例，而後進行通訊。

3. 跨多層級組件通訊 待定