目录

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

一 :那好,请说一下,vue的优缺点?

vue 的优点:

vue的缺点:

二:说说你对 SPA 单页面的理解,它的优缺点分别是什么?

优点:

缺点:

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

区别:

运用场景:

四:谈谈你对 Vue 生命周期的理解?

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

六:vue中在什么阶段才能访问操作DOM?

七:谈谈你对vue中的 keep-alive 的了解?

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

九:vue生命周期的作用是什么?

十:Vue生命周期总共有几个阶段?

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

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

十三:生命周期钩子的一些使用方法?

十四:v-show与v-if的区别?

十五:说几种绑定class的数组用法?

十六:vue中路由跳转方式?

十七:vue组件的scoped属性的作用?

 十八:vue.js的两个核心是什么?

(数据驱动、组件系统)

十九:vue事件中如何使用event对象?

 二十:vue中子组件调用父组件的方法?

二十一:vue 首屏加载优化 ?

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

二十三:为什么需要 nextTick?

二十四:route 和 router 的区别是什么?

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

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

二十七:组件中写 name 选项有什么作用?

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

 二十九:Vue 中 key 值的作用?

 三十:虚拟 DOM 实现原理?

三十一:vue-cli 替我们做了哪些工作?

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

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

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

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

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

三十七:说一下你对vue中的接收属性对象的meta属性的理解?

三十八:说一下 Vue 和 React 的认识,做一个简单的对比?

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

三十九:Vue 3.0 有没有过了解? 

四十:你是如何了解响应式原理? 

四十一:Vue中的key到底有什么用?

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

事件修饰符:

表单修饰符:

.lazy

.number

.trim

四十三:去掉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 有哪几种属性?

有五种,分别是 StateGetterMutationActionModule

二十三:为什么需要 nextTick?


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

二十四:route 和 router 的区别是什么?

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

二十五: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
  • 组件内的守卫 beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave

二十七:组件中写 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 文件

三十二: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是“路由实例对象”,包括了路由的跳转方法(pushreplace),钩子函数等。

详细:

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>
    
    <!-- 只当在 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的面试题,你学会了多少?

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

我会一一回复的。

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

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

Logo

前往低代码交流专区

更多推荐