您的当前位置:首页正文

2024年Vue面试题汇总

来源:九壹网

4、vue中 key 值的作用

使用key来给每个节点做一个唯一标识

key的作用主要是为了高效的更新虚拟DOM。另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们,

否则vue只会替换其内部属性而不会触发过渡效果。

5.Vue 组件中 data 为什么必须是函数?

在 new Vue() 中,data 是可以作为一个对象进行操作的,然而在 component 中,data 只能以函数的形式存在,不能直接将对象赋值给它。

当data选项是一个函数的时候,每个实例可以维护一份被返回对象的独立的拷贝,这样各个实例中的data不会相互影响,是独立的。

6、v-for 与 v-if 的优先级

v-for的优先级比v-if高。

7.说出至少 4 种 vue 当中的指令和它的用法

v-if(判断是否隐藏)

v-for(把数据遍历出来)

v-bind(绑定属性)

v-model(实现双向绑定)

vue核心知识——组件篇

1.vue中子组件调用父组件的方法

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

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

第三种是父组件把方法传入子组件中,在子组件里直接调用这个方法。

2.vue中父组件调用子组件的方法

父组件利用ref属性操作子组件方法。

父:

子:

method: {

test() {

alert(1)

}

}

在父组件里调用test即 this.$refs.childMethod.test()

3.vue组件之间传值

(1)父组件给子组件传值:

1.父组件调用子组件的时候动态绑定属性

2.子组件定义props接收动态绑定的属性props: ['dataList']

3.子组件使用数据

(2)子组件主动获取父子间的属性和方法:

在子组件中使用this. p a r e n t . 属性 / t h i s . parent.属性/this. parent.属性/this.parent.方法。

(3)子组件给父组件传值:

一、使用ref属性

1.父组件调用子组件时绑定属性ref

<parent :ref='parent'></parent>

2.在父组件中使用this.$refs.parent.属性/this.$refs.parent.方法

二、使用$emit方法

1.子组件调用this.$emit('方法名‘,传值)

2.父组件通过子组件绑定的'方法名'获取传值。

(4)vue页面级组件之间传值

1.使用vue-router通过跳转链接带参数传参。

2.使用本地缓存localStorge。

3.使用vuex数据管理传值。

(5)说说vue的动态组件。

多个组件通过同一个挂载点进行组件的切换,is的值是哪个组件的名称,那么页面就会显示哪个组件。

主要考查面试这 component的 is属性。

(6)keep-alive内置组件的作用

可以让当前组件或者路由不经历创建和销毁,而是进行缓存,凡是被keep-alive组件包裹的组件,除了第一次以外。不会经历创建和销毁阶段的。第一次创建后就会缓存到缓存当中

(7)递归组件的用法

组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事。

首先我们要知道,既然是递归组件,那么一定要有一个结束的条件,否则就会使用组件循环引用,最终出现“max stack size exceeded”的错误,也就是栈溢出。那么,我们可以使用v-if="false"作为递归组件的结束条件。当遇到v-if为false时,组件将不会再进行渲染。

vue核心知识——路由

1.怎么定义vue-router的动态路由?怎么获取传过来的值?

动态路由的创建,主要是使用path属性过程中,使用动态路径参数,以冒号开头,如下:

{

path: ‘/details/:id’

name: ‘Details’

components: Details

}

当匹配到/details下的路由时,参数值会被设置到this.$route.params下,所以通过这个属性可以获取动态参数

this.$route.params.id

2.vue-router有哪几种路由守卫?

路由守卫为:

全局守卫:beforeEach

后置守卫:afterEach

全局解析守卫:beforeResolve

路由独享守卫:beforeEnter

3.$route和 $router的区别是什么?

$router为VueRouter的实例,是一个全局路由对象,包含了路由跳转的方法、钩子函数等。

$route 是路由信息对象||跳转的路由对象,每一个路由都会有一个route对象,是一个局部对象,包含path,params,hash,query,fullPath,matched,name等路由信息参数。

4.vue-router响应路由参数的变化

  • (1)用watch 检测

  • (2)组件内导航钩子函数

5. vue-router 传参

(1)使用Params:

  • 只能使用name,不能使用path

  • 参数会显示在路径上,刷新不会被清空

(2)使用Query:

  • 参数会显示在路径上,刷新不会被清空

  • name 可以使用path路径

vue核心知识——vuex

不用Vuex会带来什么问题?

一、可维护性会下降,你要想修改数据,你得维护三个地方

二、可读性会下降,因为一个组件里的数据,你根本就看不出来是从哪来的

三、增加耦合,大量的上传派发,会让耦合性大大的增加,本来Vue用Component就是为了减少耦合,现在这么用,和组件化的初衷相背。

1.vuex有哪几种属性?

有五种,分别是 State、 Getter、Mutation 、Action、 Module。

2、vuex的State特性是?

答:

一、Vuex就是一个仓库,仓库里面放了很多对象。其中state就是数据源存放地,对应于与一般Vue对象里面的data

二、state里面存放的数据是响应式的,Vue组件从store中读取数据,若是store中的数据发生改变,依赖这个数据的组件也会发生更新

三、它通过mapState把全局的 state 和 getters 映射到当前组件的 computed 计算属性中

3、vuex的Getter特性是?

答:

一、getters 可以对State进行计算操作,它就是Store的计算属性

二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用

三、 如果一个状态只在一个组件内使用,是可以不用getters

4、vuex的Action特性是?

答:

一、Action 类似于 mutation,不同在于:

二、Action 提交的是 mutation,而不是直接变更状态。

三、Action 可以包含任意异步操作

最后

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了

算属性

二、 虽然在组件内也可以做计算属性,但是getters 可以在多组件之间复用

三、 如果一个状态只在一个组件内使用,是可以不用getters

4、vuex的Action特性是?

答:

一、Action 类似于 mutation,不同在于:

二、Action 提交的是 mutation,而不是直接变更状态。

三、Action 可以包含任意异步操作

最后

总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了

[外链图片转存中…(img-xg9ndJd3-1725988638332)]

[外链图片转存中…(img-3L2u7u8S-1725988638333)]

因篇幅问题不能全部显示,请点此查看更多更全内容

Top