深度剖析互联网一线大厂Vue面试题，一份非常适合收藏的前端进阶面试题

都2020年了，现在Vue都会问些啥呢 —— 互联网一线大厂面试题分析

刚刚都是些皮毛，但是并不是说皮毛就不学了，还是要去看一下的。

那么，互联网一线大厂或是高级前端工程师面试的时候会碰到什么棘手或是难缠的Vue的面试题呢？接下来带着大家一起就Vue这个专题来分析。

1. 我们都会配置路由。那么如何编码才能保证多路由模块解耦、保证更方便增加新的路由模块？

2. 如何手写出一个类Vue的MVVM响应式框架（Vue的底层实现）

3. Vue项目做完后我们会打包。那么如何编写配置文件能让打包速度达到最优化？

4. 我们都会写组件。那么如何让组件成为高复用性的组件库型组件？（可以脱离于项目拿到别的项目上使用）

5. 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;

});

}

第三步：调用

订阅视图-1：

订阅视图-2：