1、小白的常見概念混淆與常用技巧

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屬性，其指向構造函數。

2）this在call與apply與bind中

fn.call(asThis, p1, p2)是函數的正常調用方式，當你不確定參數的個數時，就使用apply fn.apply(asThis, params)

bind call和apply是直接調用函數，而bind則是返回一個新函數(并沒用調用原來的函數)，這個新函數會call原來的函數，call的參數由你指定。

3）map的使用技巧

// 使用 Map 來找到對應顏色的水果 const fruitColor = newMap().set('red', ['apple', 'strawberry']).set('yellow', ['banana', 'pineapple']).set('purple', ['grape', 'plum']); function test(color) {return fruitColor.get(color) || []; } 復制代碼

4）typeof 數組或者null 判斷出來的類型值是object

5）svg的書寫方式

<svg class="icon"><use :xlink:href="`#i-${icon}`"></use></svg> 復制代碼

6）debouce與Thorlle

• debouce定義：當調用動作n毫秒之后，才會執行該動作，若在這n秒之后又調用此動作則將重新計算執行時間
• Thorlle定義：節流無視后來產生的回調請求。

function createDebounce (callback, time){var timertime = 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);}}}復制代碼

7）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 } 復制代碼

8）深拷貝與淺拷貝

深拷貝的

• JSON.stringify與JSON.parse 2.淺拷貝
• 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 }， 目標改變了 復制代碼

• 展開操作符...

9）Array.some的用法

(function s(){const value="0";const arrNo = ["", null, "0", 0, "undefined", undefined];if(arrNo.some(d => d === value)) return console.log('不是想要的值') })() 復制代碼

10）Array.forEach用法

var arry1 = [1, 2, 3]; arry1.forEach((item, index, arr)=>{console.log(arr[index]); //1、2、3 }) 復制代碼

11）Array.from

let hours = []; for(let i =0; i<24;i++){hours.push(i +'時') } //我們可以寫成以下形式 let hours = Array.from({length:24}, (value, index) => index + '時') 復制代碼

12）for-in、for-of

for(let i of nums){of 里面的值是VALUEin 里面的值是key，for...of 語句遍歷可迭代對象定義要迭代的數據。for...in 語句以原始插入順序迭代對象的可枚舉屬性。 } 復制代碼

13）擴展運算符簡寫

const odd = [1, 3, 4];const nums = [2, 5, 6, ...odd];console.log(nums) //[2,5,6,1,3,4] 復制代碼

14）樂觀與悲觀鎖（這是不知道哪位大神取的名）

悲觀鎖 定義：提交表單時，防止多次提交，我們會在請求前加上標志位

var block = false function refesh(){if(block){return }block = truereturn fetch('api').then(res => {block = false}).catch(err =>{block = false})} 復制代碼

樂觀鎖 定義：用戶在資源下載完之前，在點擊其他組件，我們就會去下載其他資源，之前的請求照常發起，只是無論如何都會被丟棄。

var id = 0function loading(resources){var load_id = ++idPromiseAll(resources).then(()=>{if(load_id === id){//渲染} else{//丟棄}}).catch(()=>{if(load_id ===id){//提示錯誤} else{//丟棄} })} 復制代碼

15）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> 復制代碼

2.動態插入相對應script

3. computed與watch

計算屬性顧名思義就是通過其他變量計算得來的另一個屬性，計算屬性具有緩存。計算屬性是基于它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時才會重新求值。

偵聽器watch是偵聽一個特定的值，當該值變化時執行特定的函數。例如分頁組件中，我們可以監聽當前頁碼，當頁碼變化時執行對應的獲取數據的函數

從屬性名上，computed是計算屬性，也就是依賴其它的屬性計算所得出最后的值。watch是去監聽一個值的變化，然后執行相對應的函數。

從實現上，computed的值在get執行后是會緩存的，只有在它依賴的屬性值改變之后，下一次獲取computed的值時才會重新調用對應的getter來計算。watch在每次監聽的值變化時，都會執行回調。 其實從這一點來看，都是在依賴的值變化之后，去執行回調。很多功能本來就很多屬性都可以用，只不過有更適合的。

如果一個值依賴多個屬性（多對一），用computed肯定是更加方便的。 如果一個值變化后會引起一系列操作，或者一個值變化會引起一系列值的變化（一對多），用watch更加方便一些。

watch的回調里面會傳入監聽屬性的新舊值，通過這兩個值可以做一些特定的操作。computed通常就是簡單的計算。 下面是兩者之間的互換

<input >watch: {word() {this.$emit("update:keyword", this.word);}}上面這個data里面定義wordcomputed: {word: {get() {return this.keyword;},set(val) {this.$emit("update:keyword", val);}}} 復制代碼

4.refs的一些使用注意

ref?被用來給元素或子組件注冊引用信息。引用信息將會注冊在父組件的?$refs對象上。

關于 ref 注冊時間的重要說明：因為 ref 本身是作為渲染結果被創建的，在初始渲染的時候你不能訪問它們 - 它們還不存在！$ refs?也不是響應式的，因此你不應該試圖用它在模板中做數據綁定。 你應該避免在模板或計算屬性中訪問?$refs。 還有考慮到他們refs的唯一性，例如：兩個表單取同樣的話，只會引用到后面那個。

5.父子組件通信

//父 <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', '組件的信息')} }復制代碼

6.非父子組件的數據傳遞可以采用

prop是單向數據流，所以prop接受的數據無法雙向綁定，我們可以采用

子組件中通過 on(eventName)來監聽事件，

• 定義一個局部變量，并用prop的值初始化它:

props:['initialCounter'], data:function(){return {counter: this.initialCounter} } 復制代碼

• 定義一個計算屬性，處理prop的值并返回。

props:['size'], computed:{normalizedSize:function(){return this.size.trim().toLowerCase() } } 復制代碼

7.vue.extend

1.使用vue構造器,創建一個子類,參數是包含組件選項的對象. 2.是全局的. 結論: Vue.extend實際是創建一個擴展實例構造器,對應的初始化構造器,并將其掛載到標簽上

8.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一致

9.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

10.組件name的作用

當項目使用keep-alive時，可搭配組件name進行緩存過濾

DOM做遞歸組件時 比如說detail.vue組件里有個list.vue子組件，遞歸迭代時需要調用自身name

當你用vue-tools時 vue-devtools調試工具里顯示的組見名稱是由vue中組件name決定的

11.watcher有兩個配置

（1）深度 watcher deep: true （2）該回調將會在偵聽開始之后被立即調用 immediate: true

12.beforeDestroy

vue 的beforeDestroy（）生命周期鉤子是一個解決基于 Vue Router 的應用中的這類問題的好地方。 beforeDestroy: function () { this.choicesSelect.destroy() } 可以配合deactivated 使用，可以去除keep-alive的鉤子

13.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,或者在評論區留下您的聯系方式。

總結

以上是生活随笔為你收集整理的年底了，你总结了吗？我先来。的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。