vue面试问到的题及解决办法

首页-样式重置与公用

准备网站所需的重置样式代码，以及一些公用样式代码。 导入方式 html导入 vue main.js全局导入

// 重置样式
* {
  box-sizing: border-box;
 }
 
 html {
   height: 100%;
   font-size: 14px;
 }
 body {
   height: 100%;
   color: #333;
   min-width: 1240px;
   font: 1em/1.4 'Microsoft Yahei', 'PingFang SC', 'Avenir', 'Segoe UI', 'Hiragino Sans GB', 'STHeiti', 'Microsoft Sans Serif', 'WenQuanYi Micro Hei', sans-serif
 }
 
 ul,
 h1,
 h3,
 h4,
 p,
 dl,
 dd {
   padding: 0;
   margin: 0;
 }
 
 a {
   text-decoration: none;
   color: #333;
   outline: none;
 }
 
 i {
   font-style: normal;
 }
 
 input[type="text"],
 input[type="search"],
 input[type="password"], 
 input[type="checkbox"]{
   padding: 0;
   outline: none;
   border: none;
   -webkit-appearance: none;
   &::placeholder{
     color: #ccc;
   }
 }
 
 img {
   max-width: 100%;
   max-height: 100%;
   vertical-align: middle;
 }
 
 ul {
   list-style: none;
 }
 
 #app {
   background: #f5f5f5;
   user-select: none;
 }
 
 .container {
   width: 1240px;
   margin: 0 auto;
   position: relative;
 }
 
 .ellipsis {
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
 
 .ellipsis-2 {
   word-break: break-all;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   overflow: hidden;
 }
 
 .fl {
   float: left;
 }
 
 .fr {
   float: right;
 }
 
 .clearfix:after {
   content: ".";
   display: block;
   visibility: hidden;
   height: 0;
   line-height: 0;
   clear: both;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

数据懒加载 体验基于组合API的@vueuse/core工具库

1.使用Vue封装过组件吗?有哪些?讲一下他们是怎么实现的**

比如侧边导航组件、项目中常用的 echarts图表的封装（比如 折线图、柱状图等） 封装组件需要考虑复用性：

预留插槽slot, 多次调用如果 子组件视图结构不一样那么就要 在 子组件template预留好 插槽（单个 插槽、具名插槽，作用域插槽）

考虑到数据传递，定义props 组件接收父组件传递的数据，同时需要注意单向数据流，props不能直 接修改，$emit自定义事件，父组件修改 业务逻辑不要在子组件中处理，子组件在不同父组件中调用时，业务处理代码不同，切记不要直接

在子组件中处理业务，应该子组件 $emit自定义事件，将数据传递给父组件，父组件处理业务

###2.组件懒加载 (组件全局注册) 图片懒加载

组件懒加载 结合路由插件使用的时候使用import方式实现

component:()=>import() 导出时候利用export default{ components单个导出来}

组件注册多个见博客:

```vue
// const requireComponent = require.context('./libary', true, /\.vue$/)
// export default {
//   install (Vue) {
//     requireComponent.keys().forEach((item) => {
//       // console.log(requireComponent[item], 77)  //  ['./bread.vue', './pubArt.vue', './qq/q.vue']
//       /* 获取的是 每一个组件暴露出来的对象 */
//       const defaultObj = requireComponent(item).default
//       Vue.component(defaultObj.name, defaultObj)
//     })
//   }
// }

// import q1 from './libary/qq/q1.vue'
import defaultImg from '@/assets/images/200.png'
const requireComponent = require.context('./libary', true, /\.vue$/)
export default {
  install (Vue) {
    // Vue.component()
    // console.dir(requireComponent.keys(), 888)
    requireComponent.keys().forEach((item) => {
      // console.log(requireComponent(item).default, 9888)
      //  requireComponent(item).default==> import q1 from './libary/qq/q1.vue'==>q1
      // console.log(q1, 111)
      Vue.component(
        requireComponent(item).default.name,
        requireComponent(item).default
      )
    })
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

## 图片懒加载
### **图片懒加载**

[图片懒加载地址参考]:http://zhoushugang.gitee.io/erabbit-client-pc-document/guide/03-home.html#_28-%E9%A6%96%E9%A1%B5%E4%B8%BB%E4%BD%93-%E5%9B%BE%E7%89%87%E6%87%92%E5%8A%A0%E8%BD%BD

就是在加载页面的时候，如果页面中的图片过多，可以使用占位符的方式替换没有在可是区域内的图片，只加载当前需 要现实的图片。监听滚动条的位置，当图片标签出现在可视区域的时候，重置图片的路径为真是路径，然后展示图片地址。一般在实际开发的时候都直接使用图片懒加载插件实现。还有一种解决方案就是使用页面骨架屏效果，也是类似占位显示，当数据加载完成之后替换掉占位显示的内容.

实现方法:**公共组件注册全局组件导入  图片懒加载公共组件加载  

```javascript
```vue
  // // 注册自定义指令
    Vue.directive('lazy', {
      // inserted () {
      //   console.log(11111)
      // }
      mounted (el, binding) {
        // 浏览器提供 IntersectionObserver
        const observer = new IntersectionObserver(
          ([{ isIntersecting }]) => {
            // console.log(isIntersecting, '====IntersectionObserver')
            if (isIntersecting) {
              console.log(el, binding, 11111)
              // 图片加载失败就显示默认图片
              el.onerror = function () {
                el.src = defaultImg
              }
              el.src = binding.value
              // 不在监听dom===stop()
              observer.unobserve(el)
            }
          },
          {
            threshold: 0.01
          }
        )
        // 监听dom
        observer.observe(el)
      }
    }) 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

```javascript
```js
 <img alt="" v-lazyload="cate.picture">
1
2
3
4
5
6

## **骨架布局组件**

### 2.1 何为骨架屏

Skeleton Screen(骨架屏)就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容。

如何页面数据没有加载完毕，会展示空白，骨架屏的主要作用的替代白屏，展示页面的大致结构，直到页面数据完全返回。

### 2.2 何时使用

1）首次加载数据时，可能出现白屏，可以使用骨架屏替代白屏展示；

2）数据量较大的列表中，每次数据返回前，可以使用骨架屏做临时展示；

3）某些授权中间页，一般授权中间页并没有内容，所以会出现短暂的空白，可以使用骨架屏替代空白页展示；

以上几种情况会造成页面空白，使用骨架屏代替展示，可以提升用户体验，视觉上是可以看到页面有内容的，且内容铺满了屏幕。





### vue3

## **数据加载vue动画    知道vue中如何使用动画，知道Transition组件使用。** 

**当vue中,显示隐藏,创建移出,**一个元素或者一个组件的时候,可以通过transition(vue自带的)实现动画

可以给任何元素和组件添加进入/离开过渡

- 条件渲染 (使用 `v-if`)

- 条件展示 (使用 `v-show`)

- 动态组件

- 组件根节点

- 如果元素或组件离开，完成一个淡出效果：

```javascript

  <transition name="fade">
    <p v-if="show">100</p>
  </transition>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

.fade-leave {
    opacity: 1
}
.fade-leave-active {
    transition: all 1s;
}
.fade-leave-to {
    opcaity: 0
}
1
2
3
4
5
6
7
8
9

• 进入（显示，创建）
  • v-enter 进入前 （vue3.0 v-enter-from）
  • v-enter-active 进入中
  • v-enter-to 进入后
• 离开（隐藏，移除）
  • v-leave 进入前 （vue3.0 v-leave-from）
  • v-leave-active 进入中
  • v-leave-to 进入后

多个transition使用不同动画，可以添加nam属性，name属性的值替换v即可。

首页主体-组件数据懒加载

@vueuse/core下载及使用 npm i @vueuse/core 安装：@vueuse/core 包，它封装了常见的一些交互逻辑。

你吸顶头部组件

```vue
import { useWindowScroll } from '@vueuse/core'导入组件方法
 <div class="container" v-show="y>=78">
     
     setup () {
    const { y } = useWindowScroll()
    return { y }
  }
1
2
3
4
5
6
7
8

1.useWindowScroll() 是@vueuse/core提供的api可返回当前页面滚动时候蜷曲的距离。x横向，y纵向

2.vue3.0组合API提供了更多逻辑代码封装的能力。@vueuse/core 基于组合API封装好用的工具函数。

 



### **实现当组件进入可视区域在加载数据。** 

**@vueuse/core** 中的uselntersectionObserver来实现监听进入可视区域行为,但是必须配合vue3.0的组合Api的方式才能实现.

大致步骤:  参数含义   改造组件成为数据懒加载,掌握



### lodash的使用

**loadsh** **了解过吗？** 

Lodash 是一个一致性、模块化、高性能的 JavaScript 实用工具库。 

首先要明白的是lodash的所有函数都不会在原有的数据上进行操作，而是复制出一个新的数据而不改变 

原有数据。类似immutable.js的理念去处理。 

Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。 

Lodash 的模块化方法 非常适用于： 

\1. 遍历 array、object 和 string 对 

\2. 值进行操作和检测 

\3. 创建符合功能的函数 

**常用语法**：cloneDeep深拷贝，uniq数组去重，compact 去除假值，filter和reject 过滤集合传入匿名函数， join 将 array 中的所有元素转换为由 separator 分隔的字符串等

**项目中的组件是如何使用的** 

可以使用第三方组件库以及自定义组件 

vue项目中使用组件库为 vant / element-ui / iview / ant-design-vue 

react常用组件库为 Ant Design / Ant Design Mobile 

开发者也可以通过自定义实现组件的使用

## **商城项目中有写到调用微信，支付宝支付，简单讲述一下这个支付与后台** 

**对接的过程，微信支付的原理** 

步骤1：用户在商户APP中选择商品，提交订单，选择微信支付。 

步骤2：商户后台收到用户支付单，调用微信支付统一下单接口。参见【统一下单API】。 

步骤3：统一下单接口返回正常的prepay_id，再按签名规范重新生成签名后，将数据传输给APP。 

参与签名的字段名为appid，partnerid，prepayid，noncestr，timestamp，package。注意：package 的值格式为Sign=WXPay 

步骤4：商户APP调起微信支付。api参见本章节【app端开发步骤说明】 

步骤5：商户后台接收支付通知。api参见【支付结果通知API】 

步骤6：商户后台查询支付结果。，api参见【查询订单API】（查单实现可参考：支付回调和查单实 

现指引）























1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93