前端面試準備---Vue篇

本文主要從下邊幾個方面複習Vue知識點：

1. MVC && MVVM  
2. 數據雙向綁定
3. Vue的生命週期
4. 虛擬dom的實現原理
5. vue-router
6. Proxy
7. vuex複製代碼

MVC && MVVM

M -- model層，表明數據模型

V -- view層，表明視圖層，UI展現

C -- control層，控制層，處理複雜的業務邏輯

VM-- viewModel層，一個同步view和model的對象，其實能夠理解爲數據雙向綁定

Vue就是一種MVVM模式的框架

v-show、v-if的實現原理

v-show爲false時，經過js設置display爲none;爲true時，設置display:''; 這樣爲了讓js設置的display屬性失效。

v-if是經過js手動添加或刪除dom元素。

組件間通訊

組件間通訊總共分爲一下幾種：

一、父 --> 子：

父元素用屬性的格式傳進來，子元素用props屬性接收；

// 父元素
<editor :name='data'></editor>

// 子元素
props: {
    name: {
        type: Object,
        defalut: function(){
        
        }
    }
}

複製代碼

二、子 --> 父：

在父組件綁定一個事件，自組件用$emit出發事件

三、兄弟組件：

四、組件嵌套比較深的時候：vuex

Vue數據雙向綁定

所謂數據雙向綁定，就是指視圖層和數據層相互影響，好比input框輸入數據，存儲的數據發生相應的變化；當給存儲數據的數據從新賦值時，input框的值也會變。

實現雙向數據綁定主要是經過數據劫持+發佈訂閱者模式，劫持各個屬性的set和get，在數據發生變化的時候發佈給訂閱者，觸發相應的回調。

真正靠的是Object.defineProperty這個屬性

說到這個原理，能夠先來了解一下發布-訂閱模式。

• 發佈-訂閱模式：

開始我對這個模式也有點不理解，可是看到 這個文章的一個比喻瞬間就理解了。

其實這個發佈訂閱模式就跟平時咱們常見的訂閱微信公衆號的模式是同樣的。

1. 整個發佈訂閱模式就像一個平臺，讓用戶能夠發生訂閱和發佈的操做，也就相似於微信公衆號平臺
2. 訂閱者能夠訂閱多個操做，就像咱們能夠訂閱多個公衆號同樣，可是須要提供給平臺咱們要訂閱的名稱，以及訂閱者本身的一些信息。
3. 做爲發佈者，其實就像一個公衆號，他不關心具體的訂閱者是誰，只要訂閱了的用戶都會收到發佈的信息。整個發佈操做須要告知平臺，是哪一個公衆號須要發佈，發佈什麼信息。
4. 訂閱者還能夠取消訂閱，那麼平臺須要知道，發起取消訂閱的用戶是哪一個，還有取消的公衆號的名稱是什麼。

那麼一個簡單的發佈訂閱模式就造成了，下邊話很少說，直接上代碼：

const SubPub = function() {
    // 用Object格式，能夠經過value存儲訂閱者的一些信息
    // 訂閱器 --- 相似於微信公衆號這個平臺，每個元素相似於一個公衆號，key值爲公衆號的名字，value值記錄訂閱公衆號的人；
    this._observer = {};
}

SubPub.prototype = {
    // 訂閱函數，須要提供我要訂閱的公衆號名稱，以及本身的姓名
    subscribe: function(type, callback) {
        const self = this;
        if(Type(callback) !== 'function') return;
        if(!self._observer[type]) this._observer[type] = []
        this._observer[type].push(callback);
        return self;
    },
    // 發佈函數，須要提供哪一個公衆號須要發佈信息，以及發佈的內容；
    publish: function() {
        const self = this;
        const type = Array.prototype.shift.call(arguments); // 由於arguments不是數組，是一種類數組類型，因此沒有shift、slice這些方法
        //發佈的內容
        const theme = Array.prototype.slice.call(arguments);
        const subs  = self._observer[type];
        if(!subs || !subs.length) return;

        subs.forEach(sub => {
            sub.apply(self, theme);
        });
        return this;
    },
    // 取消訂閱，須要提供取消公衆號的名字，和發起該取消操做的用戶
    removeSub: function(type, callback) {
        const _subs = this._observer[type];
        if(!_subs || !_subs.length) return;
        _subs.map((item, index) => {
            if(item === callback) {
                _subs.splice(index, 1);
            }
        })
        
        return this;
    }
}

function Type(value) {
    return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}

// 實例一個發佈訂閱器
let sp = new SubPub();
// 定義訂閱者
const sub1 = function(data) {
    console.log('sub1' + data);
}

const sub2 = function(data) {
    console.log('sub2' + data);
}

const sub3 = function(data) {
    console.log('sub3' + data);
}
// 發起訂閱操做
sp.subscribe('click', sub1);
sp.subscribe('input',sub1);
sp.subscribe('qqq',sub1);

sp.subscribe('click', sub2);

sp.subscribe('input', sub3);

// 開啓發布
sp.publish('click', '第一次發佈click事件');
sp.publish('input', '第一次發佈input事件');

sp.removeSub('click', sub1).publish('click', '第二次發佈click事件');複製代碼

• Object.defineProperty的使用方法

接下來看一下Object.defineProperty的使用方法。

let obj = {};
let song = '七里香';
obj.singer = 'JayZhou';
Object.defineProperty(obj, 'music', {
    configurable: true, // 能夠配置對象, 爲true的時候才能夠刪除屬性
    enumerable: false, // 是否可枚舉
    get () {
        return song;
    },
    set (val) {
        song = val;
    }
});

console.log(obj.music); // {singer: '周杰倫', music: '七里香'}

obj.music = '聽媽媽的話';
console.log(obj.music);

delete obj.music
console.log(obj);

for(var i in obj) {
    console.log(i); // 只有singer 由於music是不可枚舉的
}複製代碼

缺點：

1. 沒法監聽數組變化

Vue的MVVM模式實現原理：

1. observe：一個數據監聽器，對數據對象的全部屬性，包括子屬性進行監聽，若是發生變化，拿到最新值並通知訂閱者
2. compile：一個指令解析器，對每一個元素的節點指令進行掃描和解析，根據指令模板替換數據，以及綁定相應的函數
3. watcher: 一個訂閱者，它將做爲鏈接數據監聽器和指令解析器的一個橋樑。可以訂閱每一個屬性的數據變化，收到數據變化的通知，執行回調函數，更新UI頁面
4. Mvvm的入口函數，將三者整合

Vue的生命週期

vue的生命週期是指的從 建立 --> 掛載 --> 更新 --> 銷燬 的過程。

總共分爲8個步驟：

beforeCreate, created,

beforeMount, mounted,

beforeUpdate, updated,

beforeDestroy, destroyed

Vue虛擬DOM

所謂虛擬DOM，就是一個JS對象，用來存儲DOM樹結構。

過程：

1. 建立dom樹
2. 利用diff算法進行對比，存儲差別patches對象，按下邊四種格式

• 節點類型改變
• 屬性改變
• 文本改變
• 增長/移動/刪除子節點

3. 渲染差別

• 遍歷patches，把須要修改的節點取出來
• 局部更新dom，利用document.fragments來操做dom，進行瀏覽器一次性更新。

document.fragment:

是DOM節點，不是主DOM樹的一部分。

一般用來建立文檔片斷，將元素附加到文檔片斷中，而後將文檔片斷附加到DOM樹中。因爲文檔片斷存在內存中，不在DOM樹中，因此插入子元素的時候不會引起瀏覽器迴流，因此性能更好

nextTick

用於執行dom渲染以後的回調，新版本默認是microtasks

vue-router

模式：hash、history

跳轉方式：

1. this.$router.push()
2. <router-link to=''></router-link>
3. this.$router.replace()

佔位：

<router-view></router-view>

默認狀況下是hash模式，history須要後臺配置，利用Html5的History API實現的，監聽change變化。

router和route的區別：

$router：是VueRouter的一個實例，是一個全局的對象，主要實現路由的跳轉使用。經常使用的router.push()和router.replace()方法。

push方法會像瀏覽器的history棧添加一個新紀錄。

replace替換路由，沒有歷史記錄。

route：是一個路由信息對象，每個路由都有一個route對象，是一個局部對象。能夠獲取name、query、params、path等參數。

Proxy

定義：來自 MDN的定義：用於定義基本操做的自定義行爲（如：屬性查找、賦值、枚舉、函數調用等）；

另外 阮一峯解釋的比較容易理解：在目標對象以前架設一層攔截，外界對象對該對象的訪問，都必須先經過這層攔截，所以提供了一種機制，能夠對外界的訪問進行過濾和改寫。

語法：

let p = new Proxy(target, handler);複製代碼

簡單例子：

var proxy = new Proxy({}, {
    get: function(target, key, receiver) {
        console.log(`get ${key}`);
        return Reflect.get(target, key, receiver);
    },
    set: function(target, key, value, receiver) {
        console.log(`set ${key}`);
        return Reflect.set(target, key, value, receiver);
    }
});

proxy.name = 'jack'; 
// set name
console.log(proxy.name);
// get name
// jack複製代碼

上邊的例子是對一個空對象進行了攔截。

Vue3.0中要用Proxy代替defineProperty。proxy不管是從操做上仍是底層功能上遠強於defineProperty。

優勢：

1. 能夠監聽數組的變化，這個是defineProperty作不到的
2. 直接監聽對象，而不是對象的屬性，並且會生成一個新對象

Vuex

• 什麼是Vuex?

Vuex是vue的狀態管理工具，採用集中存儲全部組件的狀態，並以相應的規則保證狀態以一種能夠預測的方式發生變化

• Vuex的核心屬性：

Vuex有五個核心屬性：state、getter、mutation、action、module

1. State：存儲數據狀態；能夠經過this.$store.state訪問；對應vue裏的data；存放數據的方式是響應式的，vue組件能夠從store中讀取數據，若是數據變化，組件也會發生相應的更新。
2. Getter：就至關於store的計算屬性，他的返回值會根據他的依賴被緩存起來，且只有當它的依賴發生改變的時候纔會被從新計算。
3. Mutation：更改vuex的store的惟一方法就是提交mutation
4. Action：包含任意異步操做，經過提交mutation間接改變狀態。
5. Module：將store分割成模塊，每一個模塊都具有上邊四種方法，甚至子模塊

• vuex數據傳遞流程

1. 當組件進行數據修改時，調用dispatch來觸發action裏邊的方法；
2. 每一個action裏邊都有一個commit方法，能夠經過commit來修改mutations裏邊的方法進行數據修改
3. mutation中都會有一個state參數，這樣能夠經過mutation修改了state數據
4. 數據修改完畢以後，頁面發生改變

• 爲何用vuex?

1. 當組件多層嵌套的時候，父子組件傳遞數據很麻煩。
2. 增長代碼的可讀性和可維護性
3. 數據是響應式的，減小數據的派發操做；