风尚云网-vue相关综合面试题(不看后悔)持续更新...

一 ：那好，请说一下，vue的优缺点？

vue 的优点：

轻量级框架、简单易学、双向数据绑定、组件化、数据和结构的分离、虚拟DOM、运行速度快。

vue的缺点：

首次加载稍慢
所有JS和CSS会在首次加载完成（需要通过webpack合并压缩，减小资源大小和请求次数）

不利于 SEO
页面是异步加载，不利于搜索引擎抓取

双向绑定的反应复杂性

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

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点：

1.用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

2.基于上面一点，SPA 相对对服务器压力小；

3.前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点：

1.初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

2.前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

3.SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

三：说一下vue中computed 和 watch 区别和运用的场景？

区别：

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

watch： 更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

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

computed 使用场景：当一个值受多个属性影响的时候------------购物车商品结算

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

watch使用场景：当一条数据的更改影响到多条数据的时候---------搜索框

小结：当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

四：谈谈你对 Vue 生命周期的理解？

（1）生命周期是什么？

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

（2）各个生命周期的作用
生命周期描述beforeCreate组件实例被创建之初，组件的属性生效之前created组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用beforeMount在挂载开始之前被调用：相关的 render 函数首次被调用mountedel 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子beforeUpdate组件数据更新之前调用，发生在虚拟 DOM 打补丁之前update组件数据更新之后activitedkeep-alive 专属，组件被激活时调用deactivatedkeep-alive 专属，组件被销毁时调用beforeDestory组件销毁前调用destoryed组件销毁后调用

五：vue中在哪个生命周期内调用异步请求？

可以在钩子函数 created、beforeMount、mounted 中进行调用

因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。

但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：

• 能更快获取到服务端数据，减少页面 loading 时间；
• ssr,不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；
• 注释：SSR (Server Side Render )是服务端渲染：在后台将vue实例渲染为HTML字符串直接返回，在前端激活为交互程序。

六：vue中在什么阶段才能访问操作DOM？

在钩子函数 mounted 被调用前，Vue 已经将编译好的模板挂载到页面上，

所以在 mounted 中可以访问操作 DOM。

七：谈谈你对vue中的 keep-alive 的了解？

keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 。

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

**提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高；

**对应两个钩子函数 activated 和 deactivated

当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

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

vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。
如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

// data
data() {
  return {
    message: "子组件",
    childName:this.name
  }
}
 
// new Vue
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: {App}
})

因为组件是用来复用的，且 JS 里对象是引用关系，

如果组件中 data 是一个对象，那么这样作用域没有隔离，子组件中的 data 属性值会相互影响，

如果组件中 data 选项是一个函数，那么每个实例可以维护一份被返回对象的独立的拷贝，组件实例之间的 data 属性值不会互相影响；

而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。

九：vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。

十：Vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后

十一：第一次页面加载会触发那几个钩子？

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

十二：DOM渲染在哪个周期中就已经完成？

DOM渲染在mounted中就已经完成了

十三：生命周期钩子的一些使用方法？

1.beforecreate:可以在加个loading事件，在加载实例是触发
2.created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用
3.mounted:挂载元素，获取到dom节点
4.updated:如果对数据统一处理，在这里写上相应函数
5.beforeDestroy:可以一个确认停止事件的确认框
6.nextTick:更新数据后立即操作dom

十四：v-show与v-if的区别？

相同点：v-if与v-show都可以动态控制dom元素显示隐藏

不同点：

（1）手段不同：v-if是动态的向DOM树内添加或者删除DOM元素；

               v-show是通过设置DOM元素的display样式属性控制显隐；

（2）编译过程不同：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换；

（3）编译条件不同：v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载); v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

（4）性能消耗不同：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

（5）使用场景不同：v-if适合项目中条件不大可能改变；v-show适合频繁切换。

十五：说几种绑定class的数组用法？

1.对象方法v-bind:class="{'orange':isRipe, 'green':isNotRipe}”
2.数组方法v-bind:class="[class1,class2]"
3.行内v-bind:style="{color:color,fontSize:fontSize+'px'}”

十六：vue中路由跳转方式？

1.router-link标签跳转

2.js跳转比如router.push('/home')

十七：vue组件的scoped属性的作用？

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的

十八：vue.js的两个核心是什么？

(数据驱动、组件系统)

数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。

组件系统：能够把页面抽象成多个相对独立的模块

实现代码重用，提高开发效率和代码质量，使得代码易于维护

十九：vue事件中如何使用event对象？

<button @click="Event($event)">事件对象</button>

二十：vue中子组件调用父组件的方法？

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

第二种方法是在子组件里用$emit向父组件触发一个事件，父组件监听这个事件就行了。

第三种都可以实现子组件调用父组件的方法，

二十一：vue 首屏加载优化 ？

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

2. vue 路由的懒加载

3. 不生成 map 文件

4. vue 组件尽量不要全局引入

二十二：Vuex 有哪几种属性?

有五种，分别是

State

、

Getter

、

Mutation

、

Action

、

Module

二十三：为什么需要 nextTick？

   Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)这个 api 了。

二十四：route 和 router 的区别是什么？

route

是“路由信息对象”，包括

path

,

params

,

hash

,

query

,

fullPath

,

matched

,

name

等路由信息参数。

router

是“路由实例对象”，包括了路由的跳转方法(

push

、

replace

)，钩子函数等。

二十五：vuex是什么？怎么使用？哪种功能场景使用它？

是什么：vue框架中状态管理:有五种，分别是 State、 Getter、Mutation 、Action、 Module

使用：新建一个目录store，

场景：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车

vuex的State特性
A、Vuex就是一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于一般Vue对象里面的data
B、state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新
C、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

vuex的Getter特性
A、getters 可以对State进行计算操作，它就是Store的计算属性
B、 虽然在组件内也可以做计算属性，但是getters 可以在多组件之间复用
C、 如果一个状态只在一个组件内使用，是可以不用getters

vuex的Mutation特性
改变store中state状态的唯一方法就是提交mutation，就很类似事件。
每个mutation都有一个字符串类型的事件类型和一个回调函数，我们需要改变state的值就要在回调函数中改变。
我们要执行这个回调函数，那么我们需要执行一个相应的调用方法：store.commit。

Action 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态；
Action 可以包含任意异步操作，Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，
因此你可以调用 context.commit 提交一个 mutation，
或者通过 context.state 和 context.getters 来获取 state 和 getters。
Action 通过 store.dispatch 方法触发：eg。
store.dispatch('increment')

vuex的module特性
Module其实只是解决了当state中很复杂臃肿的时候，module可以将store分割成模块，
每个模块中拥有自己的state、mutation、action和getter

二十六：vue-router 有哪些钩子函数?

官方文档：vue-router钩子函数https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%85%A8%E5%B1%80%E5%89%8D%E7%BD%AE%E5%AE%88%E5%8D%AB

• 全局前置守卫 router.beforeEach
• 全局解析守卫 router.beforeResolve
• 全局后置钩子 router.afterEach
• 路由独享的守卫 beforeEnter
• 组件内的守卫 beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

二十七：组件中写 name 选项有什么作用？

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

二十八：Vue 组件间通信有哪些方式?

Vue 组件间通信六种方式

1. props/$emit
2. $emit/$on
3. vuex
4. $attrs/$listeners
5. provide/inject
6. $parent/$children 与 ref

二十九：Vue 中 key 值的作用？

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

三十：虚拟 DOM 实现原理？

• 虚拟DOM本质上是JavaScript对象,是对真实DOM的抽象
• 状态变更时，记录新树和旧树的差异
• 最后把差异更新到真正的dom中

详细实现见 面试官: 你对虚拟DOM原理的理解?

三十一：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 文件

.....................................

未完待续，风尚云网持续更新.....

** 今天风尚云网就分享这么多，关于Vue的面试题，你学会了多少？**

欢迎在留言区评论，对于有价值的留言，

我会一一回复的。

如果觉得文章对你有一丢丢帮助，请点个赞~