1. 手写一个prototype原型链的使用案例
原型和原型链 具体的使用案例
函数 prototype
对象 __proto__
2. vue-cli 工程下文件目录作用
dist 打包后的文件（npm run bulid）
public 公有文件 图片 spa入口index.html页面
src 源码目录
api 统一管理项目里的api接口
utils 自己封装的工具类 axios拦截、localStoage
views 整体页面组件
styles 全局样式文件 less
components 公有组件
config 项目相关的配置
router 路由
store 全局状态管理vuex
assets 资源文件
3. 如何实现路由懒加载?为什么
将组件的同步引入变成异步引入
import Home from './pages/home'
const Home = ()=>{import './pages/home'}
原因 同步引入组件会将所有的组件文件打包到一个js文件中导致资源过大 加载慢，减少资源大小可以解决首页加载白屏时间过长
4. 页面刷新时如何实现vuex数据缓存
全局状态管理 （全局变量） vuex+localStorage
state:{
name:localStorage.getItem('name')||'韩梅梅'
}
5. 在vue中使用本地图片有什么要注意的地方
1. 图片在public 使用图片要用根路径 ，属性绑定 或者 字符串路径都可以
<img src="/favicon.ico" alt="">
<img :src="pubicPath" alt="">
2. 如果在其他路径下 使用相对路径， 属性绑定前（通过import 引入图片） ，字符串路径依然可用
<img src="./assets/logo.png" alt="">
<img :src="assetPath" alt="">
import path from './assets/logo.png'
data(){
return{
pubicPath:'/favicon.ico',
assetPath:path
}
}
6. keep-alive 有什么用，请描述一个使用场景
缓存页面 被缓存的页面不会销毁和重新创建，多了两个生命周期activeted deactived ，可以减少网络请求 减少组件加载次数 提高运行效率
7. 手写一个时间过滤器
filter 全局过滤器 局部过滤器
Vue.filter('过滤器的名',(data)=>{
data 要过滤的数据
return 处理过的数据
}
)
在插值法中使用：
{要过滤的数据|过滤器名()}
比如时间戳处理后：2020/4/20、2020.4.20
8. vue打包命令是什么？vue打包后会生成哪些文件？
npm run build
index.html
css
js
xxxx.map ：sourceMap（未压缩过的代码，上线前删掉）
9. 列举一下工作中常用插件，阐述其使用场景
axios 网络请求
sheetjs 导出文件
better-scroll 滚动插件
swiper 轮播图
webstorage 对storage的封装
qrcode 生成二维码
qs (querystring) 解析请求携带的数据
request 网络请求
randomString 随机字符串
cheerio 实现类似jq的api
nodemailer 发邮件
bodyparser 处理post请求
cors 代理
10. 如何实现移动端适配，pc端适配
a、响应式布局
一套页面pc可以看 移动h5页面也可以看 pad也可以看
bootstrap ->栅格系统 ->媒体查询
缺点：pc的页面元素要和移动基本类似 适合官网，纯页面展示
b、pc是一套代码 移动h5是一套代码
通过navigator.userAgent 判断是移动端设备还是pc浏览器设备
pc端适配：
1、屏幕宽度小于容器宽度的最小尺寸，产生滚动条
2、屏幕宽度介于最小和最大尺寸之间，百分比缩放
3、屏幕宽度大于最大尺寸，容器宽度保持最大尺寸不变， 屏幕两端产生留白
移动端适配：flex弹性盒布局+rem
rem淘宝flexible方案
11. vuex 是什么？ 如何使用？
全局状态管理 1.多组件共享状态 2.一个组件改变其他组件跟着改变
state mutation（同步） action（异步）getter module 辅助函数
* vuex里的异步问题 将异步放入actions
* 异步action优点 统一管理网络请求 便于检测和时间旅行
* mapState mapGetters 和值相关 映射到computed 里
* mapActions mapMutation 和方法相关 映射到methods里
12. vue-router有哪几种导航钩子，路由守卫 路由拦截器
* 全局前置守卫
* 全局解析守卫
* 全局后置守卫
* 路由独享守卫
* 组件内的守卫
* 组件进入
* 组件更新
* 组件离开
13. 计算属性的缓存和方法调用的区别
计算属性有缓存性 只有相关的属性发生改变才会引起计算属性的重新计算
方法 只要数据变了 就会重新执行
14. vue等spa单页面应用的优缺点，如何改进
优点 1.组件化开发 组件复用开发效率高
2.页面跳转流畅
缺点 1. 首页白屏，加载过慢（路由懒加载）
2. seo优化不好（使用预渲染的方式对网页的路由指定模板、服务端渲染ssr）
15. vue.js的两个核心是什么？
1. 组件化开发 2.数据驱动视图
16. 列举一下vue的生命周期 与使用场景
4个阶段 8个普通钩子 2个缓存钩子 1个捕获错误钩子
创建
beforeCreate
created 网络请求（副作用）
挂载
beforeMount 网络请求
mounted 网络请求 dom初始化操作
更新
beforeUpdate 死循环
updated
销毁
beforeDestory 擦屁股
destoryed
缓存
activeted 组件激活触发
deactived 组件失活触发
17. webapp 与 app有什么区别
app c/s结构
webapp b/s结构
* 你项目中做过app嘛？如何做的
1、原生开发 安卓/ios开发工程师
2、混编开发 Dcould 的H5plus、 apicloud、 cordova
3、前端工程师写页面，写完页面源码给安卓/ios工程师
* 调用过硬件的哪些功能（用混编框架调用）
18. 列举vuex 中的辅助函数
* mapState mapGetters 和值相关 映射到computed 里
* mapActions mapMutation 和方法相关 映射到methods里
19. vue中遇到过什么问题，开发中遇到什么问题
* 点击300ms延迟（ios）
https://blog.csdn.net/qq_34986769/article/details/62046696
* 前后端交互问题
* 兼容问题：1px、二倍图、三倍图、ios 有一个回弹阻尼（在根元素上吞噬touchMove事件）
https://blog.csdn.net/weixin_30764771/article/details/98900070
* 数据变页面不变：数据劫持 -> vue.set ->getter setter ->响应式原理
* nextTick -> 改变数据state，页面dom重新渲染是一个异步过程
20. 如何解决跨域问题，如何改进
* 先使用postman测试接口，保证是ok状态
* jsonp（很麻烦）、cors（后端设置白名单）、服务器代理
* 服务器代理 基于webpack，http-proxy-middlewere
'/hehe':{
target:'目标路径',
changeOrigin : true,
pathReWrite:{
"^/hehe":''
}
}
* 线上使用nginx 代理
* 用原生js的时候 遇到跨域问题怎么解决？
* 自己本地搭建一个服务器做转发
* 自己用webpack搭建脚手架工具（配置代理服务器）
* 服务器代理原理：服务端之间的请求没有跨域问题
21. vue的响应式原理是指什么
* 简单版
关键词：object.defineProperty getter setter
data 里的数据被 object.definePropty处理，有了getter 和setter 使用数据时触发getter，数据修改时触发setter，然后促使页面更新
* 复杂版
关键词：object.defineProperty getter setter
observer 数据劫持
dep观察者/发布者 ，notify通知订阅者
watcher监听/订阅者
发布订阅模式
1. 组件或者实例被初始化的时候 data里的数据 会被observer进行数据劫持，然后递归遍历用object.definePropty对数据进行处理，data里的数据就有getter和setter
2. data里的数据 在页面绑定（使用数据）时，会触发getter在dep 里添加watcher监听（更新页面的方法）
3. 数据修改的时候 触发setter 调用dep类里的notify方法 通知watcher更新页面
4. 基于发布订阅模式
vue3.0 和2.0 版本 响应式原理的核心区别
object.definePropty 变成了 proxy
22. 阐述一下vue中组件如何通信
父子通信 props
子父通信 $emit（自定义事件）
兄弟通信 状态提升 事件总线 vuex
23. vue.set() 函数有什么用
数据变页面不变 一般因为修改的数据没有getter 和setter
vue.set()类似于数据劫持
24. vue.nextTick()
上一次数据修改引起的页面更新渲染是异步操作，结束之后执行vue.nextTick() ，比如在页面更新之后进行dom操作时可以使用
25. 在你工作中，有没有做过突出的事情，解决过一些特殊的困难
比如：解决效率优化问题
1、打包优化 代码压缩、路由懒加载
2、加载优化 base64、图片懒加载、上拉刷新、下拉加载、gzip
3、运行优化 减少网络请求、缓存数据
26. 有关vue性能高效问题
* 虚拟dom 一个对象，和真实dom 有相同的结构和属性
* diff算法 原生复杂度 O(N^3) vue优化后的复杂度 O(n)
1. tree Diff 禁止同层次对比
2. component Diff
vue元素的属性如果发生改变 vue认为这不是同一类型的元素 会删除新建（和react不同，react是保留dom，只修改属性）
3. element Diff 从左到右依次对比（react是从两边往中间）
* key 通过key提高diff效率 推荐用唯一确定不会修改的字段来做key
不涉及到 下标的改变 使用 index 也是可以的（不推荐）
27. 当在地址栏数入网址 到vue页面显示都经历了什么
1. 发起请求 获取index.html
2. 运行解析获取的index.html 并逐步渲染 首页
3. 加载对应的资源
4. vue/react 开始进行计算 渲染组件