面试主要注意的内容

：要多主动表达，比如人家问3年工作经验，应该有回应。 // 这是第一个录音：人家注重的是原生开发，如果在遇到问原生的，就先跟人家说使用框架开发的多，原生的印象不深了，但是可以复习，很快掌握。

1. 当一个网站的不同页面单独的分离出来成都独立窗口，请问local和session区别 本地存储里面， 会话存储是不共享的数据的， 长期存储是共享的数据的

2. cookie使用什么区分不同页面？ 使用path或者domain来区分：document.cookie = 'key=value;path=/xx;domain=baidu.com'

3. 语义化【标签】是为了解决什么问题，还有什么作用？ 让标签有含义，这样符合w3c的标准，让页面结构更加的清晰和规整。还有一个很重要的作用就是优化SEO爬虫爬取。让html5的渲染器更加快捷的渲染出dom结构。

4. css3动画有哪些？ transform，translate。

5. animation的参数有哪些？ animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count

6. css3的loading图标怎么实现【转圈加载动画】？ animation+@keyframes逐帧动画+transform: rotate(360deg); 可以实现了

7. 选择器有哪些？属性选择器怎么用？ *通配符选择器，id选择器，class选择器，后代选择器.css > p， 组选择器.title, .col 伪类选择器.button:hover{} 伪元素选择器::before{} ::after{}

属性选择器:[title=1]中括号里写标签上的属性名，也可以加上属性值以等号隔开

1. 盒模型有哪些 标准和怪异【ie盒模型】 区别：标准是：内边距padding+边框border+外边距margin+内容content 怪异是：内容content（包含了内边距和边框）+外边距margin

2. 字体图标怎么使用

使用css的font-family安装字体图表 具体代码

@font-face {
  font-family: "iconfont"; /* Project id  */
  src: url('./iconfont.ttf?t=1655292379561') format('truetype');
}

1. 第三方字体的使用 和字体图标安装方式一样。

2. 样式穿透问题 在vue里使用scoped属性在style标签上解决样式穿透，如果是原生的css，我们使用scss语言的嵌套，尽量避免样式类名的重复污染。 ---------开始vue问题

3. 插槽 具名插槽，匿名插槽，作用域插槽

4. keep-alive 为了缓存不活动的组件，有两个常用的属性include【包含】和exclude【不包含】

5. 组件通信 8种

6. 组件库用哪些？ vant 移动端 elementpc端的 antd有pc和移动端

7. vant的表单里的rules是干什么的？ 表单验证的规则数组

8. js在new一个函数的时候发生了什么 首先在函数内部创建了一个对象，然后把函数内的this指向该对象，然后允许函数内部的所有代码，最好return出这个对象。

9. 原型链是什么？ 每一个对象有一个隐式的原型proto 当我们使从对象里获取一个属性的时候，对象查找的顺序是：先从自身找，没找到就沿着proto对象一直找，每一个proto也是一个对象，所以每一个proto都有，所以他们形成的原型链，总结：原型链就是对象查找属性的执行过程

10. 如何判断是不是在对象自身还是属于原型链上？ obj.hasOwnProperty() 判断属性是不是对象自身的属性，如果是原型上的属性则会返回false

11. 删除数组的值用什么？ 从前删，从后删，指定位置删。

12. some和sort区别 some是查找，只要找到一个符合的就返回了，sort是排序

13. document.querySelector是干什么的？ 查询选择器，获取标签的dom对象。

14. 如何获取dom的宽和高？

• 通过dom对象的style对象获取

• 通过dom对象的offsetWidth获取

// 第二场面试 注重vue的面试

1. 自我介绍

2. 离职原因：说公司倒闭了

3. 双向数据绑定的原理 vue2的原理：基于Object.defineProperty 方法实现的发布订阅模式。 vue3的原理：基于es6的proxy封装的

4. es6新增了哪些语法？

• 解构赋值

• 箭头函数

• 异步解决方案：promise、async和await

• 模板字符串

• let和const

• Set数据类型，用于去重

• Map数据类型，字典

• ...的扩展运算符

1. 剪头函数的this指向哪里 永远指向上一层的作用域里的this对象。

2. vue生命周期如果使用箭头函数，会出现什么问题？ { mounted: () => { console.log(this) // undefined } } this找不到

3. 如何修改this指向，区别是什么？ call、apply、bind. call传入是单个的序列值 call(this,1,2,3) apply(this,[1,2,3]) call和apply会立即调用函数执行 bind(this,[1,2,3]) 改变this并返回一个新得函数，并不会立即调用函数，参数既可以是数组也可以是序列

4. promise有哪几种状态 等待，成功，失败

5. 代码优化和性能优化有哪些

• 代码优化：减少不必要得全局变量，避免了全局污染和常驻内存，尽量不使用闭包，防止内存溢出，如果使用闭包在代码最后一定要手动释放闭包，把闭包得函数赋值为null就可以了。

• 性能优化：图片懒加载，组件懒加载，代码压缩，使用精灵图【雪碧图】

1. axios和fetch区别 axios是第三方封装的请求插件，底层是promise+ajax。兼容好，使用方便，有对外提供的拦截函数。 fetch是高版本浏览器出的一个h5新的请求方法，它的目的就是为了将来替代ajax的。因为它的底层就是promise封装的，完美的解决了地狱回调问题。

2. 动态路由是什么？嵌套路由是什么？ 动态路由：不同的地址加载的是同一个页面【产品列表跳到详情页】，它有个规则，就是基础路径一致，动态字段使用冒号+字段来接收，一般用于产品详情页或者小说的阅读页等等。 嵌套路由：基础路径【父路由地址】一致，子路由不同并且加载对应的页面。但是他们都属于同一个父路由里的

// 第三场面试：注重项目的介绍

1. 介绍上家公司：客观的回答，不要有负面的情绪和诋毁的言辞。

2. 你的这个项目是什么端的？针对哪些人群？属于什么模式？

• C端：应用，软件，app，qq，微信都属于

• B端：browser浏览器端

• 人群：针对于上班族，年轻人。

• B2C商家到用户，A2C公司自己的电商面向市场

1. 轮播图图片有调整吗？

• 没有调整：后端返回的图片都是定高定宽的，不用处理

• 所有图片都给个默认的高宽，因为后端返回图可能尺寸不一致

1. 首页有哪些模块？

2. 搜索请求接口用的是哪个？

• 使用get方式请求的我记得好像是/query接口，参数是name

1. 分页加载怎么实现？上拉加载如何实现？如何避免重复加载？ 这里考的是下拉加载更多的逻辑，传给后端page页码和pagesize每页条数。 视图窗口高度+滚动条卷上去的高 >= 滚动条总高-200就加载下一屏数据 使用防抖优化请求，保证不重复。

2. 如何取消重复请求 无论是axios还有ajax都有取消请求的方法，axios里使用canceltoken取消，ajax使用abort()取消请求

3. 图片懒加载如何实现？ 页面加载完毕后，使用js获取所有图片的位置，然后监听滚动事件，每次滚动都判断图片的位置是否出现在滚动的可视区内，如果到了，就把图片的真实地址给到图片的src属性，让其加载出来 <img data-src='真实地址' src='假图地址，占位图' >

4. 如何记录浏览位置：详情页我浏览一半了，然后手滑推出去了，当我再进来的时候，如何自动定位到之前浏览的位置? keep-alive 会缓存浏览位置 使用vue-router的记录访问位置的函数：scrollBehavior，只有当路由返回时才生效，如果是重复进入地址它不生效

1. 商品介绍使用什么渲染 v-html渲染

2. 如果图太大，一时半会儿加载不出来怎么解决？ 可以使用loading图占位，也可以使用图片预加载。 html>head>link 可以用来预先加载图片

3. 节流防抖是如何在项目中用的，实现原理是什么？

4. 接口不返回数据怎么处理？ 在axios的响应拦截器里做统一处理，根据约定好的状态码，判断接口是否正常，如果不正常，给用户提示。

二. 小说小程序介绍

1. 历史搜索记录的本地存储如何实现

• 首先查重，先从本地存储获取数据，如果有相同的就不插入，没有就存入本地

• 是否具备独立开发能力：是

• 前端优化项：留给你们