vue項目常見問題總結

時間 2019-11-10

標籤 vue 項目常見問題總結简体版

原文原文鏈接

vue中爲何使用key?
若是不使用 key，Vue 會使用一種最大限度減小動態元素而且儘量的嘗試修復/再利用相同類型元素的算法。使用 key，它會基於 key 的變化從新排列元素順序，而且會移除 key 不存在的元素。css

vue項目中websocket的使用。前端

一、定義websocket.js文件，使用install註冊組件,代碼結構以下：

export default {
    install(Vue) {
        Vue.prototype.websocket = null;
        var timerDate = null;
        // 創建鏈接的方法
        Vue.prototype.create_websocket = function(obj) {
         this.websocket.onerror = function() {}
         this.websocket.onmessage = function() {}
         this.websocket.onopen = function() {}
         this.websocket.onclose = function() {}
        }
    }
}
websocket的readStatus狀態有 0,1，2,3

二、在main.js中引入並掛載到Vue上
import socket from "./utils/websocket"
Vue.use(socket)

3.vue項目中form表單組件的封裝vue

4.vue項目中table組件的封裝react

5.vue項目中form表單的disabled屬性
使用場景：表單初始化時爲disabled禁止修改狀態，當點擊修改按鈕的時候，表單爲可編輯狀態。能夠經過對form表單的es6

6.vant-circle的使用中遇到的問題web

7.vue項目中字體圖標庫 fontawsome的使用算法

一、npm安裝font-awesome: cnpm install font-awesome --save
二、在main.js中引入：import 'font-awesome/css/font-awesome.min.css'
三、在頁面中使用：<i class="fa fa-align-justify"></i>

8.refvuex

ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例：

9.setTimeout、Promise、Async/Await 的區別npm

1. setTimeout
console.log('script start')    //1. 打印 script start
setTimeout(function(){
    console.log('settimeout')    // 4. 打印 settimeout
})    // 2. 調用 setTimeout 函數，並定義其完成後執行的回調函數
console.log('script end')    //3. 打印 script start
// 輸出順序：script start->script end->settimeout
2. Promise
Promise自己是同步的當即執行函數， 當在executor中執行resolve或者reject的時候, 此時是異步操做， 會先執行then/catch等，當主棧完成後，纔會去調用resolve/reject中存放的方法執行，打印p的時候，是打印的返回結果，一個Promise實例。

console.log('script start')
let promise1 = new Promise(function (resolve) {
    console.log('promise1')
    resolve()
    console.log('promise1 end')
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 輸出順序: script start->promise1->promise1 end->script end->promise2->settimeout
當JS主線程執行到Promise對象時，

promise1.then() 的回調就是一個 task

promise1 是 resolved或rejected: 那這個 task 就會放入當前事件循環回合的 microtask queue

promise1 是 pending: 這個 task 就會放入 事件循環的將來的某個(可能下一個)回合的 microtask queue 中

setTimeout 的回調也是個 task ，它會被放入 macrotask queue 即便是 0ms 的狀況

3. async/await
async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

// 輸出順序：script start->async1 start->async2->script end->async1 end
async 函數返回一個 Promise 對象，當函數執行的時候，一旦遇到 await 就會先返回，等到觸發的異步操做完成，再執行函數體內後面的語句。能夠理解爲，是讓出了線程，跳出了 async 函數體。

舉個例子：

async function func1() {
    return 1
}

console.log(func1())
在這裏插入圖片描述
很顯然，func1的運行結果其實就是一個Promise對象。所以咱們也可使用then來處理後續邏輯。

func1().then(res => {
    console.log(res);  // 30
})
await的含義爲等待，也就是 async 函數須要等待await後的函數執行完成而且有了返回結果（Promise對象）以後，才能繼續執行下面的代碼。await經過返回一個Promise對象來實現同步的效果。

10.前端中的模塊化開發json

答案：模塊化的好處就是，抽離代碼，重複使用。

模塊化和組件化的區別與聯繫：
組件是具體的：按照一些小功能的通用性和可複用性來抽象組件。
組件化更多的關注UI部分，好比用戶看到的彈出框，頁腳，確認按鈕等，這些組件能夠組合成新的組件，又能夠和其餘組件組合組合成新的組件

模塊是抽象的：按照項目業務劃分的大模塊
模塊化側重於數據的封裝，一組相關的組件定義成一個模塊，一個json對象能夠是一個模塊。
封裝以後須要解決的就是模塊之間的依賴，babel是目前比較火的es6轉換器，

11.Promise 構造函數是同步執行仍是異步執行，那麼 then 方法呢？

答案：一、promise函數是同步執行的，.then方法是異步執行的。
二、模塊化的規範，有 CMD 和 AMD
三、CMD (Common Module Definition), 是sea.js在推廣過程當中對模塊定義的規範化產出，主要用於瀏覽器端。它主要特色是：*對於依賴的模塊是延遲執行，依賴能夠就近書寫，等到須要用這個依賴的時候再引入這個依賴，應用有sea.js.*
   AMD規範（Asynchronous Module Definition）：是 RequireJS 在推廣過程當中對模塊定義的規範化產出，也是主要用於瀏覽器端。其特色是：**依賴前置，須要在定義時就寫好須要的依賴，提早執行依賴，應用有require.js**

12.vue兼容IE瀏覽器：

npm下載babel-polyfill模塊：cnpm install babel-polyfill --save
在main.js中引入 require("babel-polyfill");

13.編碼規範

變量在使用前必定要判斷是否存在
不能濫用if和for循環
對於一些普通的if判斷儘量使用雙目運算符，減小代碼量
代碼斜體文字發佈時不能隨便在編碼中輸出console或alert
對於數據的處理能夠藉助第三方插件，如underscore或者lodash
儘量的提取公共的代碼，組件化編碼，提升代碼的複用率及便於後期的進行問題的定位

14.cookie 和 token 都存放在 header 中，爲何不會劫持 token？

cookie：登錄後後端生成一個sessionid放在cookie中返回給客戶端，而且服務端一直記錄着這個sessionid，客戶端之後每次請求都會帶上這個sessionid，服務端經過這個sessionid來驗證身份之類的操做。因此別人拿到了cookie拿到了sessionid後，就能夠徹底替代你。

token：登錄後後端不返回一個token給客戶端，客戶端將這個token存儲起來，而後每次客戶端請求都須要開發者手動將token放在header中帶過去，服務端每次只須要對這個token進行驗證就能使用token中的信息來進行下一步操做了。

xss：（跨站腳本攻擊）用戶經過各類方式將惡意代碼注入到其餘用戶的頁面中。就能夠經過腳本獲取信息，發起請求，之類的操做。

csrf：（跨站請求攻擊），簡單地說，是攻擊者經過一些技術手段欺騙用戶的瀏覽器去訪問一個本身曾經認證過的網站並運行一些操做（如發郵件，發消息，甚至財產操做如轉帳和購買商品）。因爲瀏覽器曾經認證過，因此被訪問的網站會認爲是真正的用戶操做而去運行。這利用了web中用戶身份驗證的一個漏洞：簡單的身份驗證只能保證請求發自某個用戶的瀏覽器，卻不能保證請求自己是用戶自願發出的。csrf並不可以拿到用戶的任何信息，它只是欺騙用戶瀏覽器，讓其以用戶的名義進行操做。

csrf例子：假如一家銀行用以運行轉帳操做的URL地址以下： http://www.examplebank.com/withdraw?account=AccoutName&amount=1000&for=PayeeName
那麼，一個惡意攻擊者能夠在另外一個網站上放置以下代碼： <img src="<http://www.examplebank.com/withdraw?account=Alice&amount=1000&for=Badman>">
若是有帳戶名爲Alice的用戶訪問了惡意站點，而她以前剛訪問過銀行不久，登陸信息還沒有過時，那麼她就會損失1000資金。

上面的兩種攻擊方式，若是被xss攻擊了，無論是token仍是cookie，都能被拿到，因此對於xss攻擊來講，cookie和token沒有什麼區別。可是對於csrf來講就有區別了。

以上面的csrf攻擊爲例：

cookie：用戶點擊了連接，cookie未失效，致使發起請求後後端覺得是用戶正常操做，因而進行扣款操做。
token：用戶點擊連接，因爲瀏覽器不會自動帶上token，因此即便發了請求，後端的token驗證不會經過，因此不會進行扣款操做。
這是我的理解的爲何只劫持cookie不劫持token的緣由。

15.冒泡排序如何實現，時間複雜度是多少，還能夠如何改進？

16.箭頭函數與普通函數（function）的區別是什麼？構造函數（function）可使用 new 生成實例，那麼箭頭函數能夠嗎？爲何？

17.a.b.c.d 和 a'b'['d']，哪一個性能更高？

18.在 Vue 中，子組件爲什麼不能夠修改父組件傳遞的 Prop，若是修改了，Vue 是如何監控到屬性的修改並給出警告的。

子組件爲什麼不能夠修改父組件傳遞的 Prop
單向數據流，易於監測數據的流動，出現了錯誤能夠更加迅速的定位到錯誤發生的位置。
若是修改了，Vue 是如何監控到屬性的修改並給出警告的。

19.介紹http握手過程

客戶端使用https的url訪問web服務器,要求與服務器創建ssl鏈接
web服務器收到客戶端請求後, 會將網站的證書(包含公鑰)傳送一份給客戶端
客戶端收到網站證書後會檢查證書的頒發機構以及過時時間, 若是沒有問題就隨機產生一個祕鑰
客戶端利用公鑰將會話祕鑰加密, 並傳送給服務端, 服務端利用本身的私鑰解密出會話祕鑰
以後服務器與客戶端使用祕鑰加密傳輸

ssl. 加密套接字協議層（一種加密的通信協定，用在使用者與網服器之間，Security Socket Layer）

20.雙向綁定和 vuex 是否衝突?

在嚴格模式中使用Vuex，當用戶輸入時，v-model會試圖直接修改屬性值，但這個修改不是在mutation中修改的，因此會拋出一個錯誤。當須要在組件中使用vuex中的state時，有2種解決方案：
一、在input中綁定value(vuex中的state)，而後監聽input的change或者input事件，在事件回調中調用mutation修改state的值
二、使用帶有setter的雙向綁定計算屬性。見如下例子（來自官方文檔）：
<input v-model="message">
computed: { message: { get () { return this.$store.state.obj.message }, set (value) { this.$store.commit('updateMessage', value) } } }

21.如何把一個字符串的大小寫取反（大寫變小寫小寫變大寫），例如 ’AbC' 變成 'aBc'

function toString (s) {
var arr = s.split('');
var new_arr = arr.map((item) => {
    return item === item.toUpperCase() ? item.toLowerCase() : item.toUpperCase();
});
return new_arr.join('');
}
console.log(processString('AbC'));

22.如何讓一個div水平垂直居中

23.冒泡排序如何實現，時間複雜度是多少，還能夠如何改進？

24.react-router 裏的 <Link> 標籤和標籤有什麼區別?

Link 的本質也是a 標籤。只不過在Link 中禁用了 a 標籤的默認事件，改用了history對象提供的方法進行跳轉。

25.數組裏面有10萬個數據，取第一個元素和第10萬個元素的時間相差多少

數組能夠直接根據索引取的對應的元素，因此無論取哪一個位置的元素的時間複雜度都是 O(1)

得出結論：消耗時間幾乎一致，差別能夠忽略不計

26.a.b.c.d 和 a'b'['d']，哪一個性能更高？

應該是 a.b.c.d 比 a['b']['c']['d'] 性能高點，後者還要考慮 [ ] 中是變量的狀況，再者，從兩種形式的結    構來看，顯然編譯器解析前者要比後者容易些，天然也就快一點。

27.箭頭函數與普通函數（function）的區別是什麼？構造函數（function）可使用 new 生成實例，那麼箭頭函數能夠嗎？爲何？

箭頭函數是普通函數的簡寫，能夠更優雅的定義一個函數，和普通函數相比，有如下幾點差別：

一、函數體內的 this 對象，就是定義時所在的對象，而不是使用時所在的對象。

二、不可使用 arguments 對象，該對象在函數體內不存在。若是要用，能夠用 rest 參數代替。

三、不可使用 yield 命令，所以箭頭函數不能用做 Generator 函數。

四、不可使用 new 命令，由於：

沒有本身的 this，沒法調用 call，apply。
沒有 prototype 屬性 ，而 new 命令在執行時須要將構造函數的 prototype 賦值給新的對象的 __proto__
new 過程大體是這樣的：

function newFunc(father, ...rest) {
  var result = {};
  result.__proto__ = father.prototype;
  var result2 = father.apply(result, rest);
  if (
    (typeof result2 === 'object' || typeof result2 === 'function') &&
    result2 !== null
  ) {
    return result2;
  }
  return result;
}


區別：
1.箭頭函數沒有本身的this屬性、arguments屬性、而普通函數有，箭頭函數的this指向當前函數做用域的this。
new：
2.箭頭函數沒有prototype顯示原型，因此不能做爲構造函數。

箭頭函數帶來的好處：

沒有箭頭函數的時候，函數閉包 var that = this 的事沒少幹，有了箭頭函數，就不須要這麼寫了。
極簡語法，函數式風格，寫一時爽一時，一直寫一直爽！

一、組件刷新

實現方式1：藉助vue組件path地址butong,參數不一樣時，自動刷新的能力，想要刷新當前組件，只須要執行方法:`
```
refresh() {
 this.$router.replace({
   path: "/aboutus/index",
   query: {
     t: Date.now()
   }
 });
},`
```
實現方法2：藉助中間組件，先跳轉到中間組件而後在中間組建中設置當即跳轉回來，用戶看到的效果就相似於刷新了當前頁面。

二、組件內使用高德地圖，組件內數據更新後，更新高德地圖上點的位置和顯示內容

三、vue項目中使用高德地圖

一、註冊key值，
二、引入高德地圖相關js

四、slot在父子組件中的使用

五、關於this的指向問題

六、微信公衆號中，使用微信地圖接口顯示當前位置

注意配置的經緯度字段值類型必須爲number類型，不能爲string類型，不然點擊地圖，將沒法調取微信地圖頁面，也不會報錯。

七、父子路由的配置，子級path自動補全父級path

八、method 不能使用箭頭函數，method 中方法使用定時器須要使用箭頭函數

methods: {
  goPage: function (index) {
    this.newPage = index
  },
  inv: function () {
    this.invt = setInterval(() => {
      this.goPage(this.nextPage)
      console.log(this)
      //此時的this指向是該vue組件，無論在哪使用，指向都是該vue組件
    }, 1000)
  }
}

做者：小生方勤
連接：https://juejin.im/post/5d1a15fc6fb9a07eca6993c3
來源：掘金
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

普通函數中，setInterval() 與 setTimeout() 是 window 對象的函數，因此 this 會指向 window

九、el_table表格嵌套時，嵌套表格樣式錯亂，問題定位發現：當page變爲2時，頁面不只顯示第2頁的數據，第一頁的數據仍然存在。

十、Vue子組件調用父組件的方法

第一種方法是直接在子組件中經過this.$parent.event來調用父組件的方法
第二種方法是在子組件裏用$emit向父組件觸發一個事件，父組件監聽這個事件就好了。

十一、vue中的 ref 是什麼？

ref 被用來給元素或子組件註冊引用信息。引用信息將會註冊在父組件的 $refs 對象上。若是在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；若是用在子組件上，引用就指向組件實例。

十二、$route和$router的區別？

$route是「路由信息對象」，包括path，params，hash，query，fullPath，matched，name等路由信息參數。

$router是'路由實例'對象包括了路由的跳轉方法，鉤子函數等。

1三、input 設置placeholder,注意：一、el-input設置placeholder可能失效，要對input元素進行設置。二、-webkit-input-placeholder屬性前面要加上input及父級class類名。

.placeholder_box input::-webkit-input-placeholder {
  color: #ccc !important;
  z-index: 100000 !important;
  font-size: 14px !important;
}
.placeholder_box input::-moz-placeholder {
  color: #ccc !important;
  z-index: 100000 !important;
  font-size: 14px !important;
}
.placeholder_box input:-ms-input-placeholder {
  color: #ccc !important;
  z-index: 100000 !important;
  font-size: 14px !important;
}

.white_placeholder input::-webkit-input-placeholder {
  color: #fff !important;
  z-index: 100000 !important;
  font-size: 12px !important;
}
.white_placeholder input::-moz-placeholder {
  color: #fff !important;
  z-index: 100000 !important;
  font-size: 12px !important;
}
.white_placeholder input:-ms-input-placeholder {
  color: #fff !important;
  z-index: 100000 !important;
  font-size: 12px !important;
}

1四、wx端代碼修改的時候，不一樣的公衆號須要修改的地方有如下幾點：