遇见的问题和方案

环境搭建

1. 安装node环境，一切都是基于node环境下操作的

2. 安装路由vue-router、路由配置，配置完在main.js上挂载

3. 安装vuex状态管理工具,分modules的写法，这样便于管理，配置完在main.js上挂载

4. 安装axios，axios封装,api的封装,vue.config.js(这个名字不能改变，一定要是这个，并且要在根目录不在src里面)

5. -由于要用到sass,所以需要下载sass和sass-loader(注意版本，版本号7-10都是可以的,10以上是支持vue3.0的)

6. 移动端的布局，引用rem.js文件,这个文件会根据当前窗口的大小来改变根字体，配合到vscode的插件px to rem使用

7. 图片的模块化

8. 安装Vant-UI：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

创建Vue项目

• 直接在cmd里面输入vue create 文件名

• 可视化操作vue ui ，在里面就可以进行可视化的增删改查

• 记住不要选到3.0的版本，目前我们的项目是基于2.0的版本.

• 用的脚手架是@vue/cli 4.5.13

Vue里面的一些原理

1. rem的原理是根据根字体的大小来改变对应的px值

2. UI框架有:vant UI,``element UI

3. vue.config.js常用到的的属性proxy，这个是负责代理的,可以解决同源问题，使用它的根本原因是因为游览器跨域产生的同源策略，阻止了Ajax请求，现在用了代理，访问自己，它会转到我们需要访问的地址，这样只是跨域但不再产生同源策略

4. H5项目按需加载vant组件，原因是如果全部加载的话，会影响性能，我们只需要按需引入自己需要的即可

5. 使用第三方组件，先要看组件的文档，然后根据文档的提示来使用组件.props可以改变组件的功能、event定制功能、slot可以改变组件的结构

6. 移动端使用click事件和touch事件的区别在于，click会有300ms延迟问题，但是一般无伤大雅

Vue项目里面的问题

1. 如何解决移动1px边框的像素问题？（写border样式的一个经典问题）

   1. 可以直接写1px不用转换成rem

2. 当一个UI组件的样式不符合真实企业需求，什么情况下使用自定义样式？什么情况下修改UI组件库的样式？

   1. 当用组件库里面的属性无法改变样式的时候，就会采取自定义样式，当自定义样式也无法生效的时候,就会进入UI组件库进行修改

3. Vant中你常用的组件有哪些？

   1. Checkbox多选框

   2. SubmitBar提交按钮

   3. Col,Row栅格布局(常用来布局的，横向布局，可以通过设置span的份数来改变比例，份数总额是24)

   4. Button 按钮组件

   5. Grid, GridItem宫格,格子布局

   6. Swipe, SwipeItem轮播图组件

   7. NavBar导航栏(一般用于顶部)

   8. Tabbar, TabbarItem标签栏(一般用于底部)

   9. PullRefresh下拉刷新

   10. List列表显示(可以配合下拉刷新使用，但是注意那几个变量的使用) (最开始要设置这个immediate-check为false,否则打开页面就进行判断)

4. 什么样的页面，需要实现下拉刷新、触底加载？你是怎么实现的？详细说出你用到的组件名字。

   1. 一般页面数据比较多，使用懒加载的页面,需要实现下拉刷新、触底加载.我是使用vant UI里面的List组件和PullRefresh配合使用来实现的,它们有三个变量
      // 当onLoad方法被触发时，loading=true，如果loading=true了触底加载功能将失效
      loading: false,
      // finished表示数据没有了
      finished: false,
      // 当onRefresh方法被触发时，refreshing=true，如果refreshing=true顶部的"加载中"会卡住
      refreshing: false,</pre>

5. 跨组件的样式编写，有哪些值得注意的问题？

   1. 需要注意，跨组件的样式在局部样式里面写是没有用的,只有去全局写,或者把局部样式里面的scoped删除掉,这样里面写的样式也会变成全局

6. 常用的CSS布局方案有哪些？分别有什么特点？

   1. 单列布局 ：将一个元素作为布局容器，通常设置一个较小的(最大)宽度来保证不同像素宽度屏幕下显示一致

      1. 单列布局的优势在于基本上可以适配超过布局容器宽度的各种显示屏幕，可以保证在超过设置的最大宽度的屏幕上浏览网站看到的效果是一致的。而它的缺点就是屏幕空间的浪费，在屏幕空间足够大的情况下，页面两侧显示了大量空白，如果屏幕特别大，两侧空白的区域可能会比页面内容更宽。

   2. 两列布局：两列布局就是将页面分割成左右宽度不等的两列，宽度较小的列设置为固定宽度，剩余宽度由另一列撑满。这种布局适用于内容上具有明显主次关系的网页。

      1. 实现的方法：float + margin

      2. 绝对定位

7. 什么是栅格系统？怎么使用？在哪些场景会用到？

   1. 栅格系统：以规则的网格阵列来指导和规范网页中的版面布局以及信息分布。

   2. 使用场景:一般在横向布局里面可以使用

   3. 使用方法，根据元素的宽度，来分成几部分

8. 你对UI组件库的二次封装怎么理解？为什么需要进行二次封装？有什么好处？

   我认为二次封装,就是在已经封装好的组件中,又加上一些属性或者功能，然后再一次进行封装，二次封装的好处是减少了一些属性的暴露，并且已经规定好了这些属性值，让别人使用的时候不能更改这些属性，把想要被人更改的属性暴露出来即可，例如顶部的导航栏。

9. 你封装过哪些业务组件？

   我封装过的业务组件有:导航栏,tab栏

10. 列表页面向详情页跳转，如何参数传递？

11. query传参,把想要传参的参数拼接在url地址栏上传过去

    /good/detail?id=1 匹配 path: '/good/detail'

12. 动态路由传参

    /good/detail/1 匹配 path: '/good/detail/:id'

13. 使用的方法都是$router.push()

14. 在Vue环境中，如何解决“浏览器同源策略对AJAX的限制”？

解决方案是在`vue.config.js`里面配置代理，原理是浏览器的同源策略是针对对AJAX的,那我们就绕过同源策略，我们只需要想自己发送请求,当路由出现代理里面设置的路径,代理会帮我们转到我们想要访问的页面,虽然还是跨域,但是已经没有同源策略,通过设置代理服务器来规避浏览器同源策略的限制.

12. 什么是WebApp？什么是外页、内页？等概念。

13. WebApp:长得像App的H5网站

14. 外页:有tabbar的页面

15. 内页:没有tabbar的页面

16. 在created和mounted调接口有什么区别？

回调函数的时间的快慢，在created里面调用就回来早一点,在mounted里面调用就回来晚一点.

14. WebApp首页优化（性能优化、用户体验）有哪些方案？

15. 组件的异步加载

16. 静态文件合并压缩

17. 减少dom操作

18. 懒加载

19. 合并请求

20. 数据缓存

21. 布局优化

22. Vuex的两大作用，怎么使用vuex实现应用数据缓存？缓存数据何时清除？

23. vuex的两大作用

    1. 组件中数据通信终极方案

    2. 实现应用数据缓存

24. 通过把缓存数据存储在state里面,再调接口之前先去state里面看有没有需要的数据,如果有就直接拿出来使用,没有再去调接口.

25. 当路由发生变换时,则清除缓存

26. vuex工作流程、五大概念

![image](https://upload-images.jianshu.io/upload_images/18505995-4451078f90100947.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240) 

17. 在vuex中做缓存，和localStorage/sessionStorage缓存有什么区别？

区别在于`sessionStorage`关闭游览器,缓存里面的信息就会消失,而`localStorage`必须要手动删除才行,关闭游览器都还是存在

18. 登录流程（应用程序的鉴权流程），为什么需要做鉴权？

因为需要判断用户是否拥有权限访问之后的内容,只有满足了才会看见.并不是所有内容都是可以公开看的

19. 使用token鉴权和cookie/sesstion有什么区别？

其中的区别在于，session id **一般**存在 cookie 里，自动带上；token **一般**是要你主动放在请求中，例如设置请求头的 `Authorization` 。

20. axios的请求拦截器、响应拦截器中一般会做什么事儿？

21. 请求拦截器可以用来通过headers请求头把token(登录凭证)带到后端

22. 响应拦截器一般进行数据的过滤

23. 接口联调，常用调试工作有哪些？

devtools、network、postman、console这些工具一起配合来联调接口

22. vuex中的state确实发生了变化，但是为什么视图不更新？如何解决？

这是vue里面的一个缺陷，如果是复杂数据类型发生改变,响应式系统是无法劫持的,这也是为什么state的值发生了改变,但是对应的视图却没有改变。这时候有两种方法

*   内置api `$forceUpdate()`强制更新视图

*   深复制`this.cartList = JSON.parse(JSON.stringify(this.cartList))`

23. vue响应式原理有什么缺陷？

对复杂的引用类型没办法做到完全截止.

24. 什么是导航守卫？有哪些全局守卫？又有哪些局部守卫？

25. 导航守卫主要用来通过跳转或取消的方式守卫导航

26. 全局守卫

    1. 全局前置守卫 beforeEach((to,from,next)=>{})在配对之前

    2. 全局解析守卫 beforeResolve()

    3. 全局后置钩子 afterEach()

27. 局部守卫

    1. beforeRouteEnter

    2. beforeRouteUpdate

    3. beforeRouteLeave

28. 局部守卫 beforeRouteEnter 有什么特点？在它的内部能访问 this 吗？

不能访问this,因为这个方法是在组件的生命周期之前执行的,所以那时候组件都没有生成也就没有this了

26. 什么是路由元信息？你用它做过什么？

路由元信息就是定义路由的时候可以配置 `meta` 字段,我用它做过登录的权限管理.通过判断路由上面自定义的元信息来决定操作.

27. 动态keep-alive有什么特点？在使用动态组件时，有哪些需要注意的问题？

28. 特点：延长组件,声明式变量的寿命

29. 要注意生命周期的使用，看是否需要使用activated()和deactivated()，第一个代表进入前台的时候，第二个表示进入后台的时候

30. 动态组件如何实现只缓存指定的tabbar页面？

配合命名视图使用,给需要使用的路由上面加上名字

29. Vue项目中，哪些地方可以用到“异步组件”？有什么好处？

路由的设置，组件的引用，懒加载.可以大大提升vue的性能,不用一次性加载，按需加载

30. Vant-UI中，有哪些JS交互组件？和普通的 UI组件有什么不同？

`Toast,Dialog`等，区别在于这些组件不需要在局部组件里面注册

31. 谈一谈你对 Vue原型链的理解，工作中有什么用？

构造函数中有`$data` 的属性用作接收函数传递进来的参数， 当构造函数被实例化时，传递了一个参数，此处参数为对象， 所以此时构造函数中的 。这就是为什么访问里面数据是`app.$data.xxx`,工作中我们可以把`api`和图片路径绑在原型链上，这样再写`vue`的时候直接调用就行,不需要在引用.

Vue项目中遇到的问题

1. 在vue.config.js里面设置代理的时候,地址不要写成https协议,否则会出现500

2. 在使用List组件的时候一定要设置这个immediate-check为false,否则打开页面就进行触底判断

3. 要促发scroll事件，必须给元素设置绝对定位和overflow：auto才能生效.

4. 使用动态组件的时候，一定要谨慎，因为会产生很多问题,例如使用keep-alive之后，被包裹的组件中，使用生命周期要灵活，有可能调接口要写在activated中。keep-alive只能保留组件不被路由销毁，以及保留那些所谓的响应式数据，但有些DOM交互是没法保留的（比如滚动条位置）

5. 在购物车页面中，动态生成的复选框绑值的时候,使用的是v-model来操作的,这样就能快速添加属性,很方便