面试复盘之遗忘点

10/12

1.url从输入到页面渲染的过程发生了什么？

答：浏览器解析出ip地址---> 发送http请求---> TCP3次握手--->服务器响应---->页面渲染--->TCP4次挥手

2.封装好的ele组件，怎么修改样式，在scoped里面直接设置无法覆盖原有样式怎么处理？

答：先添加类名，类选择器，使用deep，>>> 来穿透scoped 

引⽤了第三⽅组件之后，如果需要在组件中局部修改第三⽅组件的样式，⽽⼜不想去除scoped属性造成组件之间的样式污染，

首先利用谷歌浏览器的元素选择工具，查找到决定组件背景样式的class   ⽤>>>⽅式或者在类选择器上加/deep/，就可以穿透scoped了;

3.在vue中外层公共复用组件里怎么嵌套其他的组件？

答：在容器组件里放一个插槽（slot)。

4.VUE中DOM渲染和数据跟新不同步怎么解决？

答：（1）vue官方给出$set来设置

（2）nextTick（）方法

（3）$forceUpdate

5.比如页面中有一个复选框，绑定的v-model值在第一次时是改变的，而后面再点击时值的返回是不对的，怎么解决？

答：(1)使用nextTick来解决，就是DOM的变化和数据的变化不再同一时间

(2)加一个定时器

6.平时使用degug吗？说说怎么使用的？

答：(1)借助浏览器的调试工具打断点，sources里面，打开源码；

（2）在代码里写degugger关键字，在代码运行到degugger关键字时会暂停；

7.说说vue动态路由和动态添加路由？

答：动态添加：addRoute

8.说说vue路由的模式，和他们的区别？

答：hash模式和

9.在全局定义一个弹窗，引用时不引入组件，如何实现?

答：首先写一个弹框组件，然后我们再封装一个js文件，用来挂载弹框到根标签上，对外export 一个show和hide方法，然后可以在全局上使用内置得 install 方法，将show和hide方法挂到全局上，这样所以组件都能使用；

10.ajax返回一个文件流或者图片流怎么设置数据类型？

答：当后台返回一个二进制的文件流/图片流给我的时候，如果使用axios ，需要将 responseType："blob"，在数据获取的时候，我们使用  new Blob（）对象，把返回的二进制文件放到 blob对象中，再使用 URL.createObjectURL 方法把二进制文件映射成一个 url 地址，然后再创建一个 a标签，把url 赋值给a标签的 href 树形，并且设置 a 标签的 download 属性，并自动触发点击事件，可以实现文件的下载；

11.scss和css区别，他们得变量有什么区别，怎么使用？

12.一排3个盒子，使用flex布局，前面得两侧分布，最后一排2个盒子，靠左排列怎么实现（不使用js）？

答：在最后添加伪元素；宽度为子元素的宽度

/***CSS***/
.v1 {
    width: 100%;
    padding-bottom: 60rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: flex-start;
}
 
/*添加伪元素*/
.v1::after {
    content: "";
    /*这宽度是子元素的宽度*/
    width: 210rpx;
}

13.说说flex布局中得flex-shink和flex-grows得区别

答：flex-grow： 决定了flex items如何扩展，可以设置任意非负数字（正小数、正整数、0），默认是0。

flex-shrink：决定了flex items如何收缩，可以设置任意非负数字（正小数、正整数、0），默认值是1

14.addeventListener可以传几个参数？分别代表什么意思？和onclick绑定事件有什么区别？

答：addEventListener(),接收3个参数，第一个参数event（监听的事件）,第二个参数是函数（需要执行的事），第三个参数是useCapture（变量）（用来判断是捕获还是冒泡），

15.$listeners有什么作用？

答：用于多层次组件传递事件监听器，爷爷辈组件向父辈、孙子辈、曾孙子辈……组件传递事件（与 $attrs 不同，不存在半路被拦截的情况）

所谓$listeners其实就相当于一个中间件，当出现多级组件嵌套时，孙组件想传递数据给爷组件，那么就需要在父组件中给孙组件设置v-on="$listeners"，然后通过@键的方式监听孙组件传递过来的数据。

16.插槽组件嵌套时，怎么传样式？

答：（1）可以在外层嵌套div来设置样式和布局；

17.object.create(null)，表示什么意思？为什么要传null?

答：字面量方式声明得对象，继承了object原型上得方法，这些方法在新对象上可以直接使用，比如tostring(),valueof()等，而object.create(null,{})创建得对象没有object上的方法；

18.说说v3解决了v2哪些痛点？是怎么解决得？

答：（1）vue3的出现就是为了解决vue2的弊端，其composition API很好的解决了逻辑复用的问题，而且vue3源码就是用ts写的，对ts的支持非常好。我们在开发项目过程中可以使用ts的加持，使代码更加健壮。

（2）vue3对比vue2具有明显的性能提升：打包大小减少41%；初次渲染快55%，更新快133%；内存使用减少54%

（3）Vue2.x实现双向数据绑定原理，是通过es5的 Object.defineProperty，根据具体的key去读取和修改。其中的setter方法来实现数据劫持的，getter实现数据的修改。但是必须先知道想要拦截和修改的key是什么，所以vue2对于新增的属性无能为力，比如无法监听属性的添加和删除、数组索引和长度的变更，vue2的解决方法是使用Vue.set(object, propertyName, value) 等方法向嵌套对象添加响应式。

Vue3.x使用了ES2015的更快的原生proxy 替代 Object.defineProperty。Proxy可以理解成，在对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy可以直接监听对象而非属性，并返回一个新对象，具有更好的响应式支持

（4）beforeCreate -> 请使用 setup()

created -> 请使用 setup()

beforeMount -> onBeforeMount

mounted -> onMounted

beforeUpdate -> onBeforeUpdate

updated -> onUpdated

beforeDestroy -> onBeforeUnmount

destroyed -> onUnmounted

errorCaptured -> onErrorCaptured

19.上下2个div,上面一行代表头部，下面文本区域，怎么实现下方content区域得div高度撑满？不使用calc？

答：flex:1;

20.说说animate你是怎么实现动画特效得？都做过哪些特效？

答：Animations由两部分组成：css动画的配置，以及一系列的keyframes（用来描述动画的开始、过程、结束状态）

一般来说给一个元素加上animation,加在他的css上就好，
常用的动画属性有：

animation-name:test
动画名称，唯一标识，与@keyframes相对接，必选属性；

animation-duration:5s
动画的单次生效时间,不包含animation-delay在内，必选
示例：
animation-interation-count:2, animation-delay:5s, animation-duration:10s

animation-timing-function: linear;
动画的速率曲线，非必选,默认值为ease:低速开始，然后变快，在结束前减速

animation-delay: 2s;
动画延迟时间，非必选，默认0延迟

animation-iteration-count: infinite;
规定动画被播放的次数，非必选，默认一次

animation-direction: alternate;
规定动画在下一周是否逆向地播放,非必选，默认值normal,但设置的条件必须是animation-iteration-count在两次以上,否则不生效；

animation-play-state: running;
规定动画是否正在运行或暂停(非必选)

至少设置完动画的name和duration后，便可以使用@keyframes 连接动画名来分阶段的设置动画效果了。

21.class类中得extends继承原型上得属性吗？为什么？

答：可以继承原型上的属性，但是不可继承构造函数上得静态属性，静态属性只有构造函数本身可以调用，实例对象是不可调用静态属性得；子类构造器可以传参；

22.说下http状态码中的301，302的区别？

答：301表示永久重定向，原有请求路径失效，不可访问了，url回直接替换成重定向的路径，302表示暂时重定向，原有的路径仍然有效；

23.如何让一个异步的ajax请求变成同步代码？

答：（1）jQuery的$ajax中，设置  async：true时是异步提交，如果设置同步可以设置async：false，设置为同步提交；

function userID() {
    let ranid = parseInt(randID(1000000000, 10000000001));
    //声明的局部变量
    let data = null;
    $.ajax({
        type: 'post',
        url: './php/findID.php',
        data: 'id=' + ranid,
        //将ajax改为同步操作
        async: false,
        success: function(res) {
            res = JSON.parse(res);
            isok = res.length;
            if (isok != 0) {
                console.log(ranid);
                userID();
            } else {
                data = ranid;
            }
        }
    })
    //返回这个局部变量
    return data;
}
console.log(userID());

（2）原生的ajax设置同步：

1. 将open函数的第三个参数，设置为false。（true代表异步，false代表同步）
2. 获取后端数据不在使用onload事件
3. 直接返回需要的数据

function ajax() {
    let ranids = parseInt(randID(1000000000, 10000000001));
    const xhr = new XMLHttpRequest();
    xhr.open('post', './php/findID.php', false);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send('id=' + ranids);
    let resData = JSON.parse(xhr.responseText);
    if (resData.length != 0) {
        ajax();
    } else {
        return ranids;
    }
}

console.log(ajax());

24.代码题，css样式覆盖问题，问p标签的的背景是什么颜色的？

答：红色，先读取class再按顺序加载style类名中的样式，代码是从上而下执行，所以下面的 .a样式回覆盖 .c选择器的中的样式；

 <style>
    .c {
      background-color: blue;
    }

    .a {
      background-color: red;
    }
  </style>
</head>

<body>
  <p class="a c">123</p>
</body>

25.文件的上传和下载

在项目中，经常会碰到文件的上传和下载问题，比如，用户的头像的上传，图片的下载问题；

（1）文件的上传：使用input type=" file " 标签，通过onchange 事件 ，拿到 file 对象，file对象需要使用file[0]获取，然后实例化一个 formData 对象，将 file文件对象append 到 formData 对象中，然后使用 ajax 的 请求 或者 axios 请求 将对象 formData 对象发送到后端；

（2）文件的下载：先 new 一个 Blob 对象，将后台返回的文件流放到 Blob 对象实例中，然后使用 window.URL.objectURL()方法，把二进制文件流映射成一个 url 路径，把url路放到 a 标签的 href 属性上，设置 a 标签的 download 属性，并设置自动触发点击事件，完成文件的下载；

26.vue中使用什么方法可以实现子组件的刷新，在不改变子组件的数据的前提下？

答：（1）给子组件绑定 key 属性，通过改变 key ，实现组件的刷新；因为vue时通虚拟DOM的算法，对比新旧key值得变化，当key值没有发生变化时，不会重现渲染;这也就是为什么不推荐使用index来绑定key得值，当删除一个节点时，index可能都会发生变化，所以变化key得节点全部会重新渲染；

（2）通过 v-if 来实现 ，因为v-if 得本质就是通过 true或者false 来新增或者删除DOM ;

（3）通过 $forceUpdate方法强制刷新；不是很推荐但是也能实现；

27.项目中如何做性能优化？

答：（1）减少http请求次数（2）开启GZIP代码压缩（3）图片优化（4）脚本文件优化（5）SEO优化（7）使用CDN（8）减少不必要的cookie

一、减少http请求次数：（1）合并图片，比如使用雪碧图，这样就不会每次图片都去请求服务器了，但是如果整合的图片过大的话，会影响首屏渲染；（2）同页面的请求可以使用promise.all()来合并请求；（3）使用图片懒加载的方式，比如设置滚动到一定的可视界面时再区请求接口图片，可以通过设置图片的自定义属性，比如设置成 data-url来保存请求地址，当需要加载的时候再将src替换；（4）利用缓存特性；比如设置expries 过期时间，再失效之前，直接读取缓存中的资源

二、图片优化：

（1）尽量使用体积比较小得图片，比如png图片，使用字体图标，线上图库资源等

（2）避免设置图片得src为空等

三、脚本得优化：

（1）css部分：尽量使用id选择器，id选择器得效率最高，因为id唯一；将css文件引入放在文件守卫，js文件放在最后；如果动画能用css实现就使用css；使用BFC，较少页面得重绘和回流；避免不必要得DOM节点，因为DOM节点会影响渲染

（2）js部分，可以使用变量保存 length属性，每次计算都保存一下；使用事件委托来减少事件得绑定；高频事件，比如：scroll,resize等可以使用防抖节流来限制一下事件触发频率；

（3）vue框架中：使用按需引入，可以减少文件得体积；使用懒加载得方式，使用时再去加载文件；

四、SEO优化：

（1）使用SSR来提高首屏速度，但是也会增加服务器得压力

（2）使用语义化标签，来增加代码得可读性，爬虫便于爬取；

（3）合理得设置 title，description，keywords

（4）少爷ifrema，不会被爬虫读取

（5）重要的代码放在前面