当前位置：首页 > news >正文

前端面试准备2

news 来源：原创 2025/5/30 7:06:15

1.介绍三次握手和四次挥手

2.怎么实现元素的垂直居中

①：Flexbox弹性布局,设置父元素display属性为flex，然后设置align-items和justify-content属性为center

②：grid网格布局。设置父元素display属性为grid，然后设置place-items属性为center

③：绝对定位。设置父元素position属性为relative；子元素position设置为absolute，然后通过transform移动位置到垂直居中。

④：table表格。设置父元素display属性为table，子元素display属性为table-cell

3.介绍vue中的slot

slot（插槽）。插槽是组件内的一个占位符，让我们可以向组件内插入内容。父组件在使用子组件时，在子组件标签内传入内容，这些内容会被渲染到子组件内的slot标签内。

①：默认插槽

//父组件
<MyCard><p>这是插入到子组件中的内容</p>
</MyCard>//子组件内部
<template><div class="card"><slot></slot> <!-- 插槽 --></div>
</template>/*结果：子组件中 <slot> 的位置将被 <p>这是插入到子组件中的内容</p> 替换。*/

②：具名插槽。当组件中有多个插槽时，可以给每个插槽命名。

//子组件
<slot name="footer"></slot>//父组件
<MyCard><template #footer>   <!-- #header 是 v-slot:header 的简写语法。 --><small>底部信息</small></template>
</MyCard>

③：有时我们希望子组件可以将数据传给插槽内容。这就需要使用“作用域插槽”。

//父组件
<UserCard><template #default="{ user }"><p>{{ user.name }} - {{ user.age }}</p></template>
</UserCard>//子组件
<template><div><slot :user="user"></slot></div>
</template><script setup>
const user = {name: '小明',age: 21
}
</script>//子组件通过 v-bind 把数据暴露出去，父组件用解构获取这些数据来定制插槽内容。

4.设置一个弹窗组件

①：组件结构设置，分为顶部标题栏header，中间内容区域body，底部按钮区footer。

②：功能设置。支持自定义功能（拖拽、提示、警告、确认等...），defineProps接收传递的自定义内容。

③：实现方式。可以用<Teleport to="body"></Teleport>组件,将弹窗渲染到body下面下，避免影响父组件的css布局。

④：状态管理。通过响应式ref控制弹窗显隐

⑤：交互设计

5.vue中的v-cloak和v-pre的作用

①：对于v-cloak。用于隐藏尚未编译的vue模板，直到vue实例准备完，主要是解决页面加载过程中出现的模板闪烁问题。

//通过css选择器[v-cloak]，将元素设置为不显示[v-cloak] {display:none;
}

v-cloak指令会在Vue实例挂载完后自动去除，通常需要搭配css规则使用。

②：v-pre。会跳过元素和他的子元素的编译过程。它会让vue保持原始的模板语法

6.vue router 如何获取路由传参

①：$route对象访问

②：使用组合式API中的useRoute钩子函数。const route = useRoute()

③：通过props解耦，defineProps({})接收

7.vue的过滤器

在vue2中，通常使用在双花括号插值和v-bind表达式中。但是在vue3中已经移除，推荐使用计算属性或方法替代

8.Vue Route 配置404页面

①：首先创建一个404页面内容

②：在路由配置内，添加一个通配符路由作为最后一个路由规则。

path:"/:pathMach(.*)*"

9.为什么vue中的data是一个函数而不是一个属性

①：避免组件复用时的数据冲突共享。每一份vue实例独立维护一份数据

②：便于组件复用

③：符合Vue的单向数据流理念

10.为什么不建议同时使用v-if和v-for

①：优先级问题导致行为差问题。

vue2中，v-for优先级更高，会有性能问题。但是在vue3中，v-if的优先级更高，这会导致v-if无法访问到v-for作用域内的数据，从而出现错误

②：性能问题。

③：代码的可读性和可维护性

11.v-if和v-show的区别

①：v-if是真正的条件渲染，它会确保条件块内的事件监听器和子组件在切换时的销毁和创建。

②：v-show无论怎么样，组件都会被渲染，并保留在DOM里面，只是控制了切换了display属性的显隐

③：初始渲染开销。v-if是惰性的，只有true时渲染。而v-show无论初始条件是什么，都会渲染组件。

④：切换开销。v-if的切换开销大，因为每次都会销毁和创新创建。v-show的切换开销小，因为在初始时已经渲染到DOM上了。

12.计算属性的函数名可以和data内的属性名重合吗

不可以。因为计算属性和data中的属性最终都会挂载到vue的实例上。

13.如何监听vuex中的数据变化

①：在 Vue 组件中，使用watch监听Vuex state的变化

// 在 Vue 组件中
this.$store.watch((state) => state.someState,(newValue, oldValue) => {console.log('someState changed from', oldValue, 'to', newValue);}
);

②：在Vuex store中，使用subscribe方法监听mutation的变化

// 在 Vuex store 中
store.subscribe((mutation, state) => {console.log('mutation.type:', mutation.type);console.log('mutation.payload:', mutation.payload);
});