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

傷城~ 2023-02-14 02:25 44阅读 0赞

> 熟练使用框架的必要性

说到使用前端框架，已经不是什么新鲜事了，目前大部分公司都会要求你熟练使用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][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1][]

简单两步就搞定了。实际上，这些问题并不是很难，那么很多同学为什么不知道呢？

一是没有去了解Vue的源码以及底层实现。

二是缺少最佳实践。这些优化代码大型公司随处可见，拿过来学习一下就明白。但是可能对大家来说，在中小公司工作的程序员，写着平时的业务代码，很少有机会接触到大厂的优秀实践，Vue原来还有这种操作？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2][]

*  ### Vue 3.0 ###

Vue3.0还没正式发布，预计2020年年终或是2021年初出现，建议大家还是去关注下。

详见 [Vue3.0，我们需要关注的点][Vue3.0]

*  ###    Vue插件编写 ###

目前没有看到网上有很完全的，给大家整理好了。

详见 [Vue插件编写][Vue]

> 结语

本篇文章是费了很大精力去整理的，满满的干货。

如果对大家有帮助，欢迎点赞、评论和关注，不对的地方也请大家指出，感谢大家。

后续会持续关注前端的趋势和技术，与大家一起沟通和进步！

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTkwOTA4NzgwOTkxJmRpPTcwMmVjYTk1YjQxOGNjYjk3MDMzNTY3NTNkMDU5MDY2JmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRmluZXdzLmd0aW1nLmNvbSUyRm5ld3NhcHBfbWF0Y2glMkYwJTJGMTE2MzYzNjUwNTglMkYwLmpwZw?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly90aW1nc2EuYmFpZHUuY29tL3RpbWc_aW1hZ2UmcXVhbGl0eT04MCZzaXplPWI5OTk5XzEwMDAwJnNlYz0xNTkwOTA4NjcxODUyJmRpPTY5OThkMjM3OWY1MjUyY2FiODQ3MWE2MGQ5ZmJmYzg3JmltZ3R5cGU9MCZzcmM9aHR0cCUzQSUyRiUyRjViMDk4OGU1OTUyMjUuY2RuLnNvaHVjcy5jb20lMkZxXzcwJTJDY196b29tJTJDd182NDAlMkZpbWFnZXMlMkYyMDE3MTIxMiUyRmIzYzA1NTRkMGNjMTQyMzRiMzY0ODE1ZmY0NGYzNDA0LmpwZWc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczMuYmRzdGF0aWMuY29tLzcwY0Z2OFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTM0NzE5NDg1ODAsMTUwNjYwMzY4MSZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmRzdGF0aWMuY29tLzcwY0Z1WFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTE2MDU1MzU4MTMsMTI0ODQ1Mzk1OCZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200531124823700.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200531130229721.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200531130320196.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1OTQyMzQ4,size_16,color_FFFFFF,t_70
[Vue3.0]: https://blog.csdn.net/qq_35942348/article/details/106092163
[Vue]: https://blog.csdn.net/qq_35942348/article/details/97496339