前言

vue 面试题记录，下面这些题是我看了一些别人的面经总结的一些高频面试题，以及后续实际开始面试了也会结合自己遇到的情况进行更新～

高频

简述MVVM

什么是MVVM，MVVM和MVC以及MVP有什么区别

首先是 MVC ，MVC 是最常见的软件架构之一，在这个架构中，它将软件分为了3个部分：View、Controller、Model，各部分的通信方式如下：
View 将用户指定发送到 Controller，Controller 完成业务逻辑后，让 Model 改变状态，Model 改变状态后将新数据传给 View，整个的过程都是单向通信。
随着业务量的扩大，Controller 需要处理各种逻辑，维护成本越来越高，也就衍生出了一个新的软件架构，即 MVVM。

MVP

MVVM 就是把 MVC 中的 Controller 的数据和逻辑处理部分从中抽离出来，用一个专门的对象去管理，即 ViewModel，是 Model 和 Controller 之间的一座桥梁。
MVVM 架构也是将软件分为了3个部分：View、ViewModel、Model，各部分通信方式如下：
View 与 ViewModel 双向绑定，View 的变动自动绑定在 ViewModel 中，然后 ViewModel 与 Model 进行双向通信，Model 就不与 View 直接进行通信。

Vue 生命周期

vue 生命周期就是 vue 实例从创建到销毁的过程，可以将此过程分为四个阶段：

创建阶段，此阶段有 beforeCreate 和 created 两个钩子函数：
beforeCreate 是new Vue()之后触发的第一个钩子，发生在实例创建之前，此时 data，methods 等数据和方法都还没初始化，还不能访问；
created 发生在实例创建之后，此时的 data 和 methods 已经初始化好了，可以进行调用或者操作，可以进行异步数据请求，例如数据初始化。

挂载阶段，此阶段有 beforeMount 和 mounted 两个钩子函数：
beforeMount 发生发生在挂载前，此时虚拟 Dom 已创建完成，可以对数据进行更改但是不会渲染到页面上；
mounted 发生在挂载后，此时真实的 Dom 挂载完毕，可以访问到 DOM 节点了，vue实例也完成了初始化，此时用户可以在浏览器上看到页面内容了。

运行阶段，此阶段有 beforeUpdate 和 updated 两个钩子函数：
beforeUpdate 发生在状态或者数据更新前，此时 data 中的数据状态已经发生变化了，但还没开始渲染 dom 树
updated 发生在更新后，此时 dom 节点被重新渲染了，页面显示的也是更新后的数据。但是要避免在这个阶段进行更改数据，可能会陷入死循环，可以用计算属性或者 watcher 进行状态改变。

销毁阶段，此阶段有 beforeDestroy 和 destroyed 两个钩子函数：
beforeDestroy 发生在实例销毁前，这个时候实例还没被销毁，vue 实例还能使用
destroyed 发生在实例销毁之后，这个时候 vue 实例已不存在，所有的子实例也被销毁，所有的指令被解绑，事件监听被移除。

每个生命周期适合哪些场景？生命周期钩子的一些使用方法：
beforecreate : 可以在这加个loading事件，在加载实例时触发
created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
mounted : 挂载元素，获取到DOM节点
updated : 如果对数据统一处理，在这里写上相应函数
beforeDestroy : 可以做一个确认停止事件的确认框
nextTick : 更新数据后立即操作dom

Vue 如何实现组件间通信？

vue 组件的通信分为两种方式
一个是父子组件之间的通信，一个是非父子组件之间的通信（bus）

父子组件

props / emits

这是Vue跨组件通信最常用，也是基础的一个方案。

父组件通过 prop 向子组件传值

父组件：
<template>
  <div>
    <h3>this is father</h3>
    <!-- :传递到子组件的数据名="需要传递的数据" -->
    <Child :shop="shopList" />
  </div>
</template>

<script>
import Child from './child.vue';
export default {
  name: 'Father',
  components: {
    Child
  },
  setup() {
    const shopList = '三包烟, 两瓶啤酒, 一斤花生米';
    return {
      shopList
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

子组件：
<template>
  <div>
    <p>this is child</p>
    {{ shop }}
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['shop']
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

子组件通过 emit 出发父组件的时间执行

父组件
<template>
  <div>
    <h1>【case1】父传子</h1>
    <p>父：好大儿，去帮为父买几个东西吧，东西通过 props 传给你了</p>
    <!-- :传递到子组件的数据名="需要传递的数据" -->
    <Child :shop="shopList" @giveClick="giveMoney" />
    <p>父：给给给，一共 {{ number }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';
import Child from './child.vue';
export default {
  name: 'Father',
  components: {
    Child
  },
  setup() {
    const shopList = '三包烟, 两瓶啤酒, 一斤花生米';
    let number = ref();
    const giveMoney = msg => {
      console.log(msg);
      number.value = msg;
      console.log(number);
    };
    return {
      shopList,
      giveMoney,
      number
    };
  }
};
</script>
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

子组件
<template>
  <div>
    <p>子：好的爸爸，这是我收到的东西：{{ shop }}</p>
    <h1>【case2】子传父</h1>
    <p>子：爸爸我没钱了</p>
    <button @click="moneyClick">伸手要钱</button>
  </div>
</template>

<script>
export default {
  name: 'Child',
  props: ['shop'],
  setup(props, { emit }) {
    const moneyClick = () => {
      // 触发父组件中的方法，方法名要与父组件中的监听事件名一样
      emit('giveClick', '1000');
    };
    return {
      moneyClick
    };
  }
};
</script>
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

expose / ref

父组件获取子组件的属性或者调用子组件方法
defineExpose
someMethod
ref=“comp”

attrs

包含父作用域里除 class 和 style 除外的非 props 属性集合

v-model

可以支持多个数据双向绑定

爷孙组件

provide / inject

适用于隔代通信，例如爷孙组件
provide / inject 为依赖注入

provide：可以让我们指定想要提供给后代组件的数据或

inject：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用

任意组件

Mitt

mitt 的用法：通过 on 方法添加事件，off 方法移除，clear 清空所有，emit

Vuex

Vuex 实现原理

Vuex有哪些基本属性?为什么 Vuex 的 mutation 中不能做异步操作
vuex 的 mutation 和 action
vuex 模块化
vuex 的挂载过程

vue实现双向数据绑定原理是什么

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，
通过Object.defineProperty()来实现数据劫持

实现双向绑定 Proxy 与 Object.defineProperty 相比优劣如何

watch 和 computed 和 methods 区别

计算属性和watch有什么区别?以及它们的运用场景?
Vue 计算属性和 watch 在什么场景下使用
data () { a: { b: 1 } }; 如何用 watch 监听 b 的变化

VueRouter 实现原理

vue router懒加载

Vue hash 路由和 history 路由的区别

keep-alive的实现

Keepalive 是什么，里面有哪些钩子

nextTick的实现

$nexttick 是干嘛的，你一般拿它做什么

你怎么理解Vue中的diff算法

插槽是什么 怎么使用的

常用指令列举

自定义指令你是怎么用的
vue常用语法、内置组件

v-model的实现以及它的实现原理

v-for中key的作用

使用 v-for 要求写 key，为什么

你知道Vue3有哪些新特性吗？它们会带来什么影响？

说一下vue3.0你了解多少
说一下 vue 有哪些优点和特点

其他

vue 为什么要用 template

Vue 数据响应式怎么做到的？

如何解决 vue 初始化页面闪动问题

vue 首屏渲染优化有哪些

Vue.set 是做什么用的？

vue动态传参以及获取

Eventbus具体是怎么实现的

nuxt 怎样配置路由，如何自定义路由，自定义的和约定路由哪个优先级高

new Vue后整个的流程

v-show 和 v-if 有什么区别

vue 的模板编译原理

vnode的理解，compiler和patch的过程

你都做过哪些Vue的性能优化

vue中的data为什么返回的是一函数

Vue的父子组件生命周期钩子函数执行顺序

什么是组件以及如何使用组件