Vue常见面试题(2022)

1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ） 仅在web页面初始化时加载相应的html、js、css，页面一旦加载完成，spa不会因为用户的操作二进行页面的重新加载或者跳转，而是利用路由机制实现html内容的变换。

优点：

用户体验好，快，内容的改变不需要中心加载整个页面，避免不必要的跳转和重新渲染前后端职责分离，架构清晰，前端负责交互逻辑，后端负责数据处理

缺点：

初次加载耗时多为实现页面web应用功能及显示效果，西药在页面加载时将js、css同意加载，部分页面按需引入

2、v-show 与 v-if 有什么区别？

都是在页面控制一个dom元素的显示和隐藏

v-if:是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。适用于：切换频率较低的场景。

v-show: 不管初始条件是什么，元素总会被渲染，仅仅是使用样式隐藏掉。适用于：切换频率较高的场景。

3、Class 与 Style 如何动态绑定？

class可以通过对象语法和数组语法进行绑定:

对象语法：

 

 

data: {   isActive: true,   hasError: false }  

数组语法：

data: {

  activeClass: 'active',

  errorClass: 'text-danger'

}

Style 也可以通过对象语法和数组语法进行动态绑定：

对象语法：

data: {

  activeColor: 'red',

  fontSize: 30

}

数组语法：

​

data: {

  styleColor: {

     color: 'red'

   },

  styleSize:{

     fontSize:'23px'

  }

}

4、怎样理解 Vue 的单向数据流？

所有的prop都使得父子prop之间形成一个单向下行绑定：父级prop的更新会下流到子组件中，但是反过来不行。这样会阻止子组件意外改变子组件的状态。

另外，每次父组件发生更新时，子组件所有的prop都会拿到最新的值，当你尝试在子组件内部改变prop时，vue在浏览器控制台会发出警告，如果子组件想修改时，只能通过$emit派发一个自定义事件，父组件接收后，由父组件修改。

有两种常见的试图改变一个 prop 的情形 :

这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。 在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：

这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下，最好使用这个 prop 的值来定义一个计算属性

5、computed 和 watch 的区别和运用的场景？

computed是计算属性，依赖其他属性值，并且computed的值有缓存，只有他所依赖的值发生改变，下一次获取computed的值才会重新计算

watch是侦听属性，用来侦听某些数据的改变，每当侦听的属性数据变化时会执行回调进行后续的操作

适应场景

当我们需要进行数值计算，并且依赖于其它数据时，应该使用 computed，因为可以利用 computed 的缓存特性，避免每次获取值时，都要重新计算；

当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这些都是计算属性无法做到的。

6、直接给一个数组项赋值，Vue 能检测到变化吗？

由于 JavaScript 的限制，Vue 不能检测到以下数组的变动：

当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

当你修改数组的长度时，例如：vm.items.length = newLength

为了解决第一个问题，Vue 提供了以下操作方法：

// Vue.set

Vue.set(vm.items, indexOfItem, newValue)

// vm.$set，Vue.set的一个别名

vm.$set(vm.items, indexOfItem, newValue)

// Array.prototype.splice

vm.items.splice(indexOfItem, 1, newValue)

为了解决第二个问题，Vue 提供了以下操作方法：

// Array.prototype.splice

vm.items.splice(newLength)

7、谈谈你对 Vue 生命周期的理解？

可能的追问

setup和created谁先执行？

setup中为什么没有beforeCreate和created？

（1）生命周期是什么？

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）各个生命周期的作用

生命周期 描述

beforeCreate 组件实例被创建之初，组件的属性生效之前

created 组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用

beforeMount 在挂载开始之前被调用：相关的 render 函数首次被调用

mounted el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子

beforeUpdate 组件数据更新之前调用，发生在虚拟 DOM 打补丁之前

update 组件数据更新之后

activited keep-alive 专属，组件被激活时调用

deactivated keep-alive 专属，组件被销毁时调用

beforeDestory 组件销毁前调用

destoryed 组件销毁后调用

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

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程

父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted

子组件更新过程

父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程

父 beforeUpdate -> 父 updated

销毁过程

父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

9、在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。但是本人推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

能更快获取到服务端数据，减少页面 loading 时间；

ssr 不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

10、在什么阶段才能访问操作DOM？

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，所以在 mounted 中可以访问操作 DOM。

11、父组件可以监听到子组件的生命周期吗？

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理 , 以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

//  Parent.vue

doSomething() {

   console.log('父组件监听到 mounted 钩子函数 ...');

},  

//  Child.vue

mounted(){

   this.$emit("mounted");

   console.log('子组件触发 mounted 钩子函数 ...');

},    

    

// 以上输出顺序为：

// 子组件触发 mounted 钩子函数 ...

// 父组件监听到 mounted 钩子函数 ...  

   

当然 @hook 方法不仅仅是可以监听 mounted，其它的生命周期事件，例如：created，updated 等都可以监听。

12、谈谈你对 keep-alive 的了解？

keep-alive是vue的一个内置的组件，可以使被包裹的组件保留状态，避免重新渲染，一般结合结合动态路由使用，有以下特性：

一般结合路由和动态组件使用，用于缓存组件

提供include和exclude属性， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

13、组件中 data 为什么是一个函数？

为什么组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？

// data

data() {

  return {

    message: "子组件",

    childName:this.name

  }

}

​

// new Vue

new Vue({

  el: '#app',

  router,

  template: '',

  components: {App}

})

因为组件是用来复用的，且 JS 里对象是引用关系，如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

14、v-model 的原理？

我们在 vue 项目中主要使用 v-model 指令在表单 input、textarea、select 等元素上创建双向数据绑定，我们知道 v-model 本质上不过是语法糖，v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

text 和 textarea 元素使用 value 属性和 input 事件；

checkbox 和 radio 使用 checked 属性和 change 事件；

select 字段将 value 作为 prop 并将 change 作为事件。

15、Vue 组件间通信有哪几种方式？

（1）props / $emit 适用 父子组件通信

（2）ref 与 $parent / $children 适用 父子组件通信

ref：如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例

$parent / $children：访问父 / 子实例

（3）EventBus （$emit / $on） 适用于 父子、隔代、兄弟组件通信

这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心），用它来触发事件和监听事件，从而实现任何组件间的通信，包括父子、隔代、兄弟组件。

//安装全局事件总线

new Vue({

    ......

    beforeCreate() {

        Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm

    },

    ......

})

//使用事件总线

//接收数据：A 组件想接收数据，则在 A 组件中给$bus 绑定自定义事件，事件的回调留在 A 组件自身。

methods(){

  demo(data){......}

}

this.$bus.$on('xxxx',this.demo)

//提供数据：`this.$bus.$emit('xxxx',数据)`

（4）$attrs/$listeners 适用于 隔代组件通信

$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 ( class 和 style 除外 )。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 ( class 和 style 除外 )，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 inheritAttrs 选项一起使用。

$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

（5）provide / inject 适用于 隔代组件通信

祖先组件中通过 provider 来提供变量，然后在子孙组件中通过 inject 来注入变量。 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

（6）Vuex 适用于 父子、隔代、兄弟组件通信

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

（7）消息订阅与发布

安装 pubsub：npm i pubsub-js

引入: import pubsub from 'pubsub-js'

接收数据：A 组件想接收数据，则在 A 组件中订阅消息，订阅的回调留在 A 组件自身。

methods(){

  demo(data){......}

}

......

mounted() {

  this.pid = pubsub.subscribe('xxx',this.demo) //订阅消息

}

提供数据：pubsub.publish('xxx',数据)

16、你使用过 Vuex 吗？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，数据共享仓库。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

主要包括以下几个模块：

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

可能的追问

vuex有什么缺点吗？你在开发过程中有遇到什么问题吗？

action和mutation的区别是什么？为什么要区分它们？

17、使用过 Vue SSR 吗？说说 SSR？

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

即：SSR大致的意思就是vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染。

服务端渲染 SSR 的优缺点如下：

（1）服务端渲染的优点：

更好的 SEO： 因为 SPA 页面的内容是通过 Ajax 获取，而搜索引擎爬取工具并不会等待 Ajax 异步完成后再抓取页面内容，所以在 SPA 中是抓取不到页面通过 Ajax 获取到的内容；而 SSR 是直接由服务端返回已经渲染好的页面（数据已经包含在页面中），所以搜索引擎爬取工具可以抓取渲染好的页面；

更快的内容到达时间（首屏加载更快）： SPA 会等待所有 Vue 编译后的 js 文件都下载完成后，才开始进行页面的渲染，文件下载等需要一定的时间等，所以首屏渲染需要一定的时间；SSR 直接由服务端渲染好页面直接返回显示，无需等待下载 js 文件及再去渲染等，所以 SSR 有更快的内容到达时间；

（2) 服务端渲染的缺点：

更多的开发条件限制： 例如服务端渲染只支持 beforCreate 和 created 两个钩子函数，这会导致一些外部扩展库需要特殊处理，才能在服务端渲染应用程序中运行；并且与可以部署在任何静态文件服务器上的完全静态单页面应用程序 SPA 不同，服务端渲染应用程序，需要处于 Node.js server 运行环境；

更多的服务器负载：在 Node.js 中渲染完整的应用程序，显然会比仅仅提供静态文件的 server 更加大量占用CPU 资源 (CPU-intensive - CPU 密集)，因此如果你预料在高流量环境 ( high traffic ) 下使用，请准备相应的服务器负载，并明智地采用缓存策略。

18、vue-router 路由模式有几种？

vue-router 有 3 种路由模式：hash、history、abstract

其中，3 种路由模式的说明如下：

hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；

history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；

abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

19、能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗？

（1）hash 模式的实现原理

早期的前端路由的实现就是基于 location.hash 来实现的。其实现原理很简单，location.hash 的值就是 URL 中 # 后面的内容。比如下面这个网站，它的 location.hash 的值为 '#search'：

https://www.word.com#search

hash 路由模式的实现主要是基于下面几个特性：

URL 中 hash 值只是客户端的一种状态，也就是说当向服务器端发出请求时，hash 部分不会被发送；

hash 值的改变，都会在浏览器的访问历史中增加一个记录。因此我们能通过浏览器的回退、前进按钮控制hash 的切换；

可以通过 a 标签，并设置 href 属性，当用户点击这个标签后，URL 的 hash 值会发生改变；或者使用 JavaScript 来对 loaction.hash 进行赋值，改变 URL 的 hash 值；

我们可以使用 hashchange 事件来监听 hash 值的变化，从而对页面进行跳转（渲染）。

（2）history 模式的实现原理

HTML5 提供了 History API 来实现 URL 的变化。其中做最主要的 API 有以下两个：history.pushState() 和 history.repalceState()。这两个 API 可以在不进行刷新的情况下，操作浏览器的历史纪录。唯一不同的是，前者是新增一个历史记录，后者是直接替换当前的历史记录，如下所示：

window.history.pushState(null, null, path);

window.history.replaceState(null, null, path);

history 路由模式的实现主要基于存在下面几个特性：

pushState 和 repalceState 两个 API 来操作实现 URL 的变化 ；

我们可以使用 popstate 事件来监听 url 的变化，从而对页面进行跳转（渲染）；

history.pushState() 或 history.replaceState() 不会触发 popstate 事件，这时我们需要手动触发页面跳转（渲染）。

20、什么是 MVVM？

Model–View–ViewModel （MVVM） 是一个软件架构设计模式

（1）View 层

View 是视图层，也就是用户界面。前端主要由 HTML 和 CSS 来构建 。

（2）Model 层

Model 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端提供的 api 接口。

（3）ViewModel 层

ViewModel 是由前端开发人员组织生成和维护的视图数据层。在这一层，前端开发者对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型。需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为（交互），视图状态和行为都封装在了 ViewModel 里。这样的封装使得 ViewModel 可以完整地去描述 View 层。

MVVM 框架实现了双向绑定，这样 ViewModel 的内容会实时展现在 View 层，前端开发者再也不必低效又麻烦地通过操纵 DOM 去更新视图，MVVM 框架已经把最脏最累的一块做好了，我们开发者只需要处理和维护 ViewModel，更新数据视图就会自动得到相应更新。这样 View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的重要一环。

21、Vue 是如何实现数据双向绑定的？

Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据

Vue 主要通过以下 4 个步骤来实现数据双向绑定的：

实现一个监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。

实现一个解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。

实现一个订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。

实现一个订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

22、Vue 框架怎么实现对象和数组的监听？

通过 Object.defineProperty() 对数据进行劫持,但是 Object.defineProperty() 只能对属性进行数据劫持，不能对整个对象进行劫持，同理无法对数组进行劫持，但是我们在使用 Vue 框架中都知道，Vue 能检测到对象和数组（部分方法的操作）的变化，那它是怎么实现的呢？我们查看相关代码如下：

/**

   * Observe a list of Array items.

   */

observeArray (items: Array) {

    for (let i = 0, l = items.length; i < l; i++) {

        observe(items[i])  // observe 功能为监测数据的变化

    }

}

​

/**

   * 对属性进行递归遍历

   */

let childOb = !shallow && observe(val) // observe 功能为监测数据的变化

通过以上 Vue 源码部分查看，我们就能知道 Vue 框架是通过遍历数组 和递归遍历对象，从而达到利用 Object.defineProperty() 也能对对象和数组（部分方法的操作）进行监听。

23、Proxy 与 Object.defineProperty 优劣对比

Proxy 的优势如下:

Proxy 可以直接监听对象而非属性；

Proxy 可以直接监听数组的变化；

Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；

Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；

Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；

Object.defineProperty 的优势如下:

兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。

24、Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？

受现代 JavaScript 的限制 ，Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？

我们查看对应的 Vue 源码：vue/src/core/instance/index.js

export function set (target: Array | Object, key: any, val: any): any {

  // target 为数组  

  if (Array.isArray(target) && isValidArrayIndex(key)) {

    // 修改数组的长度, 避免索引>数组长度导致splcie()执行有误

    target.length = Math.max(target.length, key)

    // 利用数组的splice变异方法触发响应式  

    target.splice(key, 1, val)

    return val

  }

  // key 已经存在，直接修改属性值  

  if (key in target && !(key in Object.prototype)) {

    target[key] = val

    return val

  }

  const ob = (target: any).__ob__

  // target 本身就不是响应式数据, 直接赋值

  if (!ob) {

    target[key] = val

    return val

  }

  // 对属性进行响应式处理

  defineReactive(ob.value, key, val)

  ob.dep.notify()

  return val

}

我们阅读以上源码可知，vm.$set 的实现原理是：

如果目标是数组，直接使用数组的 splice 方法触发相应式；

如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

我们阅读以上源码可知，vm.$set 的实现原理是：

如果目标是数组，直接使用数组的 splice 方法触发相应式；

如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

26、虚拟 DOM 实现原理？

虚拟 DOM 的实现原理主要包括以下 3 部分：

用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；

diff 算法 — 比较两棵虚拟 DOM 树的差异；

pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。

27、Vue 中的 key 有什么作用？

key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速。

虚拟DOM中key的作用：

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】,

随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下：

2.对比规则：

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key：

①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！

②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

用index作为key可能会引发的问题：

3.1若对数据进行：逆序添加、逆序删除等破坏顺序操作:

会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

3.2如果结构中还包含输入类的DOM：

会产生错误DOM更新 ==> 界面有问题。

开发中如何选择key?:

4.1最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。

4.2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，

使用index作为key是没有问题的。

28、你有对 Vue 项目进行哪些优化？

（1）代码层面的优化

v-if 和 v-show 区分使用场景

computed 和 watch 区分使用场景

v-for 遍历必须为 item 添加 key，且避免同时使用 v-if

长列表性能优化

事件的销毁

图片资源懒加载

路由懒加载

第三方插件的按需引入

优化无限列表性能

服务端渲染 SSR or 预渲染

骨架屏

数据懒加载

（2）Webpack 层面的优化

Webpack 对图片进行压缩

减少 ES6 转为 ES5 的冗余代码

提取公共代码

模板预编译

提取组件的 CSS

优化 SourceMap

构建结果输出分析

Vue 项目的编译优化

（3）基础的 Web 技术的优化

开启 gzip 压缩

浏览器缓存

CDN 的使用

使用 Chrome Performance 查找性能瓶颈

30、说说你使用 Vue 框架踩过最大的坑是什么？怎么解决的？

31、简述一下Sass、Less，且说明区别？

他们是动态的样式语言，是CSS预处理器,CSS上的一种抽象层。他们是一种特殊的语法/语言而编译成CSS。 变量符不一样，less是@，而Sass是$; Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持; Sass是基于Ruby的，是在服务端处理的，而Less是需要引入less.js来处理Less代码输出Css到浏览器

32、什么是 mixin？

Mixins 使我们能够为 Vue 组件编写可插拔和可重用的功能。如果你希望在多个组件之间重用一组组件选项，例如生命周期 hook、方法等，则可以将其编写为 mixin，并在组件中简单地引用它

33、什么是 Vue 插件？

Vue 插件允许开发人员构建全局级别的功能并将其添加到 Vue。用于向程序添加可以全局访问的方法和属性、资源，选项，mixin 以及其他自定义 API。 VueFire 是 Vue 插件的一个例子，该插件添加了 Firebase 特定的方法并将其绑定到整个程序。之后 firebase 函数可在程序结构中的任何位置的 this 上下文中使用。

34、v-if和v-for哪个优先级更高？

实践中不应该把v-for和v-if放一起

在vue2中，v-for的优先级是高于v-if，把它们放在一起，输出的渲染函数中可以看出会先执行循环再判断条件，哪怕我们只渲染列表中一小部分元素，也得在每次重渲染的时候遍历整个列表，这会比较浪费；另外需要注意的是在vue3中则完全相反，v-if的优先级高于v-for，所以v-if执行时，它调用的变量还不存在，就会导致异常

通常有两种情况下导致我们这样做：

为了过滤列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。此时定义一个计算属性 (比如 activeUsers)，让其返回过滤后的列表即可（比如users.filter(u=>u.isActive)）。

为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。此时把 v-if 移动至容器元素上 (比如 ul、ol)或者外面包一层template即可。

文档中明确指出永远不要把 v-if 和 v-for 同时用在同一个元素上，显然这是一个重要的注意事项。

35、Vue要做权限管理该怎么做？控制到按钮级别的权限怎么做？

权限管理一般需求是页面权限和按钮权限的管理

具体实现的时候分后端和前端两种方案：

前端方案会把所有路由信息在前端配置，通过路由守卫要求用户登录，用户登录后根据角色过滤出路由表。比如我会配置一个asyncRoutes数组，需要认证的页面在其路由的meta中添加一个roles字段，等获取用户角色之后取两者的交集，若结果不为空则说明可以访问。此过滤过程结束，剩下的路由就是该用户能访问的页面，最后通过router.addRoutes(accessRoutes)方式动态添加路由即可。

后端方案会把所有页面路由信息存在数据库中，用户登录的时候根据其角色查询得到其能访问的所有页面路由信息返回给前端，前端再通过addRoutes动态添加路由信息

按钮权限的控制通常会实现一个指令，例如v-permission，将按钮要求角色通过值传给v-permission指令，在指令的moutned钩子中可以判断当前用户角色和按钮是否存在交集，有则保留按钮，无则移除按钮。

纯前端方案的优点是实现简单，不需要额外权限管理页面，但是维护起来问题比较大，有新的页面和角色需求就要修改前端代码重新打包部署；服务端方案就不存在这个问题，通过专门的角色和权限管理页面，配置页面和按钮权限信息到数据库，应用每次登陆时获取的都是最新的路由信息

可能的追问

类似Tabs这类组件能不能使用v-permission指令实现按钮权限控制？

  ⽤户管理

    ⻆⾊管理

服务端返回的路由信息如何添加到路由器中？

// 前端组件名和组件映射表

const map = {

  //xx: require('@/views/xx.vue').default // 同步的⽅式

  xx: () => import('@/views/xx.vue') // 异步的⽅式

}

// 服务端返回的asyncRoutes

const asyncRoutes = [

  { path: '/xx', component: 'xx',... }

]

// 遍历asyncRoutes，将component替换为map[component]

function mapComponent(asyncRoutes) {

  asyncRoutes.forEach(route => {

    route.component = map[route.component];

    if(route.children) {

      route.children.map(child => mapComponent(child))

    }

    })

}

mapComponent(asyncRoutes)

36、说一说你对vue响应式理解？

回答：是什么+为什么需要响应式+带来什么好处+响应式怎么实现+有哪些优缺点+vue3的变化

所谓数据响应式就是能够使数据变化可以被检测并对这种变化做出响应的机制。

MVVM框架中要解决的一个核心问题是连接数据层和视图层，通过数据驱动应用，数据变化，视图更新，要做到这点的就需要对数据做响应式处理，这样一旦数据发生变化就可以立即做出更新处理。

以vue为例说明，通过数据响应式加上虚拟DOM和patch算法，开发人员只需要操作数据，关心业务，完全不用接触繁琐的DOM操作，从而大大提升开发效率，降低开发难度。

vue2中的数据响应式会根据数据类型来做不同处理，如果是对象则采用Object.defineProperty()*的方式定义数据拦截，当数据被访问或发生变化时，我们感知并作出响应；如果是*数组则通过覆盖数组对象原型的7个变更方法，使这些方法可以额外的做更新通知，从而作出响应。这种机制很好的解决了数据响应化的问题，但在实际使用中也存在一些缺点：比如初始化时的递归遍历会造成性能损失；新增或删除属性时需要用户使用Vue.set/delete这样特殊的api才能生效；对于es6中新产生的Map、Set这些数据结构不支持等问题。

为了解决这些问题，vue3重新编写了这一部分的实现：利用ES6的Proxy代理要响应化的数据，它有很多好处，编程体验是一致的，不需要使用特殊api，初始化性能和内存消耗都得到了大幅改善；另外由于响应化的实现代码抽取为独立的reactivity包，使得我们可以更灵活的使用它，第三方的扩展开发起来更加灵活了。

37、怎么定义动态路由？怎么获取传过来的动态参数？

很多时候，我们需要将给定匹配模式的路由映射到同一个组件，这种情况就需要定义动态路由。

例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，例如：{ path: '/users/:id', component: User }，其中:id就是路径参数

路径参数 用冒号 : 表示。当一个路由被匹配时，它的 params 的值将在每个组件中以 this.$route.params 的形式暴露出来。

参数还可以有多个，例如/users/:username/posts/:postId；除了 $route.params 之外，$route 对象还公开了其他有用的信息，如 $route.query、$route.hash 等。

38、说说nextTick的使用和原理？

nextTick是等待下一次 DOM 更新刷新的工具方法。

Vue有个异步更新策略，意思是如果数据变化，Vue不会立刻更新DOM，而是开启一个队列，把组件更新函数保存在队列中，在同一事件循环中发生的所有数据变更会异步的批量更新。这一策略导致我们对数据的修改不会立刻体现在DOM上，此时如果想要获取更新后的DOM状态，就需要使用nextTick。

开发时，有两个场景我们会用到nextTick：

created中想要获取DOM时；

响应式数据变化后获取DOM更新后的状态，比如希望获取列表更新后的高度。

nextTick签名如下：function nextTick(callback?: () => void): Promise

所以我们只需要在传入的回调函数中访问最新DOM状态即可，或者我们可以await nextTick()方法返回的Promise之后做这件事。

在Vue内部，nextTick之所以能够让我们看到DOM更新后的结果，是因为我们传入的callback会被添加到队列刷新函数(flushSchedulerQueue)的后面，这样等队列内部的更新函数都执行完毕，所有DOM操作也就结束了，callback自然能够获取到最新的DOM值。

39、怎么缓存当前的组件？缓存后怎么更新？

开发中缓存组件使用keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

  

结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件。vue3中结合vue-router时变化较大，之前是keep-alive包裹router-view，现在需要反过来用router-view包裹keep-alive：

  

    

  

缓存后如果要获取数据，解决方案可以有以下两种：

beforeRouteEnter：在有vue-router的项目，每次进入路由的时候，都会执行beforeRouteEnter

beforeRouteEnter(to, from, next){

  next(vm=>{

    console.log(vm)

    // 每次进入路由执行

    vm.getData()  // 获取数据

  })

},

actived：在keep-alive缓存的组件被激活的时候，都会执行actived钩子

activated(){

      this.getData() // 获取数据

},

keep-alive是一个通用组件，它内部定义了一个map，缓存创建过的组件实例，它返回的渲染函数内部会查找内嵌的component组件对应组件的vnode，如果该组件在map中存在就直接返回它。由于component的is属性是个响应式数据，因此只要它变化，keep-alive的render函数就会重新执行。

开发中缓存组件使用keep-alive组件，keep-alive是vue内置组件，keep-alive包裹动态组件component时，会缓存不活动的组件实例，而不是销毁它们，这样在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

  

结合属性include和exclude可以明确指定缓存哪些组件或排除缓存指定组件。vue3中结合vue-router时变化较大，之前是keep-alive包裹router-view，现在需要反过来用router-view包裹keep-alive：

  

    

  

40、从0到1自己构架一个vue项目，说说有哪些步骤、哪些重要插件、目录结构你会怎么组织

思路：

构建项目，创建项目基本结构

引入必要的插件：

代码规范：prettier，eslint

提交规范：husky，lint-staged

其他常用：svg-loader，vueuse，nprogress

常见目录结构

回答：

从0创建一个项目我大致会做以下事情：项目构建、引入必要插件、代码规范、提交规范、常用库和组件

目前vue3项目我会用vite或者create-vue创建项目

接下来引入必要插件：路由插件vue-router、状态管理vuex/pinia、ui库我比较喜欢element-plus和antd-vue、http工具我会选axios

其他比较常用的库有vueuse，nprogress，图标可以使用vite-svg-loader

下面是代码规范：结合prettier和eslint即可

最后是提交规范，可以使用husky，lint-staged，commitlint

目录结构我有如下习惯：

.vscode：用来放项目中的 vscode 配置

plugins：用来放 vite 插件的 plugin 配置

public：用来放一些诸如页头icon 之类的公共文件，会被打包到dist根目录下

src：用来放项目代码文件

api：用来放http的一些接口配置

assets：用来放一些 CSS 之类的静态资源

components：用来放项目通用组件

layout：用来放项目的布局

router：用来放项目的路由配置

store：用来放状态管理的配置

utils：用来放项目中的工具方法类

views：用来放项目的页面文件

41、Vue实例挂载的过程中发生了什么?

挂载过程完成了最重要的两件事：

初始化

建立更新机制

挂载过程指的是app.mount()过程，这个过程中整体上做了两件事：初始化和建立更新机制

初始化会创建组件实例、初始化组件状态，创建各种响应式数据

建立更新机制这一步会立即执行一次组件更新函数，这会首次执行组件渲染函数并执行patch将前面获得vnode转换为dom；同时首次执行渲染函数会创建它内部响应式数据之间和组件更新函数之间的依赖关系，这使得以后数据变化时会执行对应的更新函数。

42、Vue中如何检测数组的变化？

vue中对数组没有进行defineProperty，而是重写了数组的7个方法。 分别是：

push

shift

pop

splice

unshift

sort

reverse

因为这些方法都会改变数组本身。

43、谈谈对组件的理解

组件化开发能大幅提高应用开发效率、测试性、复用性

常用的组件化技术：属性、自定义事件、插槽

降低更新范围，值重新渲染变化的组件

高内聚、低耦合、单向数据流

44、$attrs是为了解决什么问题出现的？

主要作用是为了实现批量传递数据。

provide/inject更适合应用在插件中，主要实现跨级数据传递。

45、Vue的普通Slot以及作用域Slot的区别

普通插槽

普通插槽是渲染后做替换的工作。父组件渲染完毕后，替换子组件的内容。

作用域插槽

作用域插槽可以拿到子组件里面的属性。在子组件中传入属性然后渲染。

46、Vue.use是干什么的？

Vue.use是用来使用插件的。我们可以在插件中扩展全局组件、指令、原型方法等。 会调用install方法将Vue的构建函数默认传入，在插件中可以使用vue，无需依赖vue库

47、vue-router有几种钩子函数？执行流程如何？

作用：对路由进行权限控制

分类：全局守卫、独享守卫、组件内守卫

全局守卫:

//全局前置守卫：初始化时执行、每次路由切换前执行

router.beforeEach((to, from, next) => {

  console.log("beforeEach", to, from);

  if (to.meta.isAuth) {

    //判断当前路由是否需要进行权限控制

    if (localStorage.getItem("school") === "SCHOOL") {

      //权限控制的具体规则

      next(); //放行

    } else {

      alert("暂无权限查看");

      // next({name:'guanyu'})

    }

  } else {

    next(); //放行

  }

});

​

//全局后置守卫：初始化时执行、每次路由切换后执行

router.afterEach((to, from) => {

  console.log("afterEach", to, from);

  if (to.meta.title) {

    document.title = to.meta.title; //修改网页的title

  } else {

    document.title = "vue_test";

  }

});

独享守卫:

beforeEnter(to,from,next){

    console.log('beforeEnter',to,from)

    if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制

        if(localStorage.getItem('school') === 'SCHOOL'){

            next()

        }else{

            alert('暂无权限查看')

            // next({name:'guanyu'})

        }

    }else{

        next()

    }

}

组件内守卫：

//进入守卫：通过路由规则，进入该组件时被调用

beforeRouteEnter (to, from, next) {

},

//离开守卫：通过路由规则，离开该组件时被调用

beforeRouteLeave (to, from, next) {

}

48、路由器的两种工作模式

对于一个 url 来说，什么是 hash 值？—— #及其后面的内容就是 hash 值。

hash 值不会包含在 HTTP 请求中，即：hash 值不会带给服务器。

hash 模式：

地址中永远带着#号，不美观 。

若以后将地址通过第三方手机 app 分享，若 app 校验严格，则地址会被标记为不合法。

兼容性较好。

history 模式：

地址干净，美观 。

兼容性和 hash 模式相比略差。

应用部署上线时需要后端人员支持，解决刷新页面服务端 404 的问题。

49、Vue3.x响应式数据原理吗？

Vue3.x改用Proxy替代Object.defineProperty。因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。

Proxy只会代理对象的第一层，那么Vue3又是怎样处理这个问题的呢？

（很简单啊）

判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。

监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？

我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

50、Vue模版编译原理知道吗，能简单说一下吗？

简单说，Vue的编译过程就是将template转化为render函数的过程。会经历以下阶段：

生成AST树

优化

codegen

首先解析模版，生成AST语法树(一种用JavaScript对象的形式来描述整个模板)。 使用大量的正则表达式对模板进行解析，遇到标签、文本的时候都会执行对应的钩子进行相关处理。

Vue的数据是响应式的，但其实模板中并不是所有的数据都是响应式的。有一些数据首次渲染后就不会再变化，对应的DOM也不会变化。那么优化过程就是深度遍历AST树，按照相关条件对树节点进行标记。这些被标记的节点(静态节点)我们就可以跳过对它们的比对，对运行时的模板起到很大的优化作用。

编译的最后一步是将优化后的AST树转换为可执行的代码。

51、路由传参方式？

跳转

​

  :to="{

    path: '/home/message/detail',

    query: {

      id: 666,

      title: '你好',

    },

  }"

>跳转

​

​

{

    component:Message,

        children:[

            {

                name:'xiangqing',

                path:'detail/:id/:title', //使用占位符声明接收params参数

                component:Detail

            }

        ]

}

跳转

​

  :to="{

    name: 'xiangqing',

    params: {

      id: 666,

      title: '你好',

    },

  }"

>跳转

​

//接收参数

$route.query.id;

$route.params.id;

52、$route和$router的区别

$route是路由信息对象，包括path，params，hash，query，fullPath，matched，name等路由信息参数。

而$router是路由实例对象包括了路由的跳转方法，钩子函数等。

53、vue-router路由懒加载

像 vue 这种单页面应用，如果没有路由懒加载，运用 webpack 打包后的文件将会很大，造成进入首页时，需要加载的内容过多，出现较长时间的白屏，运用路由懒加载则可以将页面进行划分，需要的时候才加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。vue 路由懒加载有以下三种方式：

vue 异步组件

ES6 的 import()

webpack 的 require.ensure()

1. vue 异步组件 这种方法主要是使用了 resolve 的异步机制，用 require 代替了 import 实现按需加载

export default new Router({

  routes: [

    {

      path: '/home',',

      component: (resolve) => require(['@/components/home'], resolve),

    },

    {

      path: '/about',',

      component: (resolve) => require(['@/components/about'], resolve),

    },

  ],

})

2. ES6 的 import() vue-router 在官网提供了一种方法，可以理解也是为通过 Promise 的 resolve 机制。因为 Promise 函数返回的 Promise 为 resolve 组件本身，而我们又可以使用 import 来导入组件。

export default new Router({

  routes: [

    {

      path: '/home',

      component: () => import('@/components/home'),

    },

    {

      path: '/about',

      component: () => import('@/components/home'),

    },

  ],

})

1. webpack 的 require.ensure() 这种模式可以通过参数中的 webpackChunkName 将 js 分开打包。

export default new Router({

  routes: [

    {

      path: '/home',

      component: (resolve) => require.ensure([], () => resolve(require('@/components/home')), 'home'),

    },

    {

      path: '/about',

      component: (resolve) => require.ensure([], () => resolve(require('@/components/about')), 'about'),

    },

  ],

})

54、如何优化SPA应用的首屏加载速度慢的问题？

1.将公用的JS库通过script标签外部引入，减小 app.bundel 的大小，让浏览器并行下载资源文件，提高下载速度；

2.在配置 路由时，页面和组件使用懒加载的方式引入，进一步缩小 app.bundel 的体积，在调用某个组件时再加载对应的js文件；

3.加一个首屏loading图，提升用户体验；

55、有封装过axios吗？如何封装？

开放题

56、有自己封装过组件吗？

开放题