当前位置:首页 > 技术文章 > 正文内容

Web前端面试中,经常会被问到的Vue面试题

zonemu2个月前 (08-28)技术文章20

vue是一套用于构建用户界面的渐进式JavaScript框架,也是初创项目的首选前端框架。很多企业在招聘前端工程师时都会考察其对vue的了解,接下来千锋武汉Web前端培训小编就给大家分享常见的vue面试题答疑。

1、如何watch监听一个对象内部的变化?

如果只是监听obj内的某一个属性变化,可以直接obj.key进行监听。


watch: {

'obj.question': function (newQuestion, oldQuestion) {

this.answer = 'Waiting for you to stop typing...'

this.debouncedGetAnswer()

}

}

如果对整个obj深层监听

watch: {

obj: {

handler: function (newQuestion, oldQuestion) {

this.answer = 'Waiting for you to stop typing...'

this.debouncedGetAnswer()

},

deep: true,

immediate: true

}

}

immediate的作用:当值第一次进行绑定的时候并不会触发watch监听,使用immediate则可以在最初绑定的时候执行。

2、v-for循环时为什么要加key?

vue的DOM渲染是虚拟DOM,数据发生变化时,diff算法会只比较更改的部分,如果数据项的顺序被改变,vue将不是移动DOM元素来匹配数据项的改变,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。

3、$nextTick有什么作用?

有些时候在改变数据后立即要对DOM进行操作,此时获取到的DOM仍是获取到的是数据刷新前的DOM,无法满足需要,这个时候就用到了$nextTick。

4、vue中的$set有什么用?

向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。它必须用于向响应式对象上添加新属性,因为vue无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')。

5、组件间的传值方式有哪些?

1)provide / inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效。

2)Vue.observable

让一个对象可响应。vue内部会用它来处理 data 函数返回的对象。

返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态存储器,用于简单的场景。

3)$attrs

包含了父作用域中不作为prop被识别 (且获取) 的特性绑定(class和style除外)。当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定 (class和style除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。

4)$listeners

包含了父作用域中的 (不含.native修饰器的) v-on事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。

5)props

6)$emit

7)eventbus

8)vuex

9)$parent/$children/ref

6、vue生命周期函数有哪些?

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

Destroyed

以上就是千锋武汉web前端培训小编分享的Vue的相关面试题。面试是你走向职场的敲门砖,好的面试可以让你顺利圆梦高薪。如果你想了解更多前端技能或求职技巧,可以来千锋武汉Web前端培训班。高端潮流课程、专业师资面授还有一体化就业保障服务,让你理论与实战兼备,快速就业拿高薪!想了解更多Web前端行业动态和学习资料,可以关注“武汉千锋”微信公众号。

相关文章

Garuda Linux:现代化、注重性能与美观的Linux发行版

什么是 Garuda Linux?Garuda Linux 是一个基于 Arch Linux 的现代化、注重性能与美观的桌面操作系统。它面向对性能有较高要求的用户,尤其受到 Linux 爱好者、游戏玩...

「图解」父子组件通过 props 进行数据交互的方法

1.组件化开发,经常有这样的一个场景,就是父组件通过 Ajax 获取数据,传递给子组件,如何通过 props 进行数据交互来实现,便是本图解的重点。2.代码的结构3.具体代码 ①在父组件 data 中...

学习ES6- 入门Vue(大量源代码及笔记,带你起飞)

ES6学习网站: https://es6.ruanyifeng.com/箭头函数普通函数//普通函数 this 指向调用时所在的对象(可变) let fn = function fn(a, b) {...

如何使用git clone克隆包含子模块的仓库

技术背景在软件开发中,当项目规模逐渐增大时,为了更好地管理代码,我们常常会使用子模块将项目拆分成多个独立的部分。Git 作为目前最流行的版本控制系统,提供了管理子模块的功能。但在克隆包含子模块的仓库时...

「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用,只是大部分时候我们因熟悉Docker,在部署集群时采用了默认的dockers...

15款测试html5响应式的在线工具(测试类h5)

手机、平板灯手持设备的增多,网站要顺应变化,就必须要做响应式开发,响应式网站最大的特点在于可以在不同设备下呈现不同的布局,是基于html5+css3技术,目前越来越多的网站开始采用了响应式设计,而下面...