熟練使用框架的必要性
說到使用前端框架，已經不是什麼新鮮事了，目前大部分公司都會要求你熟練使用Vue或React框架，這也成了前端工程師面試的家常便飯。
所以這也是我們的必備技巧，同時也經歷了一波發展變化，不得不防。那麼，現在我去面試，面試官會問哪些關於Vue的問題呢？不要慌，客官接着往下看。
回顧一下16-19年Vue的經典面試題及分析：
1. 父子組件傳值（Vue面試高頻題目，現在估計也會順帶提一下，不過相信大家都爛熟於心了）
2. 請描述一下slot 插槽的作用以及使用 （低頻問題，簡單來說就是分發DOM）
3. 如何定義全局的屬性或方法（基本不問了）
4. Watch，Computed區別與使用場景（偶爾問）
5. v-show與v-if 區別與使用場景（技巧性問題，現在仍然會問）
6. Vue裏的key有什麼作用，可以用數組的 index 代替麼？（顯然是不可以的，key是唯一的，index可能重複）
7. Vue優化首屏加載優化（現在仍然會問，路由懶加載解決）
8. created和mounted的區別（渲染模板前後調用的區別）
......
並未詳盡，統計了一些常見的，同時也相信這類基礎大家都能回答上來。
都2020年了，現在Vue都會問些啥呢 —— 互聯網一線大廠面試題分析
剛剛都是些皮毛，但是並不是說皮毛就不學了，還是要去看一下的。
那麼，互聯網一線大廠或是高級前端工程師面試的時候會碰到什麼棘手或是難纏的Vue的面試題呢？接下來帶着大家一起就Vue這個專題來分析。
- 我們都會配置路由。那麼如何編碼才能保證多路由模塊解耦、保證更方便增加新的路由模塊？
- 如何手寫出一個類Vue的MVVM響應式框架（Vue的底層實現）
- Vue項目做完後我們會打包。那麼如何編寫配置文件能讓打包速度達到最優化？
- 我們都會寫組件。那麼如何讓組件成爲高複用性的組件庫型組件？（可以脫離於項目拿到別的項目上使用）
- Vue3.0你瞭解多少？
-
路由解耦與快捷新增
上圖是主路由文件，核心函數是webpack的api ——require.context()，通過執行此函數獲取一個特定的上下文，主要用來實現自動化導入模塊。
項目中各個業務的路由可以充分解耦，路由文件後綴名爲xxx.routers.js即可，主路由文件會自動化導入新增的各業務路由文件。
-
手寫一個類vue的MVVM框架
Vue的響應式是利用了數據劫持實現的，知道這個就很簡單了。
這裏寫一個簡易的，面試的時候大致說出思路即可，後續更新一個完整的MVVM框架，感興趣的同學可以關注一下~
第一步：建立訂閱器模型
// 訂閱器模型
var Dep = {
clientList: {},
listen: function (key, fn) {
if (!this.clientList[key]) {
this.clientList[key] = [];
}
this.clientList[key].push(fn);
},
trigger: function () {
var key = Array.prototype.shift.call(arguments),
fns = this.clientList[key];
if (!fns || fns.length === 0) {
return false;
}
for (var i = 0, fn; fn = fns[i++];) {
fn.apply(this, arguments);
}
}
};
第二步：設置劫持方法，對數據進行劫持
// 劫持方法
var dataHijack = function ({ data, tag, datakey, selector }) {
var value = '',
el = document.querySelector(selector);
// 數據劫持
Object.defineProperty(data, datakey, {
get: function () {
console.log('我獲取到值了');
return value;
},
set: function (newValue) {
console.log('我設置到值了');
value = newValue;
Dep.trigger(tag, newValue);
}
});
// 綁定觀察者
Dep.listen(tag, function (text) {
el.innerHTML = text;
});
}
第三步：調用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo</title>
</head>
<body>
<div id="app">
訂閱視圖-1：<span class="box-1"></span>
訂閱視圖-2：<span class="box-2"></span>
</div>
<script src="index.js"></script>
<script>
// 數據
var dataObj = {};
// 數據劫持
dataHijack({
data: dataObj,
tag: 'view-1',
datakey: 'one',
selector: '.box-1'
});
dataHijack({
data: dataObj,
tag: 'view-2',
datakey: 'two',
selector: '.box-2'
});
// 初始化賦值
dataObj.one = 'one';
dataObj.two = 'two';
</script>
</body>
</html>
有意思的也是精華部分是：當你在控制檯修改數值，網頁內的視圖也會跟着更改，如下：
簡單兩步就搞定了。實際上，這些問題並不是很難，那麼很多同學爲什麼不知道呢？
一是沒有去了解Vue的源碼以及底層實現。
二是缺少最佳實踐。這些優化代碼大型公司隨處可見，拿過來學習一下就明白。但是可能對大家來說，在中小公司工作的程序員，寫着平時的業務代碼，很少有機會接觸到大廠的優秀實踐，Vue原來還有這種操作？
-
Vue 3.0
Vue3.0還沒正式發佈，預計2020年年終或是2021年初出現，建議大家還是去關注下。
-
Vue插件編寫
目前沒有看到網上有很完全的，給大家整理好了。
詳見 Vue插件編寫
結語
本篇文章是費了很大精力去整理的，滿滿的乾貨。
如果對大家有幫助，歡迎點贊、評論和關注，不對的地方也請大家指出，感謝大家。
後續會持續關注前端的趨勢和技術，與大家一起溝通和進步！