年末了，你總結了嗎？我先來。

時間 2019-11-08

標籤年末總結先來简体版

原文原文鏈接

一、小白的常見概念混淆與經常使用技巧

1）字面量與構建函數

字面量分爲：對象字面、數組字面量、字符串字面量css

new Object()則是構造函數
new Array()構造數組vue

先說下優缺點算法

對象字面量的聲明比構建函數更加方便
空的對象實質上只是知足如下條件的數據結構：
- __proto__屬性指向Object.prototype
- 其成員列表指向一個空殼

var obj3 = new Object();
    var num = 0;
    for(var i in obj3){
      num++;
    }
    console.log(num); //0
複製代碼

對象的成員的存取遵循兩個規則：一、在讀取時，該成員表上的屬性和方法將會被優先訪問到；二、若是成員表中沒有指定的屬性，那麼會查詢對象的整個原型鏈，直到找到該屬性或者原型鏈的頂部。因此存取實例中的屬性比存取原型中的屬性效率要高。咱們應該採用字面量語法建立對象數據庫

var Student = function() {
            this.name = 'default';
            this.say = function() {
                console.log('say hello!');
            }
    }
    var s1 =new Student();
    console.log(window.name)
複製代碼

new的話，對於student內部的this便指向了全局對象,沒有定義的話.api

因此在這裏簡單總結下構造函數、原型、隱式原型和實例的關係：每一個構造函數都有一個原型屬性(prototype)，該屬性指向構造函數的原型對象；而實例對象有一個隱式原型屬性(proto)，其指向構造函數的原型對象(obj.proto==Object.prototype)；同時實例對象的原型對象中有一個constructor屬性，其指向構造函數。數組

2）this在call與apply與bind中

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

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 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);
          }
        }
    }

複製代碼

7）if判斷的一些坑

諸如 if 語句之類的條件語句使用 ToBoolean 抽象方法來強制求值它們的表達式，並始終遵循如下簡單規則：bash

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]); //一、二、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 裏面的值是VALUE
	in 裏面的值是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 = 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{
                        //丟棄
                    }   
                })
        }
複製代碼

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裏面定義word
	computed: {
            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的鉤子