一.重绘和回流

1.回流概念：浏览器在计算文档流布局时，重新计算元素的大小和位置的过程。

触发情况：元素尺寸发生变化，添加或者删除元素，文本内容变化等

导致的问题：其他的元素的位置和大小也需要重新计算，比较消耗性能。

二.重绘概念：

回流指的是浏览器在计算文档流布局（layout）时，重新计算元素的位置和大小的过程。当页面中的元素发生尺寸变化、添加或删除元素、文本内容变化等操作时，会触发回流。回流可能会导致其他元素的位置和大小也需要重新计算，这可能是一个比较耗费性能的操作。
重绘是指在回流之后，浏览器将更新后的元素样式绘制到屏幕上的过程。当元素的外观属性（如颜色、背景等）发生变化时，会触发重绘。重绘不涉及布局的计算，所以性能上相对来说较回流开销较小。

二.vue插槽

让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式

一共有三种分类：默认插槽、具名插槽、作用域插槽

插槽是可以定义默认值的，当没有对插槽进行填充的时候，就会展示默认值

作用域插槽（Scoped Slots）

定义：一种特殊的插槽，允许子组件将数据暴露给父组件的插槽内容。
用法：
在子组件中，通过<slot :数据名="数据值"></slot>将数据传递给插槽；
在父组件中，通过<template v-slot:插槽名称="slotProps">接收数据，并使用slotProps来访问传递过来的数据。

三.vue路由导航守卫（全局守卫、路由独享守卫、组件内守卫）

Vue路由导航守卫是Vue Router提供的一种机制，它可以让你在路由跳转之前或之后执行一些自定义逻辑，例如：鉴权、重定向等。守卫分为全局守卫、路由独享守卫和组件内守卫。

3.1 全局守卫

全局守卫作用于所有路由，包括进入路由、离开路由、进入子路由和离开子路由。全局守卫有三个：beforeEach、beforeResolve和afterEach。

1. beforeEach

beforeEach在路由跳转之前被调用，它接收三个参数：to、from和next。
to：即将进入的路由对象；from：当前导航正要离开的路由对象；next：函数，必须调用next()来resolve钩子。

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !user.isLoggedIn) { // 鉴权
    next({
      path: '/login', // 重定向到登录页
      query: {redirect: to.fullPath} // 保存跳转路径
    })
  } else {
    next() // 继续跳转
  }
})

2. beforeResolve

beforeResolve是在导航被确认之前被调用，它接收一个参数：to。
to：即将进入的目标路由对象。

router.beforeResolve((to) => {
  console.log('正在进入', to.name || to.path)
})

3. afterEach

afterEach在路由跳转之后被调用，它接收两个参数：to和from。
to：即将进入的路由对象；from：当前导航正要离开的路由对象。

3.2 路由独享守卫

路由独享守卫作用于单个路由，它们在路由配置中定义。路由独享守卫有两个：beforeEnter和afterEnter。

1. beforeEnter

beforeEnter在路由切换前被调用，它接收三个参数：to、from和next。
to：即将进入的路由对象；from：当前导航正要离开的路由对象；next：函数，必须调用next()来resolve钩子。

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    beforeEnter: (to, from, next) => {
      if (user.isAdmin) { // 鉴权
        next() // 继续跳转
      } else {
        next('/forbidden') // 跳转到禁止访问页
      }
    }
  }
]

2. afterEnter

afterEnter在路由切换后被调用，它接收一个参数：to。
to：即将进入的目标路由对象

const routes = [
  {
    path: '/dashboard',
    component: Dashboard,
    afterEnter: (to) => {
      console.log(to.name || to.path, '已进入')
    }
  }
]

9.3 组件内守卫

组件内守卫作用于单个组件，它们与全局守卫和路由独享守卫不同的是，它们不需要在路由配置中定义，而是在组件内定义。

1. beforeRouteEnter

在路由进入组件前被调用，它接收三个参数：to、from和next。

2. beforeRouteUpdate

beforeRouteUpdate在路由进入组件后，组件复用时被调用，它接收两个参数：to和from。

3. beforeRouteLeave

beforeRouteLeave在路由离开组件时被调用，它接收两个参数：to和from和next。

四、flexBox 和Grid布局的区别，使用场景

Flexbox布局

Flexbox（Flexible Box Layout Module）是一个一维布局模型，主要用于在容器内沿一个主轴（main axis）或交叉轴（cross axis）排列子元素。

Flexbox的核心思想是为容器提供一个灵活的方式来排列、对齐和分配其子元素的空间，即使它们的大小未知或是动态变化的。

Flexbox模型主要包括两个轴：主轴（main axis）和交叉轴（cross axis）。主轴是元素的主要排列方向，它可以是水平的（row）或垂直的（column）。交叉轴垂直于主轴，用于控制元素在主轴方向之外的排列方式。

Flexbox特别适用于以下场景：

单行或多行项目排列：当你需要在一个容器中水平或垂直地排列一系列项目，并且这些项目的尺寸或数量可能会变化时，Flexbox是一个很好的选择。

对齐方式：Flexbox提供了强大的对齐功能，包括项目在主轴和交叉轴上的对齐，以及容器内部的空间分配。这使得Flexbox成为处理导航栏、卡片布局、表单元素等场景的理想工具。

响应式设计：Flexbox布局可以很好地适应不同屏幕尺寸和分辨率，因为它能够基于容器的大小自动调整子元素的大小和位置。这使得Flexbox成为构建响应式网页布局的宝贵工具。

分布空间：Flexbox提供了灵活的空间分布选项，如justify-content和align-items属性，这些属性允许你控制元素之间的空间分布和它们在容器中的对齐方式。

优点
简单易用：Flexbox的布局概念相对直观，易于学习和使用。
灵活性强：Flexbox提供了高度的灵活性，可以处理各种复杂的布局需求。
响应式友好：Flexbox布局能够很好地适应不同屏幕尺寸和分辨率，非常适合构建响应式网页。
缺点
一维布局：虽然Flexbox在处理一维布局时非常强大，但它不适合处理复杂的二维布局需求。

Grid布局

Grid布局（CSS Grid Layout Module）是一个二维布局系统，它将页面划分为行和列组成的网格系统。Grid布局允许开发者以更精确的方式控制元素在网格中的位置、大小和跨度。与Flexbox不同，Grid布局提供了一种更强大、更灵活的方式来处理复杂的页面布局。

Grid布局包括了许多与Flexbox类似的属性和概念，如对齐、分布和尺寸调整等。但Grid布局还引入了更多的概念和术语，如网格线（grid lines）、网格区域（grid areas）和网格轨道（grid tracks）等，这些概念使得Grid布局能够处理更复杂的布局需求。

Grid布局特别适用于以下场景：

复杂页面布局：当你需要构建具有多个区域（如头部、导航栏、主内容区、侧边栏和页脚）的复杂页面布局时，Grid布局是一个很好的选择。Grid布局允许你轻松地将页面划分为多个区域，并控制每个区域的大小和位置。

数据密集型布局：对于需要展示大量数据的布局（如数据表格、图片画廊或仪表盘），Grid布局提供了强大的布局能力，能够清晰地组织和展示数据。

响应式设计：虽然Flexbox在响应式设计方面表现出色，但Grid布局同样适用于构建响应式网页。Grid布局提供了丰富的响应式布局选项，如媒体查询（media queries）和重复网格线（fr units）等，这些选项使得Grid布局能够轻松适应不同屏幕尺寸和分辨率。

复杂的对齐和分布：Grid布局提供了强大的对齐和分布功能，允许你精确地控制元素在网格中的位置和大小。这使得Grid布局成为处理复杂对齐和分布需求的理想工具。

优点
二维布局：Grid布局是一个二维布局系统，能够处理复杂的页面布局需求。
精确控制：Grid布局提供了精确控制元素在网格中位置和大小的能力。
灵活性强：Grid布局具有很高的灵活性，能够应对各种复杂的布局挑战。
响应式友好：Grid布局同样适用于构建响应式网页，提供了丰富的响应式布局选项。
缺点
学习曲线：相对于Flexbox来说，Grid布局的学习曲线可能稍微陡峭一些，因为它引入了更多的概念和术语。
浏览器兼容性：虽然现代浏览器都支持Grid布局，但在一些旧版本的浏览器中可能仍然需要使用回退方案或polyfill来确保兼容性。

五、css预处理器是什么？Sass和less的优缺点。

CSS预处理器是一种脚本语言，它允许我们以编程的方式编写更加干净、结构化的CSS代码。提供了变量、嵌套规则、混合（mixins）、继承等功能，使得CSS更加模块化、功能更加强大。使用预处理器可以提高开发效率，减少维护成本，并且有助于保持代码的一致性。

Sass和less的优缺点对比

1. 编译难度

sass:  node-sass安装经常报错，而且与nodejs版本绑定。

less:  编译容易，安装无压力

2. 语法

2.1 循环

sass有多种循环，for, each, while, 语法直观，书写方便，用来生成class非常好用

less没有循环，使用递归代替循环，语法不直观，不好用

2.2 条件分支

sass:  有 if else 判断语句

less:   没有if else，使用when来进行条件判断

2.3 重用

sass:  有 extend 和 @mixin

less:   有 extend  和 方法