前端面试vue综合面试题持续更新...

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 函数首次被调用
mounted	el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
beforeUpdate	组件数据更新之前调用，发生在虚拟 DOM 打补丁之前
update	组件数据更新之后
activited	keep-alive 专属，组件被激活时调用
deactivated	keep-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 选项有什么作用？

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

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

Vue 组件间通信六种方式

props/$emit
$emit/$on
vuex
$attrs/$listeners
provide/inject
$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 文件

三十二：v-if和v-for的优先级

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。如果v-if和v-for一起用的话，vue中的的会自动提示v-if应该放到外层去。

三十三.nextTick 使用场景和原理

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

三十四.自定义指令的五个生命周期？

1、bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
2、inserted：被绑定元素插入父节点时调用。
3、update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较前后的绑定值。
4、componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
5、unbind：只调用一次，指令与元素解绑时调用。

三十五.vue中如何获取dom?

ref=“domName” 用法：this.$refs.domName

三十六.vue中的$route 和 $router 的区别？

简述：route是“路由信息对象”，包括path,params,hash,query,fullPath,matched,name等路由信息参数。
router是“路由实例对象”，包括了路由的跳转方法(push、replace)，钩子函数等。

详细：

1.router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。

举例：history对象

$router.push({path:'home'});本质是向history栈中添加一个路由，在我们看来是切换路由，但本质是在添加一个history记录

方法：$router.replace({path:'home'});//替换路由，没有历史记录

2.route是一个跳转的路由对象，每一个路由都会有一个route对象，是一个局部的对象，可以获取对应的name,path,params,query等

我们可以从vue devtools中看到每个路由对象的不同

使用router是VueRouter的实例，在script标签中想要导航到不同的URL,使用router.push方法。返回上一个历史history用r o u t e r . t o ( − 1 ) 。 router.to(-1)。router.to(−1)。route为当前router跳转对象。里面可以获取当前路由的name,path,query,parmas等。

三十七：说一下你对vue中的接收属性对象的`meta`属性的理解？

有时，你可能希望将任意信息附加到路由上，如过渡名称、谁可以访问路由等

三十八：说一下 Vue 和 React 的认识，做一个简单的对比？

1.监听数据变化的实现原理不同

【Vue 通过 getter/setter 以及一些函数的劫持*React 默认是通过比较引用的方式进行的】

2.数据流的不同

【Vue 中默认支持双向绑定，React 一直提倡的是单向数据流】

3.模板渲染方式的不同

【React 是通过 JSX 渲染模板， Vue 是通过一种拓展的 HTML 语法进行渲染】

三十九：Vue 3.0 有没有过了解？

关于提出的新API setup()函数，

对于Typescript的支持，

替换Object.defineProperty为 Proxy 的支持。

具体v3的文档如下：

介绍 | Vue.js

四十：你是如何了解响应式原理？

响应式系统简述:

任何一个 Vue Component 都有一个与之对应的 Watcher 实例。
Vue 的 data 上的属性会被添加 getter 和 setter 属性。
当 Vue Component render 函数被执行的时候, data 上会被触碰(touch), 即被读, getter 方法会被调用, 此时 Vue 会去记录此 Vue component 所依赖的所有 data。(这一过程被称为依赖收集)
data 被改动时（主要是用户操作）, 即被写, setter 方法会被调用, 此时 Vue 会去通知所有依赖于此 data 的组件去调用他们的 render 函数进行更新。

四十一：Vue中的key到底有什么用？

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

diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超出差异.

diff程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾新头、旧头新尾.

准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列的bug.
快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅仅为O(1).

四十二：说一下你几个在vue中常用的修饰符？

首先的话，修饰符分为按键修饰符，表单修饰符，事件修饰符

vue官方对于表单按键修饰符的介绍：

表单输入绑定 — Vue.js

事件处理 — Vue.js

事件修饰符：

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive

<a v-on:click.stop="doThis"></a>


<form v-on:submit.prevent="onSubmit"></form>


<a v-on:click.stop.prevent="doThat"></a>


<form v-on:submit.prevent></form>



<div v-on:click.capture="doThis">...</div>



<div v-on:click.self="doThat">...</div>
表单修饰符：

.lazy

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步：

<input v-model.lazy="msg">
.number

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.trim

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">

四十三：去掉vue路由中地址栏的#号？

vue开发时地址栏上的ip后面会跟着一个#号，如果想去掉这个井号，可以在路由上加上 mode: 'history', 即可去掉

//设置路由
const router = new VueRouter({
    mode: "history",
    routes: [
        { path: "/",component: Customers },
        { path: "/about",component: About }
    ]
})

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

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

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

我会一一回复的。

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

风尚云网导航-很有范的导航站风尚云网提供了编程的基础技术游戏, HTML、CSS、Javascript等各种小游戏，也提供了强大的在线搜索功能，实用，有趣http://1813783665.3vzhuji.cc/

风尚云网

关注

25
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
18
评论
前端面试vue综合面试题持续更新...

风尚云网-vue相关综合面试题(不看后悔)，前端人员必看Fashion cloud -vue related comprehensive interview questions (no regrets), front-end personnel must see
复制链接

扫一扫