深度剖析互联网一线大厂Vue面试题-蒲公英云

熟练使用框架的必要性

   说到使用前端框架，已经不是什么新鲜事了，目前大部分公司都会要求你熟练使用Vue或React框架，这也成了前端工程师面试的家常便饭。
   所以这也是我们的必备技巧，同时也经历了一波发展变化，不得不防。那么，现在我去面试，面试官会问哪些关于Vue的问题呢？不要慌，客官接着往下看。

format_png

   回顾一下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的区别（渲染模板前后调用的区别）
   ......
   并未详尽，统计了一些常见的，同时也相信这类基础大家都能回答上来。

format_png 1

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

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

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

format_png 2

我们都会配置路由。那么如何编码才能保证多路由模块解耦、保证更方便增加新的路由模块？
如何手写出一个类Vue的MVVM响应式框架（Vue的底层实现）
Vue项目做完后我们会打包。那么如何编写配置文件能让打包速度达到最优化？
我们都会写组件。那么如何让组件成为高复用性的组件库型组件？（可以脱离于项目拿到别的项目上使用）
Vue3.0你了解多少？

format_png 3

路由解耦与快捷新增

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70

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