最新2024年Vue面试题汇总_vuejs 面试题(1),web编程开发学习

学习分享,共勉

题外话,毕竟我工作多年,深知技术改革和创新的方向,Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

1.请问 v-if 和 v-show 有什么区别?

相同点: 两者都是在判断DOM节点是否要显示。

不同点:

a.实现方式: v-if是根据后面数据的真假值判断直接从Dom树上删除或重建元素节点。  v-show只是在修改元素的css样式,也就是display的属性值,元素始终在Dom树上。

b.编译过程:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;  v-show只是简单的基于css切换;

c.编译条件:v-if是惰性的,如果初始条件为假,则什么也不做;只有在条件第一次变为真时才开始局部编译; v-show是在任何条件下(首次条件是否为真)都被编译,然后被缓存,而且DOM元素始终被保留;

d.性能消耗:v-if有更高的切换消耗,不适合做频繁的切换;  v-show有更高的初始渲染消耗,适合做频繁的额切换;

2、vue常用的修饰符

a、按键修饰符

如:.delete(捕获“删除”和”退格“键)      用法上和事件修饰符一样,挂载在v-on:后面,语法:v-on:keyup.xxx=’yyy’``<inputclass = 'aaa' v-model="inputValue" @keyup.delete="onKey"/>

b、系统修饰符

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器

  • .ctrl
  • .alt
  • .shift
  • .meta

c、鼠标按钮修饰符

  • .left
  • .right
  • .middle
    这些修饰符会限制处理函数仅响应特定的鼠标按钮。如:<button @click.middle ="onClick">A</button>鼠标滚轮单击触发   Click默认是鼠标左键单击
d、其他修饰符

  • .lazy
    在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 ,我们可以添加 lazy 修饰符,从而转变为使用 change事件进行同步:
<inputv-model.lazy="msg" >
  • .number
    如果想自动将用户的输入值转为数值类型,可以给 v-model 添加 .number修饰符:
<input v-model.number="age" type="number">

这通常很有用,因为即使在type="number"时,HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat()解析,则会返回原始的值。

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

同样前面都有空格加上.trim后 将前后空格都去掉了。

3、v-on可以监听多个方法吗?

可以,例如:@click = “fn(),fn2()”     会依次执行方法

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属性操作子组件方法。

父:
<child ref="childMethod"></child>
子:
method: {
  test() {
     alert(1)
  }
}
在父组件里调用test即 this.$refs.childMethod.test()

3.vue组件之间传值

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

1.父组件调用子组件的时候动态绑定属性
 <parent :dataList='dataList'></parent>

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目录下的所有文件,如果details/a,details/b等,都会映射到Details组件上。

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

this.$route.params.id

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

路由守卫为:
全局守卫:beforeEach
后置守卫:afterEach

JavaScript

  • js的基本类型有哪些?引用类型有哪些?null和undefined的区别。

  • 如何判断一个变量是Array类型?如何判断一个变量是Number类型?(都不止一种)

  • Object是引用类型嘛?引用类型和基本类型有什么区别?哪个是存在堆哪一个是存在栈上面的?

  • JS常见的dom操作api

  • 解释一下事件冒泡和事件捕获

  • 事件委托(手写例子),事件冒泡和捕获,如何阻止冒泡?如何组织默认事件?

  • 对闭包的理解?什么时候构成闭包?闭包的实现方法?闭包的优缺点?

  • this有哪些使用场景?跟C,Java中的this有什么区别?如何改变this的值?

  • call,apply,bind

  • 显示原型和隐式原型,手绘原型链,原型链是什么?为什么要有原型链

  • 创建对象的多种方式

  • 实现继承的多种方式和优缺点

  • new 一个对象具体做了什么

  • 手写Ajax,XMLHttpRequest

  • 变量提升

  • 举例说明一个匿名函数的典型用例

  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?

  • attribute和property的区别

  • document load和document DOMContentLoaded两个事件的区别

  • JS代码调试

  • 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • new 一个对象具体做了什么

  • 手写Ajax,XMLHttpRequest

  • 变量提升

  • 举例说明一个匿名函数的典型用例

  • 指出JS的宿主对象和原生对象的区别,为什么扩展JS内置对象不是好的做法?有哪些内置对象和内置函数?

  • attribute和property的区别

  • document load和document DOMContentLoaded两个事件的区别

  • JS代码调试

  • 开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  • 3
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值