Vue 面试题知识

最新推荐文章于 2024-09-27 18:45:08 发布

jiayao1

最新推荐文章于 2024-09-27 18:45:08 发布

阅读量267

点赞数

文章标签： vue 面试

本文链接：https://blog.csdn.net/jiayao1/article/details/106005846

版权

面试题

1）v-show和v-if的区别？

v-show本质就是标签的display设置为none，控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素

2）为何v-for中要用key?

key是v-for里边的唯一标识，key可以标识组件的唯一性，为了更好的区别各个组件，key的作用主要是为了高效的更新虚拟DOM

3）描述vue组件生命周期（有父子组件的情况）？
在这里插入图片描述
4）Vue组件如何通讯？

5）描述组件渲染和更新的过程？

6）双向数据绑定v-model的实现原理？

3-3 vue 基本知识点

循环（列表）渲染

如何遍历对象 —也可以用v-for
key的重要性。key不能乱写（如random或者index）
key 需要写一个与业务实体相关连的（如 id）
v-for和v-if 不能同时使用！

事件

event参数，自定义参数

event 是一个原生的event对象
事件被挂载到当前元素

事件修饰符，按键修饰符

事件修饰符

<!-- 阻止单击事件继续传播 -->
<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>

按键修饰符

<!-- 即使Alt或shift被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有Ctrl被按下的时候才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候触发 -->
<button @click.exact="onClick">A</button>

【观察】事件被绑定到哪里？

表单

v-model
常见表单项 textarea checkbox radio select
修饰符 lazy number trim

标题3-4 vue 父子组件如何通讯

vue 组件的使用

props 和 $emit
组件间通讯-自定义事件
组件生命周期

标题3-5 如何用自定义事件进行vue组件通讯

在这里插入图片描述

知识点：在 beforeDestroy() 可以在里边做及时解绑代码

标题3-6 vue父子组件生命周期调用顺序

生命周期（单个组件）

挂载阶段
更新阶段
销毁阶段

参考（vue生命周期图）
created()
页面还没渲染，creared（）初始化页面
mounted()
页面渲染完毕
beforeDestroy()
可以解除绑定销毁子组件以及事件监听器

生命周期（父子组件）
在这里插入图片描述

created() 从外到内渲染首先渲染父组件之后渲染子组件
mounted（）从内到外渲染先渲染子组件后渲染父组件

before upadate() 从外到内
update() 从内到外

总结

props 和 $emit
组件间通讯-自定义事件
组件生命周期

标题3-7 面试会考察那些vue高级特性

vue高级特性

不是每个都很常用，但是通用到的时候必须要知道
考察候选人对vue的掌握是否全面，且有深度
考察做过的项目是否有深度和复杂度（至少能用到高级特性）

考察：

自定义v-model
$nextTick
refs
slot
动态、异步组件
keep-alive
mixin

标题考察讲解

$nextTick
◆ Vue 是异步渲染(原理部分会详细讲解)
◆ data 改变之后, DOM不会立刻渲染
◆ $nextTick 会在DOM渲染之后被触发,以获取最新DOM节点
在这里插入图片描述

refs
可以用$refs拿到DOM节点

slot

基本使用

向子组件插入会覆盖子组件内的默认值
父组件的插入为空的话子组件显示自己的默认值
作用域插槽

子组件变量：
在这里插入图片描述
父组件：

具名插槽

在这里插入图片描述

动态组件

“ ： ” 为动态用法
：xx =" 动态值"

异步组件

import()函数
按需加载，异步加载大组件

在这里插入图片描述
上边注释代码是同步
下边红框圈的代码试异步加载，（可以按需加载）

keep-alive

缓存组件
频繁切换，不需要重复渲染
经常出现在 vue常见性能优化

在这里插入图片描述
使用…包裹代码，其中的代码可以进行一个缓存

3-14vue组件如何抽离公共逻辑

mixin

多个组件有相同的逻辑，抽离出来
mixin并不是完美的解决方案，会有一些问题
– 变量来源不明确，不利于阅读
– 多mixin可能造成命名冲突
– mixin 和组件可能出现多对多的关系，复杂度较高
vue3 提出的Composition API 旨在解决这些问题

3-15 vue高级特性知识点小结 在这里插入图片描述
相关的面试技巧

可以不太深入，但必须知道
熟悉基本用法，了解使用场景
最好能和自己的项目经验结合起来

vuex使用

面试考点并不多（因为熟悉Vue之后，vuex没有难度）
但基本概念，基本使用和API必须要掌握
可能会考察state的数据结构设计（后面会讲）

vuex基本概念

state
getters
action
mutation

用于Vue组件

dispatch
commit
mapState
mapGetters
mapAction
mapMutations

在这里插入图片描述

Vue-router使用

面试考点并不多（提前是熟悉Vue）
路由模式（hash,H5 history）
路由配置（动态路由，懒加载）

vue-router路由模式

hash 模式（默认），如http://abc.com/#/user/10
H5 history模式，如http://abc.com/user/20
— 配置
或者需要server端支持，因此无特殊需求可选择前者

在这里插入图片描述

vuex Vue-router总结

◆ 面试考点并不多(前提是熟悉Vue )
◆ 掌握基本概念,基本使用
◆ 面试官时间有限,需考察最核心、最常用的问题,而非边角问题

vue使用-总结

基本使用，组件使用
基本使用
— 模板（插值，指令）
— computed和watch
— class和style
— 条件
— 循环
— 事件
— 表单
组件
— 生命周期
— props(类型和默认值)
— v-on 和 $emit
— 自定义事件
高级特性
— 自定义v-model
— $nextTick
— refs
— slot
— 动态组件
— 异步组件
— keep-alive
— mixin
vuex和vue-router使用
vuex
— state
— getters
— action
— mutation
— 用于vue
----- dispatch
----- commit
----- mapState
----- mapGetters
----- mapActions
----- mapMutations
vue-router
— 动态路由
— to和push
— hash 和history
— 懒加载（配合动态组件）

回顾面试题
1）v-show和v-if的区别？
v-show就是通过css的display来控制的
v-if 通过vue本身的一个机制来控制组件动态的显示隐藏
当组件要频繁切换显示的时候用前者
当组件切换一次的时候，不那么频繁切换的时候用v-if
2）为何v-for中要用key?
v-for中必须要用key 不然会有警告
。。。
3）描述vue组件生命周期（有父子组件的情况）？
…
4）Vue组件如何通讯？
父子之间的通讯 props $emit
vuex
组件与组件没有关系的情况下自定义事件
5）描述组件渲染和更新的过程？
…
6）双向数据绑定v-model的实现原理？
…