VUE面试题汇总（三）(1)-优快云博客

本文详细介绍了Vue中的组件设计、生命周期管理、键盘事件监听、数组和对象操作引发的视图更新，以及如何处理非工程化项目的初始化页面问题和v-for循环中实现active状态切换。还涵盖了数据结构和算法在前端开发中的应用，如排序算法和数组操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

23. vue 中如何编写可复用的组件？

参考答案：

总结组件的职能，什么需要外部控制（即 props 传啥），组件需要控制外部吗（$emit）, 是否需要插槽（slot）

24. 什么是 vue 生命周期和生命周期钩子函数？

参考答案：

vue 的生命周期就是 vue 实例从创建到销毁的过程

解析：

在这里插入图片描述

25. vue 生命周期钩子函数有哪些？

参考答案：

在这里插入图片描述

26. vue 如何监听键盘事件中的按键？

参考答案：

解析：参考

27. vue 更新数组时触发视图更新的方法

参考答案：

Vue. set 可以设置对象或数组的值，通过 key 或数组索引，可以触发视图更新

数组修改

Vue.set(array, indexOfItem, newValue)

this.array.$set(indexOfItem, newValue)

对象修改

Vue.set(obj, keyOfItem, newValue)

this.obj.$set(keyOfItem, newValue)

Vue. delete 删除对象或数组中元素，通过 key 或数组索引，可以触发视图更新

数组修改

Vue.delete(array, indexOfItem)

this.array.$delete(indexOfItem)

对象修改

Vue.delete(obj, keyOfItem)

this.obj.$delete(keyOfItem)

数组对象直接修改属性，可以触发视图更新

this.array[0].show = true;

this.array.forEach(function(item){

item.show = true;

});

splice 方法修改数组，可以触发视图更新

this.array.splice(indexOfItem, 1, newElement)

数组整体修改，可以触发视图更新

var tempArray = this.array;

tempArray[0].show = true;

this.array = tempArray;

用 Object. assign 或 lodash. assign 可以为对象添加响应式属性，可以触发视图更新

//Object.assign的单层的覆盖前面的属性，不会递归的合并属性

this.obj = Object.assign({},this.obj,{a:1, b:2})

//assign与Object.assign一样

this.obj = _.assign({},this.obj,{a:1, b:2})

//merge会递归的合并属性

this.obj = _.merge({},this.obj,{a:1, b:2})

Vue 提供了如下的数组的变异方法，可以触发视图更新

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

28. vue 中对象更改检测的注意事项

参考答案：

还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：

var vm = new Vue({

data: {

a: 1

}

})

// vm.a 现在是响应式的

vm.b = 2

// vm.b 不是响应式的

对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。例如，对于：

var vm = new Vue({

data: {

userProfile: {

name: ‘Anika’

}

})

你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

Vue.set(vm.userProfile, ‘age’, 27)

你还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：

vm.$set(vm.userProfile, ‘age’, 27)

有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。所以，如果你想添加新的响应式属性，不要像这样：

Object.assign(vm.userProfile, {

age: 27,

favoriteColor: ‘Vue Green’

})

你应该这样做：

vm.userProfile = Object.assign({}, vm.userProfile, {

age: 27,

favoriteColor: ‘Vue Green’

})

例子：

Vue对象更改检测注意事项例子

<button @click=“add()”>添加

{{ item }}

可以同时添加多个属性如下：
Vue对象更改检测注意事项例子

<button @click=“add()”>添加
{{ item }}

29. 解决非工程化项目初始化页面闪动问题

参考答案：

vue页面在加载的时候闪烁花括号{}}，v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕

//css样式

[v-cloak] {

display: none;

}

//html代码
{{item.text}}
30. v-for 产生的列表，实现 active 的切换

参考答案：

:class

v-for生成序列
数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

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

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。
- 二叉树层序遍历
- B 树的特性，B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘？递归的方法会出现什么问题？
- 把多维数组变成一维数组的方法
- 知道的排序算法说一下冒泡快排的原理
- Heap 排序方法的原理？复杂度？
- 几种常见的排序算法，手写
- 数组的去重，尽可能写出多个方法
- 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
- 合并两个有序数组
- 给一个数，去一个已经排好序的数组中寻找这个数的位置（通过快速查找，二分查找）
部分主要分为两大块，排序算法与一些其他算法题**。

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

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。
- 二叉树层序遍历
- B 树的特性，B 树和 B+树的区别
- 尾递归
- 如何写一个大数阶乘？递归的方法会出现什么问题？
- 把多维数组变成一维数组的方法
- 知道的排序算法说一下冒泡快排的原理
- Heap 排序方法的原理？复杂度？
- 几种常见的排序算法，手写
- 数组的去重，尽可能写出多个方法
- 如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
- 知道数据结构里面的常见的数据结构
- 找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
- 合并两个有序数组
- 给一个数，去一个已经排好序的数组中寻找这个数的位置（通过快速查找，二分查找）
[外链图片转存中…(img-CwAITHCH-1714383805360)]