前端面试准备2

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标签内。

①：默认插槽

javascript 复制代码

//父组件
<MyCard>
  <p>这是插入到子组件中的内容</p>
</MyCard>


//子组件内部
<template>
  <div class="card">
    <slot></slot> <!-- 插槽 -->
  </div>
</template>



/*结果：子组件中 <slot> 的位置将被 <p>这是插入到子组件中的内容</p> 替换。*/

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

javascript 复制代码

//子组件
<slot name="footer"></slot>

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

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

javascript 复制代码

//父组件
<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 复制代码

//通过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页面内容

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

css 复制代码

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的变化

javascript 复制代码

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

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

javascript 复制代码

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

14.介绍一下vue router的路由守卫

①：全局路由守卫

router.beforeEach：任何路由跳转前触发
router.beforeResolve：导航确认前触发
router.afterEach：导航完成后触发

②：路由独享守卫

beforeEnter，直接在路由配置上定义，只在进入路由时触发

③：组件内守卫

beforeRouteEnter：在渲染的组件页面被验证前
beforeRouteUpdate：在路由跳转，但是组件被复用时调用
beforeRouteLeave：导航离开组件的的对应路由时