深度剖析互联网一线大厂Vue面试题(2)

• 路由解耦与快捷新增

上图是主路由文件，核心函数是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：

有意思的也是精华部分是：当你在控制台修改数值，网页内的视图也会跟着更改，如下：

总结

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

前端面试题汇总

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

JavaScript

性能

linux