前端面试vue综合面试题持续更新...
风尚云网-vue相关综合面试题(不看后悔)，前端人员必看Fashion cloud -vue related comprehensive interview questions (no regrets), front-end personnel must see
目录
前端面试vue综合面试题持续更新...
三：说一下vue中computed 和 watch 区别和运用的场景？
八：为什么vue组件中的 data 必须是一个函数，然后 return 一个对象，而 new Vue 实例里，data 可以直接是一个对象？
三十六.vue中的$route 和 $router 的区别？
三十七：说一下你对vue中的接收属性对象的meta属性的理解？
三十八：说一下 Vue 和 React 的认识，做一个简单的对比？
一 ：那好，请说一下，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 函数首次被调用 |
| 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 有哪些钩子函数?
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 组件间通信有哪些方式?
- 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 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官方对于表单按键修饰符的介绍：
事件修饰符：
在事件处理程序中调用
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> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div>
表单修饰符：.lazy
在默认情况下，
v-model在每次input事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加lazy修饰符，从而转为在change事件_之后_进行同步：<!-- 在“change”时而非“input”时更新 --> <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的面试题，你学会了多少？
欢迎在留言区评论，对于有价值的留言，
我会一一回复的。
如果觉得文章对你有一丢丢帮助，请点个赞~
http://1813783665.3vzhuji.cc/
前往低代码交流专区
更多推荐
25
0- 0
已为社区贡献7条内容
所有评论(0)