趁著這波裁員，總結下新手常見的坑。
1、小白的常見概念混淆
字面量與構建函式
字面量分為： 物件字面、陣列字面量、字串字面量
new Object()則是建構函式
new Array()構造陣列
先說下優缺點
- 物件字面量的宣告比構建函式更加方便
- 空的物件實質上只是滿足以下條件的資料結構：
- __proto__屬性指向Object.prototype
- 其成員列表指向一個空殼
var obj3 = new Object();
var num = 0;
for(var i in obj3){
num++;
}
console.log(num); //0
複製程式碼 物件的成員的存取遵循兩個規則：1、在讀取時，該成員表上的屬性和方法將會被優先訪問到； 2、如果成員表中沒有指定的屬性，那麼會查詢物件的整個原型鏈，直到找到該屬性或者原型鏈的頂部。 所以存取例項中的屬性比存取原型中的屬性效率要高。我們應該採用字面量語法建立物件
var Student = function() {
this.name = 'default';
this.say = function() {
console.log('say hello!');
}
}
var s1 =new Student();
console.log(window.name)
複製程式碼 new的話，對於student內部的this便指向了全域性物件,沒有定義的話.
所以在這裡簡單總結下建構函式、原型、隱式原型和例項的關係：每個建構函式都有一個原型屬性(prototype)，該屬性指向建構函式的原型物件；而例項物件有一個隱式原型屬性(proto)，其指向建構函式的原型物件(obj.proto==Object.prototype)；同時例項物件的原型物件中有一個constructor屬性，其指向建構函式。
this在call與apply與bind中
fn.call(asThis, p1, p2)是函式的正常呼叫方式，當你不確定引數的個數時，就使用apply fn.apply(asThis, params)
bind call和apply是直接呼叫函式，而bind則是返回一個新函式(並沒用呼叫原來的函式)，這個新函式會call原來的函式，call的引數由你指定。
map
// 使用 Map 來找到對應顏色的水果
const fruitColor = newMap()
.set('red', ['apple', 'strawberry'])
.set('yellow', ['banana', 'pineapple'])
.set('purple', ['grape', 'plum']);
function test(color) {
return fruitColor.get(color) || [];
}
複製程式碼typeof 陣列或者null 型別值是object
svg的書寫方式
<svg class="icon"><use :xlink:href="`#i-${icon}`"></use></svg>
複製程式碼debouce與Thorlle
debouce定義：當呼叫動作n毫秒之後，才會執行該動作，若在這n秒之後又呼叫此動作則將重新計算執行時間 Thorlle定義： 無視後來產生的回撥請求。
function createDebounce (callback, time){
var timer
time = time || 300 //預設值
return function () {
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(()=>{
callback()
}, time)
}
}
複製程式碼// fn是我們需要包裝的事件回撥, interval是時間間隔的閾值
function throttle(fn, interval) {
// last為上一次觸發回撥的時間
let last = 0
// 將throttle處理結果當作函式返回
return function () {
let context = this
// 保留呼叫時傳入的引數
let args = arguments
// 記錄本次觸發回撥的時間
let now = +new Date()
//時間差
if (now - last >= interval) {
last = now;
fn.apply(context, args);
}
}
}
複製程式碼if判斷的一些坑
諸如 if 語句之類的條件語句使用 ToBoolean 抽象方法來強制求值它們的表示式，並始終遵循以下簡單規則：
- Objects 求值為 true
- Undefined 求值為 false
- Null 求值為 false
- Booleans 求值為 布林值
- Numbers 如果是 +0、-0、或 NaN 求值為 false ， 否則為 true
- Strings 如果是空字串 '' 求值為 false ， 否則為 true
解釋一下
if ([0] && []) {
// true
// 一個數組 (即使是一個空陣列) 是一個 object, objects 被求值為 true
}
複製程式碼深拷貝與淺拷貝
- 深拷貝的
- JSON.stringify與JSON.parse
- assign
var o1 = { a: 1 };
var o2 = { b: 2 };
var o3 = { c: 3 };
var obj = Object.assign(o1, o2, o3);
console.log(obj); // { a: 1, b: 2, c: 3 }
console.log(o1); // { a: 1, b: 2, c: 3 }， 目標改變了
複製程式碼- 展開操作符...
Array.some的用法
(function s(){
const value="0";
const arrNo = ["", null, "0", 0, "undefined", undefined];
if(arrNo.some(d => d === value)) return console.log('不是想要的值')
})()
複製程式碼Array.forEach用法
var arry1 = [1, 2, 3];
arry1.forEach((item, index, arr)=>{
console.log(arr[index]); //1、2、3
})
複製程式碼Array.from
let hours = [];
for(let i =0; i<24;i++){
hours.push(i +'時')
}
//我們可以寫成以下形式
let hours = Array.from({length:24}, (value, index) => index + '時')
複製程式碼for-in、for-of
for(let i of nums){
of 裡面的值是VALUE
in 裡面的值是key，
for...of 語句遍歷可迭代物件定義要迭代的資料。
for...in 語句以原始插入順序迭代物件的可列舉屬性。
}
複製程式碼擴充套件運算子簡寫
const odd = [1, 3, 4];
const nums = [2, 5, 6, ...odd];
console.log(nums) //[2,5,6,1,3,4]
複製程式碼樂觀與悲觀鎖（這是不知道哪位大神取的名）
悲觀鎖 定義：提交表單時，防止多次提交，我們會在請求前加上標誌位
var block = false
function refesh(){
if(block){
return
}
block = true
return fetch('api')
.then(res => {
block = false
})
.catch(err =>{
block = false
})
}
複製程式碼樂觀鎖 定義：使用者在資源下載完之前，在點選其他元件，我們就會去下載其他資源，之前的請求照常發起，只是無論如何都會被丟棄。
var id = 0
function loading(resources){
var load_id = ++id
PromiseAll(resources)
.then(()=>{
if(load_id === id){
//渲染
} else{
//丟棄
}
})
.catch(()=>{
if(load_id ===id){
//提示錯誤
} else{
//丟棄
}
})
}
複製程式碼Proxy
物件接受兩個引數，第一個引數是需要操作的物件，第二個引數是設定對應攔截的屬性，這裡的屬性同樣也支援 get，set 等等，也就是劫持了對應元素的讀和寫，能夠在其中進行一些操作，最終返回一個 Proxy 物件。
const proxy = new Proxy({}, {
get(target, key) {
console.log('proxy get key', key)
},
set(target, key, value) {
console.log('value', value)
}
})
proxy.info // 'proxy get key info'
proxy.info = 1 // 'value 1'
案例：
const me = {
name: "小明", like: "小紅 ", food: "香菇", musicPlaying: true
};
// const meWithProxy = new Proxy(me, {
// get(target, prop) {
// if (prop === "like") {
// return "學習";
// }
// return target[prop];
// }
// });
const meWithProxy = new Proxy(me, {
set(target, prop, value) {
if (prop === "musicPlaying" && value !== true) {
throw Error("任何妄圖停止音樂的行為都是耍流氓！");
}
target[prop] = value;
}
});
//console.log("sale_check mounted", meWithProxy.like);
console.log.log("sale_check mounted", meWithProxy.food);
console.log("sale_check mounted", meWithProxy.musicPlaying = false);
複製程式碼小白的vue入坑之路
1.vue中v-if中用key管理可複用的元素
我們在不要複用的input框加入了相對應的key，而label元素仍然會被高效的複用。
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="emial-input">
</template>
複製程式碼動態插入相對應script
computed與watch
計算屬性顧名思義就是通過其他變數計算得來的另一個屬性，計算屬性具有快取。計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。
偵聽器watch是偵聽一個特定的值，當該值變化時執行特定的函式。例如分頁元件中，我們可以監聽當前頁碼，當頁碼變化時執行對應的獲取資料的函式
- 從屬性名上，computed是計算屬性，也就是依賴其它的屬性計算所得出最後的值。watch是去監聽一個值的變化，然後執行相對應的函式。
- 從實現上，computed的值在get執行後是會快取的，只有在它依賴的屬性值改變之後，下一次獲取computed的值時才會重新呼叫對應的getter來計算。watch在每次監聽的值變化時，都會執行回撥。 其實從這一點來看，都是在依賴的值變化之後，去執行回撥。很多功能本來就很多屬性都可以用，只不過有更適合的。
如果一個值依賴多個屬性（多對一），用computed肯定是更加方便的。 如果一個值變化後會引起一系列操作，或者一個值變化會引起一系列值的變化（一對多），用watch更加方便一些。
- watch的回撥裡面會傳入監聽屬性的新舊值，通過這兩個值可以做一些特定的操作。computed通常就是簡單的計算。 下面是兩者之間的互換
<input >
watch: {
word() {
this.$emit("update:keyword", this.word);
}
}
上面這個data裡面定義word
computed: {
word: {
get() {
return this.keyword;
},
set(val) {
this.$emit("update:keyword", val);
}
}
}
複製程式碼refs的一些使用注意
ref 被用來給元素或子元件註冊引用資訊。引用資訊將會註冊在父元件的 $refs物件上。
關於 ref 註冊時間的重要說明：因為 ref 本身是作為渲染結果被建立的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$ refs 也不是響應式的，因此你不應該試圖用它在模板中做資料繫結。 你應該避免在模板或計算屬性中訪問 $refs。 還有考慮到他們refs的唯一性，例如：兩個表單取同樣的話，只會引用到後面那個。
父子元件通訊
//父
<Child-one :parentMessage="parentMessage" @childEvent='childtMethod'></Child-one>
methods:{
childMethod(){
alert('元件的訊息')
}
}
//子
<button @click="childMethod">子元件</button>
props:{
parentMessage:{
type: String,
default: '子元件'
}
}
methods:{
childMethod(){
this.$emit('childEvent', '元件的資訊')
}
}
複製程式碼非父子元件的資料傳遞可以採用
prop是單向資料流，所以prop接受的資料無法雙向繫結，我們可以採用
子元件中通過 on(eventName)來監聽事件，
- 定義一個區域性變數，並用prop的值初始化它:
props:['initialCounter'],
data:function(){
return {counter: this.initialCounter}
}
複製程式碼- 定義一個計算屬性，處理prop的值並返回。
props:['size'],
computed:{
normalizedSize:function(){
return this.size.trim().toLowerCase()
}
}
複製程式碼vue.extend
1.使用vue構造器,建立一個子類,引數是包含元件選項的物件. 2.是全域性的. 結論: Vue.extend實際是建立一個擴充套件例項構造器,對應的初始化構造器,並將其掛載到標籤上
vue.mixins
結論:
- 1.mixins執行的順序為mixins>mixinTwo>created(vue例項的生命週期鉤子);
- 2.選項中資料屬性如data,methods,後面執行的回覆蓋前面的,而生命週期鉤子都會執行 後面執行created，而我們created裡面放著getSum(){console.log(‘這是vue例項的getSum’)}; -3.extends用法和mixins很相似,只不過接收的引數是簡單的選項物件或建構函式,所以extends只能單次擴充套件一個元件
結論: 1.extends執行順序為:extends>mixins>mixinTwo>created 2.定義的屬性覆蓋規則和mixins一致
vue.install
1.install是開發vue的外掛,這個方法的第一個引數是 Vue 構造器，第二個引數是一個可選的選項物件(可選) 2.vue.use方法可以呼叫install方法,會自動阻止多次註冊相同外掛.
let install = function(Vue){
components.map(component=>{
Vue.component(Vue.component.name, Vue.component)
})
}
複製程式碼總結下這幾個的區別
- vue.extend和vue.use的使用，可以構建自己的UI庫
- Vue.extend和Vue.component是為了建立構造器和元件;
- mixins和extends是為了拓展元件;
- install是開發外掛;
總的順序關係: Vue.extend>Vue.component>extends>mixins
元件name的作用
- 當專案使用keep-alive時，可搭配元件name進行快取過濾
- DOM做遞迴元件時 比如說detail.vue元件裡有個list.vue子元件，遞迴迭代時需要呼叫自身name
- 當你用vue-tools時 vue-devtools除錯工具裡顯示的組見名稱是由vue中元件name決定的
watcher有兩個配置
（1）深度 watcher deep: true （2）該回調將會在偵聽開始之後被立即呼叫 immediate: true
beforeDestroy
vue 的beforeDestroy（）生命週期鉤子是一個解決基於 Vue Router 的應用中的這類問題的好地方。 beforeDestroy: function () { this.choicesSelect.destroy() } 可以配合deactivated 使用，可以去除keep-alive的鉤子
keep-alive
當你用keep-alive包裹一個元件後，它的狀態就會保留，因此就留在了記憶體裡。
其他
1.diff演算法
vue中key的作用主要是為了高效的更新虛擬DOM，其主要的邏輯大概下面這樣
2.get和post在快取方面的區別
get請求類似於查詢的過程，使用者獲取資料，可以不用每次都與資料庫連線，所以可以使用快取。 post不同，post做的一般是修改和刪除的工作，所以必須與資料庫互動，所以不能使用快取。 因此get請求適合於請求快取。
3.setTimeout、process.nextTick、promise
Event Loop佇列任務有巨集任務、微任務
常見的 macro-task 比如： setTimeout、setInterval、 setImmediate、script（整體程式碼）、 I/O 操作、UI 渲染等。
常見的 micro-task 比如: process.nextTick、Promise、MutationObserver 等。 macro-task出隊時，任務是一個一個執行的，micro-task一隊一隊執行的。
它們的執行優先順序是process.nextTick>promise>setTimeout
4.css的min-width和max-width
min-width會繼承父元素,min-height不會繼承父元素，若無父元素，也就是最外層的body，則預設100%
- 以上是一些工作遇到的問題，希望能幫助到一些人。由於能力有限，可能理解有誤，歡迎指出。
- 不喜勿噴，多謝合作
- 求職啟示：深圳有坑的可以聯絡我qq:1039460820,或者在評論區留下您的聯絡方式。