最新最全的vue面试题+详细解答

Vue面试题整合

初级（简单）

1:Vue 解决了什么问题

① 虚拟 dom：dom 操作时非常耗性能的，不再使用原生的 dom 操作节点，极大的解放 dom 操作，但具体操作的还是 dom，不过是换了一种方式。

② 视图、数据、结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作。

③ 组件化：把一个单页应用中的各种模块拆分到一个一个单独的组件中，便于开发，以及后期的维护

2:Vue 的生命周期(11 个钩子函数)

⑴beforeCreate(创建前)：在此生命周期函数执行的时候，data 和 methods 中的数据都还没有初始化。

⑵created(创建后)：在此生命周期函数中，data 和 methods 都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早只能在 created 中操作。

⑶beforeMount(载入前)：在此生命周期函数执行的时候，模板已经在内存中编译好了，但是尚未挂载到页面中去，此时页面还是旧的。

⑷mounted(载入后)：此时页面和内存中都是最新的数据，这个钩子函数是最早可以操作 dom 节点的方法。

⑸beforeUpdate(更新前)：此时页面中显示的数据还是旧的，但是 data 中的数据是最新的，且页面并未和最新的数据同步。

⑹Updated(更新后)：此时页面显示数据和最新的 data 数据同步。

⑺beforeDestroy(销毁前)：当执行该生命周期函数的时候，实例身上所有的 data，所有的 methods 以及过滤器…等都处于可用状态，并没有真正执行销毁。

⑻destroyed(销毁后)：此时组件以及被完全销毁，实例中的所有的数据、方法、属性、过滤器…等都已经不可用了。
//下面两个钩子函数一般配合使用

⑼activated(组件激活时)：和上面的 beforeDestroy 和 destroyed 用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy 和 destroyed 的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候

⑽deactivated(组件未激活时)：实例没有被激活时。

⑾errorCaptured(错误调用)：当捕获一个来自后代组件的错误时被调用

注意：

父子组件生命周期顺序

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

3:watch、computed 和 methods 的区别

• methods 方法：在重新渲染的时候每次都会被重新的调用；
• computed是依赖已有的变量来计算一个目标变量，大多数情况都是多个变量凑在一起计算出一个变量，并且computed具有缓存机制，依赖值不变的情况下其会直接读取缓存进行复用，computed不能进行异步操作
• watch是监听某一个变量的变化，并执行相应的回调函数，通常是一个变量的变化决定多个变量的变化，watch可以进行异步操作
• .简单记就是：一般情况下computed是多对一，watch是一对多

4:Vue.js 的特点

• 简洁：页面由 HTML 模板+Json 数据+Vue 实例组成
• 数据驱动：自动计算属性和追踪依赖的模板表达式
• 组件化：用可复用、解耦的组件来构造页面
• 轻量：代码量小，不依赖其他库
• 快速：精确有效批量 DOM 更新
• 模板友好：可通过 npm，bower 等多种方式安装，很容易融入

5:插槽的理解

插槽用于决定将所携带的内容，插入到子组件指定的某个位置，但内容必须在父组件中子组件的标签内定义，在子组件中用标签接收。slot 是组件内部的占位符。

6:vue-router 有哪几种导航钩子

① 全局导航钩子：一般用来判断权限，以及页面丢失时需要执行的操作；
beforeEach（）每次路由进入之前执行的函数。
afterEach（）每次路由进入之后执行的函数。
beforeResolve（）2.5 新增
② 单个路由（实例钩子）：某个指定路由跳转时需要执行的逻辑。
beforeEnter（）
beforeLeave（）
③ 组件路由钩子：
beforeRouteEnter（）
beforeRouteLeave（）
beforeRouteUpdate（）

7:vue 组件中的 data 为什么是一个函数

data 是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不会相互影响。Object 是引用数据类型，如果不用 function 返回，每个组件的 data 都是内存的同一个地址，一个数据改变了其他也改变了。

8:路由懒加载

使用原因：在单页应用中，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，延时过长，不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
原理：vue 异步组件技术：异步加载，vue-router 配置路由 , 使用 vue 的异步组件技术 , 实现按需加载。

9:Vue.js 介绍

Vue.js 是一个轻巧、高性能、可组件化的 MVVM 库，同时拥有非常容易上手的 API；Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。数据驱动+组件化的前端开发。通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。核心是一个响应的数据绑定系统。

10:请说出 vue.cli 项目中 src 目录每个文件夹和文件的用法

assets 文件夹是放静态资源；
components 是放组件；
router 是定义路由相关的配置;
view 视图；
app.vue 是一个应用主组件；
main.js 是入口文件

11: Vue 中 key 值的作用

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序， 而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素。key 的作用主要是为了高效的更新虚拟 DOM。

12:vue 的指令

⑴v-bind：给元素绑定属性

⑵v-on：给元素绑定事件

⑶v-html：给元素绑定数据，且该指令可以解析 html 标签

⑷v-text：给元素绑定数据，不解析标签

⑸v-model：数据双向绑定

⑹v-for：遍历数组

⑺v-if：条件渲染指令，动态在 DOM 内添加或删除 DOM 元素

⑻v-else：条件渲染指令，必须跟 v-if 成对使用

⑼v-else-if：判断多层条件，必须跟 v-if 成对使用

⑽v-cloak：解决插值闪烁问题

⑾v-once：只渲染元素或组件一次

⑿v-pre：跳过这个元素以及子元素的编译过程，以此来加快整个项目的编译速度

⒀v-show：条件渲染指令，将不符合条件的数据隐藏(display:none)

13:v-for 与 v-if 的优先级

v-for 比 v-if 优先，如果每一次都需要遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。
v-if和v-for不建议用在同一标签？
在Vue2中，v-for优先级是高于v-if的，咱们来看例子

<div v-for="item in [1, 2, 3, 4, 5, 6, 7]" v-if="item !== 3">
    {{item}}
</div>
1
2
3

上面的写法是v-for和v-if同时存在，会先把7个元素都遍历出来，然后再一个个判断是否为3，并把3给隐藏掉，这样的坏处就是，渲染了无用的3节点，增加无用的dom操作，建议使用computed来解决这个问题：

<div v-for="item in list">
    {{item}}
</div>

computed() {
    list() {
        return [1, 2, 3, 4, 5, 6, 7].filter(item => item !== 3)
    }
 }
1
2
3
4
5
6
7
8
9

14:Vue 怎么兼容 IE

使用 babel-polyfill 插件

15:MVVM 的理解

MVVM 就是 Model-View-ViewModel 的缩写，MVVM 将视图和业务逻辑分开。

View：视图层，Model 数据模型，而 ViewModel 是把两者建立通信的桥梁。

在 MVVM 框架下，View 和 Model 之间没有直接的联系，而是通过 ViewModel 进行交互。View 和 ViewModel 之间以及 Model 和 ViewModel 之间的交互都是双向的，因此 view 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反映到 View 上。可以说它们两者是实时更新的，互相影响。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，因此开发者只需要关注业务逻辑，不需要手动操作 DOM，也不需要关注数据状态的同步问题，这些都由 MVVM 统一管理。

16:为什么 data 是一个函数

组件中的 data 写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的 data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份 data，就会造成一个变了全都会变的结果

17:Vue 组件通讯有哪几种方式

• 父组件传值给子组件，子组件使用props进行接收

• 子组件传值给父组件，子组件使用$emit+事件对父组件进行传值

• 组件中可以使用$parent和$children获取到父组件实例和子组件实例，进而获取数据

• 使用$attrs和$listeners，在对一些组件进行二次封装时可以方便传值，例如A->B->C

• 使用$refs获取组件实例，进而获取数据

• 使用Vuex进行状态管理

• 使用eventBus进行跨组件触发事件，进而传递数据

• 使用provide和inject，官方建议我们不要用这个，我在看ElementUI源码时发现大量使用

• 浏览器本地缓存，例如localStorage

18:v-if 和 v-show 的区别

v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。

v-show 会被编译成指令，条件不满足时控制样式将对应节点隐藏 （display:none）

19:Vue 怎么重置 data

使用 Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data 可以获取到组件初始化状态下的 data。

Object.assign(this.$data, this.$options.data())
1

20:组件中写 name 选项有什么作用

① 项目使用 keep-alive 时，可搭配组件的 name 进行缓存过滤。
②DOM 做递归组件时需要调用自身 name
③vue-devtools 调试工具里显示的组件名称是由 vue 中组件 name 决定的

21:route 和 router

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

router 是“路由实例对象”，包括了路由的跳转方法(push、go)，钩子函数等。

22: Vue 修饰符有哪些

事件修饰符

• .stop 阻止事件继续传播
• .prevent 阻止标签默认行为
• .capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理
• .self 只当在 event.target 是当前元素自身时触发处理函数
• .once 事件将只会触发一次
• .passive 告诉浏览器你不想阻止事件的默认行为

中级（一般）

1:nextTick 的理解

使用 nextTick 的原因：Vue 是异步修改 DOM 的，并且不鼓励开发者直接接触 DOM，但是有时候需要必须对数据更改后的 DOM 元素做相应的处理，但是获取到的 DOM 数据并不是更改后的数据，这时候就需要 this.$nextTick()；

原理：Vue 通过异步队列控制 DOM 更新和 nextTick 回调函数先后执行的方式。

使用：

//HTML
<button @click="change()">按钮</button><h1 ref="gss">{{msg}}</h1>
//JS
export default{
	name:"app",
	data(){
	return {
	msg:"123"
	}
},
methods:{
	change(){
		this.msg = "456";
		console.log(this.refs["gss"].innerHTML)//123
		this.\$nextTick(function(){
		console.log(this.refs["gss"].innerHTML)//456
	})
	}
}

}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

2:虚拟 DOM 原理

虚拟 DOM，其实就是用对象的方式取代真实的 DOM 操作，把真实的 DOM 操作放在内存当中，在内存中的对象里做模拟操作。当页面打开时浏览器会解析 HTML 元素，构建一颗 DOM 树，将状态全部保存起来，在内存当中模拟我们真实的 DOM 操作，操作完后又会生成一颗 dom 树，两颗 DOM 树进行比较，根据 diff 算法比较两颗 DOM 树不同的地方，只渲染一次不同的地方。

3:不需要响应式的数据应该怎么处理？

在我们的Vue开发中，会有一些数据，从始至终都未曾改变过，这种死数据，既然不改变，那也就不需要对他做响应式处理了，不然只会做一些无用功消耗性能，比如一些写死的下拉框，写死的表格数据，这些数据量大的死数据，如果都进行响应式处理，那会消耗大量性能。

// 方法一：将数据定义在data之外
data () {
    this.list1 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list2 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list3 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list4 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    this.list5 = { xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx }
    return {}
 }
    
// 方法二：Object.freeze()
data () {
    return {
        list1: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list2: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list3: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list4: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
        list5: Object.freeze({xxxxxxxxxxxxxxxxxxxxxxxx}),
    }
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

4:Proxy 相比于 defineProperty 的优势

Vue3.0 摒弃了 Object.defineProperty，改为基于 Proxy 的观察者机制探索。

首先说一下 Object.defineProperty 的缺点：

• ①Object.defineProperty 无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实施响应。
• ②Object.defineProperty 只能劫持对象的属性，因此我们需要对每个对象的每个属性进行遍历。Vue2.X 里，是通过递归 + 遍历 data 对象来实现对数据的监控的，如果属性值也是对象那么需要深度遍历，显然如果能劫持一个完整的对象才是更好的选择。
  而要取代它的 Proxy 有以下两个优点
• 可以劫持整个对象，并返回一个新对象。
• 有多种劫持操作(13 种)
  补充：
• Proxy 是 ES6 新增的一个属性，翻译过来的意思就是代理，用在这里表示由它来“代理”某些操作。Proxy 让我们能够以简洁易懂的方式控制外部对象的访问，其功能非常类似于设计模式中的代理模式。
• Proxy 可以理解为，在目标对象之前设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。
• 使用 Proxy 的核心优点是可以交由它来处理一些非核心逻辑(如：读取或设置对象的某些属性前记录日志；设置对象的某些属性值前，需要验证；某些属性的访问控制等)。从而可以让对象只需要关注核心逻辑，达到关注点分离，降低对象复杂度等目的。

5:virtual-dom 原理实现(虚拟 dom)

virtual-dom(简称 vdom)的概念大规模的推广还是得益于 react 的出现，virtual-dom 也是 react 这个框架的非常重要的特性之一。相比于频繁的手动去操作 dom 而带来性能问题，vdom 很好的将 dom 做了一层映射关系，进而将在我们本需要直接进行 dom 的一系列操作，映射到了操作 vdom，而 vdom 上定义了关于真实 dom 进行的创建节点，删除节点，添加节点等一系列复杂的 dom 操作，并将这些操作放到 vdom 中进行，这样就通过操作 vdom 来提高直接操作的 dom 的效率和性能。

   在vue的整个应用生命周期当中，每次需要更新视图的时候便会使用vdom，vdom算法是基于**snabbdom**算法所做的修改。
1

实现：

 ①用js对象构造一个虚拟的dom树，插入到文档中；
 ②状态变更时，记录新树和旧树的差异；
 ③把上面的差异构建到真正的dom中。
1
2
3

6:vue-router

❄ 单页面路由跳转的方式：

   ①hash(哈希默认)模式：使用 URL hash 值来作路由。默认模式。
   ②history(mode:history)模式： 依赖 HTML5 History API 和服务器配置。查看 HTML5 History 模式。
   ③abstract模式(严格模式)：支持所有 JavaScript 运行环境，如 Node.js 服务器端。
    根据mode参数来决定采用哪一种方式。

    vue-router的实现原理(核心)：更新视图但不重新请求页面。
1
2
3
4
5
6

！！！重要
hash模式：通过#号后面的内容的更改，触发hashchange事件，实现路由切换
history模式：通过pushState和replaceState切换url，实现路由切换，需要后端配合

❄ vue-router 登陆权限的判断

     vue-router的登陆权限判断主要是在全局钩子函数中进行的，我们在router.js文件中的定义路由里，将需要登陆权限的页面加上meta属性，值是对象的形式，然后在该对象中自定义一个属性，属性值就是一个Boolean值，这时候在main.js文件的全局钩子函数中进行判断，如果需要跳转的页面的自定义属性值为true，那么将进行判断其是否登录，如果没有登录，则告诉用户登录，如果有登录，那么进行页面跳转。
1

routes:[
	{
		path:"/home",
		name:"Home",
		components:Home
		meta:{requireAuth:true}
	}
]
1
2
3
4
5
6
7
8

7:Vue3.0 的了解

大致有三个点，第一个是关于提出的新 API setup()函数，第二个说了对于 Typescript 的支持，最后说了关于替换 Object.defineProperty 为 Proxy 的支持。详细说了下关于 Proxy 代替带来的性能上的提升，因为传统的原型链拦截的方法，无法检测对象及数组的一些更新操作，但使用 Proxy 又带来了浏览器兼容问题。

8:vue-cli 替我们做了哪些工作

vue-cli 是基于 Vue.js 进行快速开发的完整系统，也可以理解成是很多 npm 包的集合。

vue-cli 完成的功能：

.vue 文件 --> .js 文件
ES6 语法 --> ES5 语法
Sass,Less,Stylus --> CSS
对 jpg,png,font 等静态资源的处理
热更新
定义环境变量，区分 dev 和 production 模式
如果开发者需要补充或修改默认设置，需要在 package.json 同级下新建一个 vue.config.js 文件

9:axios 的拦截

//响应拦截
axios.interceptors.response.use(function(response){
	//对响应数据做点什么
	return response.data
},function(error){
	//对错误响应做点什么
	return Promise.reject(error)
})
1
2
3
4
5
6
7
8

//请求拦截
axios.interceptors.request.use(function(config){
	//在发送请求之前做些什么
	return config
},function(error){
	//对请求错误做些什么
	return Promise.reject(error)
})
1
2
3
4
5
6
7
8

10: Vue2.0 响应式数据的原理

整体思路是数据劫持+观察者模式

对象内部通过 defineReactive 方法，使用 Object.defineProperty 将属性进行劫持（只会劫持已经存在的属性），数组则是通过重写数组方法来实现。当页面使用对应属性时，每个属性都拥有自己的 dep 属性，存放他所依赖的 watcher（依赖收集），当属性变化后会通知自己对应的 watcher 去更新(派发更新)。

11:Vue 如何检测数组变化

数组考虑性能原因没有用 defineProperty 对数组的每一项进行拦截，而是选择对 7 种数组（push,shift,pop,splice,unshift,sort,reverse）方法进行重写(AOP 切片思想)

所以在 Vue 中修改数组的索引和长度是无法监控到的。需要通过以上 7 种变异方法修改数组才会触发数组对应的 watcher 进行更新

12:双向绑定的原理？数据劫持原理

mvvm 双向绑定，采用****数据劫持结合发布者-订阅者模式****的方式，通过 Object.defineProperty() 来劫持各个属性的 setter、getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

*几个要点：*
1、实现一个数据监听器 Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器 Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
3、实现一个 Watcher，作为连接 Observer 和 Compile 的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm 入口函数，整合以上三者

*具体步骤：*

\1. 需要 observe 的数据对象进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter
这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化

\2. compile 解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

\3. Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁，主要做的事情是:

· 在自身实例化时往属性订阅器(dep)里面添加自己

· 自身必须有一个 update() 方法

· 待属性变动 dep.notice() 通知时，能调用自身的 update() 方法，并触发 Compile 中绑定的回调，则功成身退。

MVVM 作为数据绑定的入口，整合 Observer、Compile 和 Watcher 三者，通过Observer来监听自己的 model 数据变化，通过 Compile 来解析编译模板指令，最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据 model 变更的双向绑定效果。

13:v-for 为什么要加 key

如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。key 是为 Vue 中 vnode 的唯一标记，通过这个 key，我们的 diff 操作可以更准确、更快速

14:vue-router 路由钩子函数是什么 执行顺序是什么

路由钩子的执行流程, 钩子函数种类有:全局守卫、路由守卫、组件守卫

完整的导航解析流程:

1. 导航被触发。
2. 在失活的组件里调用 beforeRouteLeave 守卫。
3. 调用全局的 beforeEach 守卫。
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5. 在路由配置里调用 beforeEnter。
6. 解析异步路由组件。
7. 在被激活的组件里调用 beforeRouteEnter。
8. 调用全局的 beforeResolve 守卫 (2.5+)。
9. 导航被确认。
10. 调用全局的 afterEach 钩子。
11. 触发 DOM 更新。
12. 调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

15:谈一下对 vuex 的个人理解

定义：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式储存管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

使用场景：需要构建一个中大型单页应用，您很可能会考虑如何更好的在组件外部管理状态，Vuex将会成为自然而然的选择。

优点：当你在state中定义了一个数据之后，可以在所在项目中的任何一个组件里进行获取、进行修改、并且你的修改可以得到全局的响应变更。

主要包括以下几个模块：

• State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。
• Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。
• Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
• Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

Vuex的运行机制：Vuex提供数据（state）来驱动试图（vue components），通过dispath派发actions，在其中可以做一些异步的操作，然后通过commit来提交mutations，最后mutations来更改state。

16:Vuex 页面刷新数据丢失怎么解决

需要做 vuex 数据持久化 一般使用本地存储的方案来保存数据 可以自己设计存储方案 也可以使用第三方插件

推荐使用 vuex-persist 插件，它就是为 Vuex 持久化存储而生的一个插件。不需要你手动存取 storage ，而是直接将状态保存至 cookie 或者 localStorage 中
(注实际开发中使用sessionStorage来保存，原因是localStorage在同一浏览器中多个账户登录保存到localStroage会出问题)

17:Vuex 为什么要分模块并且加命名空间

模块:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。

18:vue 中使用了哪些设计模式

1.工厂模式 - 传入参数即可创建实例

虚拟 DOM 根据参数的不同返回基础标签的 Vnode 和组件 Vnode

2.单例模式 - 整个程序有且仅有一个实例

vuex 和 vue-router 的插件注册方法 install 判断如果系统存在实例就直接返回掉

3.发布-订阅模式 (vue 事件机制)

4.观察者模式 (响应式数据原理)

5.装饰模式: (@装饰器的用法)

6.策略模式 策略模式指对象有某个行为,但是在不同的场景中,该行为有不同的实现方案-比如选项的合并策略

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

这里只列举针对 Vue 的性能优化 整个项目的性能优化是一个大工程 可以另写一篇性能优化的文章 哈哈

• 对象层级不要过深，否则性能就会差
• 不需要响应式的数据不要放到 data 中（可以用 Object.freeze() 冻结数据）
• v-if 和 v-show 区分使用场景
• computed 和 watch 区分使用场景
• v-for 遍历必须加 key，key 最好是 id 值，且避免同时使用 v-if
• 大数据列表和表格性能优化-虚拟列表/虚拟表格
• 防止内部泄漏，组件销毁后把全局变量和事件销毁
• 图片懒加载
• 路由懒加载
• 第三方插件的按需引入
• 适当采用 keep-alive 缓存组件
• 防抖、节流运用
• 服务端渲染 SSR or 预渲染

20:描述下 vue 从初始化页面–>修改数据–>刷新页面 UI 过程？

当 Vue 进入初始化阶段时，一方面 Vue 会遍历 data 中的属性，并用 Object.defineProperty 将它转化成 getter/setterd 的形式，实现数据劫持；另一方面，Vue 的指令编译器 Compiler 对元素节点的各个指令进行解析，初始化视图，并订阅 Watcher 来更新视图，此时 Watcher 会将自己添加到消息订阅器 Dep 中，此时初始化完毕。
当数据发生变化时，触发 Observer 中 setter 方法，立即调用 Dep.notify( )，Dep 这个数组开始遍历所有的订阅者，并调用其 update 方法，Vue 内部再通过 diff 算法，patch 相应的更新完成对订阅者视图的改变。

21:scoped 原理及穿透方法

vue 中的 scoped 通过在 DOM 结构以及 css 样式上加唯一不重复的标记：data-v-hash 的方式，以保证唯一(通过 PostCSS 转译)，达到样式私有模块化的目的。
scoped 的 3 条渲染规则：
① 给 HTML 的 DOM 节点加一个不重复的 data 属性，来表示它的唯一性；
② 在每句 css 选择器末尾（编译后的生成的 css 语句）加一个当前组件的 data 属性选择器来私有化样式；
③ 如果组件内部包含有其他组件，只会给其他组件的最外层标签加上 ddan 当前组件的 data 属性。
补充：

  在做项目中，会遇到这么一个问题，即：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。那么有哪些解决办法呢？
①不使用scopeds省略（不推荐）；
② 在模板中使用两次style标签。
③scoped穿透：/deep/ >>>
1
2
3
4

PostCSS：使用 JS 插件转换 CSS 的工具。这些插件可以支持变量和 mixins，转换将来的 css 语法，内联图像等。Autoprefixer 是一种非常流行的 PostCSS 插件。

22:Vue 和 React 的区别

监听数据变化的实现原理不同：Vue 通过 getter/setter 以及一些函数的劫持，能精确快速的计算出 vdom 的差异。这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。React 默认是通过比较引用的方式进行的，如果不优化，每当应用的状态被改变时，全部子组件都会重新渲染，可能导致大量不必要的 VDOM 的重新渲染。
数据流的不同：Vue 中默认支持双向绑定，组件与 DOM 之间可以通过 v-model 双向绑定。但是，父子组件之间，props 在 2.x 版本是单向数据流。React 一直提倡的是单向数据流。
模板渲染方式的不同：React 是通过 JSX 渲染模板，而 Vue 是通过一种拓展的 HTML 语法进行渲染

23:首屏加载优化

① 把不常改变的库放到 index.html 中，通过 cdn 引入

然后找到 build/webpack.base.conf.js 文件，在 module.exports = { } 中添加以下代码：

externals: {
'vue': 'Vue',
'vue-router': 'VueRouter',
'element-ui': 'ELEMENT',
},
1
2
3
4
5

②vue 路由懒加载

③ 不生成 map 文件，找到 config/index.js 文件，修改为 productionSourcceMap：false

④vue 组件尽量不要全局引入

⑤ 使用更轻量级的工具库

⑥ 开启 gzip 压缩：这个优化是两方面的，前端将文件打包成.gz 文件，然后通过 nginx 的配置，让浏览器直接解析.gz 文件。

⑦ 首页单独做服务端渲染：如果首页真的有瓶颈，可以考虑用 node 单独做服务端渲染，而下面的子页面仍用 spa 单页的方式交互。这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。

24:$set 是干嘛用的

<template>
<h1>{{arr}}</h1>
<button @click="change()">点击</button>
</template>

<script>
export default {
    data(){
        return {
            arr:[1,2,3]
        }
    },
    methods:{
        change(){
            this.arr[1]=0;
            console.log(this.arr);  //[1,0,3]
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

上面就是一个典型的例子，当我们点击按钮想要根据数组 arr 的下标改变其元素的时候，你会发现 data 中的数据改变了，但是页面中的数据并没有改变。这时候就需要$set 出场了。

change(){
this.$set(this.list,1,0);
}
1
2
3

改变/添加 对象属性的时候:this.$set(data 实例,"属性名(添加的属性名)","属性值(添加的属性值)")
改变/添加 数组属性的时候:this.\$set(data 实例,数组下标,"改变后的元素(添加的元素)")复制代码
1
2

原因：

   vue在创建实例的时候把data深度遍历所有属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter。让 Vue 追踪依赖，在属性被访问和修改时通知变化。所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。
1

当你在对象上新加了一个属性 newProperty,当前新加的这个属性并没有加入 vue 检测数据更新的机制(因为是在初始化之后添加的),vue.$set 是能让 vue 知道你添加了属性, 它会给你做处理。

25: vue 中"dependencies"，"devDependencies"是什么？

使用 npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去；

而使用 npm i 【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。

那么 package.json 文件里面的 devDependencies  和 dependencies 对象有什么区别呢？

devDependencies  里面的插件(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；而 dependencies  是需要发布到生产环境的，是要打包的。
1
2
3
4
5
6
7

26: Vue的SSR是什么？有什么好处？

• SSR就是服务端渲染. 比如基于Vue.js的SSR框架——Nuxt.js
• 基于nodejs serve服务环境开发，所有html代码在服务端渲染
• 数据返回给前端，然后前端进行“激活”，即可成为浏览器识别的html代码
• SSR首次加载更快，有更好的用户体验，有更好的seo优化，因为爬虫能看到整个页面的内容，如果是vue项目，由于数据还要经过解析，这就造成爬虫并不会等待你的数据加载完成，所以其实Vue项目的seo体验并不是很好

高级（困难）

1:Vue.mixin 的使用场景和原理

在日常的开发中，我们经常会遇到在不同的组件中经常会需要用到一些相同或者相似的代码，这些代码的功能相对独立，可以通过 Vue 的 mixin 功能抽离公共的业务逻辑，原理类似“对象的继承”，当组件初始化时会调用 mergeOptions 方法进行合并，采用策略模式针对不同的属性进行合并。当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

2:nextTick 使用场景和原理

nextTick 中的回调是在下次 DOM 更新循环结束之后执行的延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。主要思路就是采用微任务优先的方式调用异步方法去执行 nextTick 包装的方法

3: keep-alive 使用场景和原理

keep-alive 是 Vue 内置的一个组件，可以实现组件缓存，当组件切换时不会对当前组件进行卸载。

• 常用的两个属性 include/exclude，允许组件有条件的进行缓存。
• 两个生命周期 activated/deactivated，用来得知当前组件是否处于活跃状态。
• keep-alive 的中还运用了 LRU(最近最少使用) 算法，选择最近最久未使用的组件予以淘汰。

4: Vue.extend 作用和原理

官方解释：Vue.extend 使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象。

其实就是一个子类构造器 是 Vue 组件的核心 api 实现思路就是使用原型继承的方法返回了 Vue 的子类 并且利用 mergeOptions 把传入组件的 options 和父类的 options 进行了合并

5:写过自定义指令吗 原理是什么

指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。

自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind

1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

3. update：被绑定于元素所在的模板更新时调用，而无论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。

4. componentUpdated：被绑定元素所在模板完成一次更新周期时调用。

5. unbind：只调用一次，指令与元素解绑时调用。
复制代码
1
2
3
4
5
6
7
8
9
10

原理

1.在生成 ast 语法树时，遇到指令会给当前元素添加 directives 属性

2.通过 genDirectives 生成指令代码

3.在 patch 前将指令的钩子提取到 cbs 中,在 patch 过程中调用对应的钩子

4.当执行指令对应钩子函数时，调用对应指令定义的方法

6:Vue 模板编译原理

Vue 的编译过程就是将 template 转化为 render 函数的过程 分为以下三步

第一步是将 模板字符串 转换成 element ASTs（解析器）
第二步是对 AST 进行静态节点标记，主要用来做虚拟DOM的渲染优化（优化器）
第三步是 使用 element ASTs 生成 render 函数代码字符串（代码生成器）
1
2
3

7:生命周期钩子是如何实现的

Vue 的生命周期钩子核心实现是利用发布订阅模式先把用户传入的的生命周期钩子订阅好（内部采用数组的方式存储）然后在创建组件实例的过程中会一次执行对应的钩子方法（发布）

8:函数式组件使用场景和原理

函数式组件与普通组件的区别

1.函数式组件需要在声明组件是指定 functional:true
2.不需要实例化，所以没有this,this通过render函数的第二个参数context来代替
3.没有生命周期钩子函数，不能使用计算属性，watch
4.不能通过$emit 对外暴露事件，调用事件只能通过context.listeners.click的方式调用外部传入的事件
5.因为函数式组件是没有实例化的，所以在外部通过ref去引用组件时，实际引用的是HTMLElement
6.函数式组件的props可以不用显示声明，所以没有在props里面声明的属性都会被自动隐式解析为prop,而普通组件所有未声明的属性都解析到$attrs里面，并自动挂载到组件根元素上面(可以通过inheritAttrs属性禁止)

1
2
3
4
5
6
7

优点 1.由于函数式组件不需要实例化，无状态，没有生命周期，所以渲染性能要好于普通组件 2.函数式组件结构比较简单，代码结构更清晰

使用场景：

一个简单的展示组件，作为容器组件使用 比如 router-view 就是一个函数式组件

“高阶组件”——用于接收一个组件作为参数，返回一个被包装过的组件

9:能说下 vue-router 中常用的路由模式实现原理吗

hash 模式

1. location.hash 的值实际就是 URL 中#后面的东西 它的特点在于：hash 虽然出现 URL 中，但不会被包含在 HTTP 请求中，对后端完全没有影响，因此改变 hash 不会重新加载页面。
2. 可以为 hash 的改变添加监听事件

window.addEventListener("hashchange", funcRef, false);

1
2

每一次改变 hash（window.location.hash），都会在浏览器的访问历史中增加一个记录利用 hash 的以上特点，就可以来实现前端路由“更新视图但不重新请求页面”的功能了

特点：兼容性好但是不美观

history 模式

利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。

这两个方法应用于浏览器的历史记录站，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的功能。这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前 URL 改变了，但浏览器不会刷新页面，这就为单页应用前端路由“更新视图但不重新请求页面”提供了基础。

10:diff 算法了解吗

10:为什么只对对象劫持，而要对数组进行方法重写？

因为对象最多也就几十个属性，拦截起来数量不多，但是数组可能会有几百几千项，拦截起来非常耗性能，所以直接重写数组原型上的方法，是比较节省性能的方案

冷门的知识点

1:如果子组件改变props里的数据会发生什么

• 改变的props数据是基本类型

如果修改的是基本类型，则会报错

props: {
    num: Number,
  }
created() {
    this.num = 999
  }
1
2
3
4
5
6

• 改变的props数据是引用类型

props: {
    item: {
      default: () => ({}),
    }
  }
created() {
    // 不报错，并且父级数据会跟着变
    this.item.name = 'sanxin';
    
    // 会报错，跟基础类型报错一样
    this.item = 'sss'
  },
1
2
3
4
5
6
7
8
9
10
11
12

2:props怎么自定义验证

props: {
    num: {
      default: 1,
      validator: function (value) {
          // 返回值为false则验证不通过，报错
          return [
            1, 2, 3, 4, 5
          ].indexOf(value) !== -1
    }
    }
  }
1
2
3
4
5
6
7
8
9
10
11

2:watch的immediate属性有什么用？

比如平时created时要请求一次数据，并且当搜索值改变，也要请求数据，我们会这么写：

created(){
  this.getList()
},
watch: {
  searchInputValue(){
    this.getList()
  }
}
1
2
3
4
5
6
7
8

使用immediate完全可以这么写，当它为true时，会初始执行一次

watch: {
  searchInputValue:{
    handler: 'getList',
    immediate: true
  }
}
1
2
3
4
5
6

3:watch监听一个对象时，如何排除某些属性的监听?

下面代码是，params发生改变就重新请求数据，无论是a，b，c，d属性改变

data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

但是如果我只想要a，b改变时重新请求，c，d改变时不重新请求呢？

mounted() {
    Object.keys(this.params)
      .filter((_) => !["c", "d"].includes(_)) // 排除对c，d属性的监听
      .forEach((_) => {
        this.$watch((vm) => vm.params[_], handler, {
          deep: true,
        });
      });
  },
data() {
    return {
      params: {
        a: 1,
        b: 2,
        c: 3,
        d: 4
      },
    };
  },
watch: {
    params: {
      deep: true,
      handler() {
        this.getList;
      },
    },
  }
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

4. 审查元素时发现data-v-xxxxx，这是啥？

这是在标记vue文件中css时使用scoped标记产生的，因为要保证各文件中的css不相互影响，给每个component都做了唯一的标记，所以每引入一个component就会出现一个新的’data-v-xxx’标记

5. computed如何实现传参？

// html
<div>{{ total(3) }}

// js
computed: {
    total() {
      return function(n) {
          return n * this.num
         }
    },
  }
1
2
3
4
5
6
7
8
9
10
11

6 vue的hook的使用？

• 同一组件中使用

这是我们常用的使用定时器的方式

export default{
  data(){
    timer:null  
  },
  mounted(){
      this.timer = setInterval(()=>{
      //具体执行内容
      console.log('1');
    },1000);
  }
  beforeDestory(){
    clearInterval(this.timer);
    this.timer = null;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

上面做法不好的地方在于：得全局多定义一个timer变量，可以使用hook这么做：

export default{
  methods:{
    fn(){
      let timer = setInterval(()=>{
        //具体执行代码
        console.log('1');
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

• 2 父子组件使用

如果子组件需要在mounted时触发父组件的某一个函数，平时都会这么写：

//父组件
<rl-child @childMounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},

// 子组件
mounted () {
  this.$emit('childMounted')
},
1
2
3
4
5
6
7
8
9
10
11
12
13

使用hook的话可以更方便：

//父组件
<rl-child @hook:mounted="childMountedHandle"
/>
method () {
  childMountedHandle() {
  // do something...
  }
},
1
2
3
4
5
6
7
8