虽然是小白，第一次面试，但是感觉只有面试前的两分钟是紧张的，在面试环节的时候就一点都不紧张了。不过好像也没啥好紧张的哈哈。

- 1.组件通信（五种组件通信）

组件通信这一块还是很简单的。分父子组件通信，兄弟组件通信，其实pinia这些不算是广义上的组件通信，但是也可以说说。但是需要知道Vue的设计理念中是支持双向数据传输的，虽然尤大大不推荐，采用的单向数据流的思想，但也没禁止。具体内容我写过：所有组件通信的方法，一次学个够 - 掘金 (juejin.cn)

- 2.Vue中内置组件有哪些主要是问我Keep-Alive （我就只记得一个Transition动画的，然后介绍了一下Keep-Alive）

这篇文章介绍了**<Suspense>和<Teleport>两个内置组件，推荐两个vue超实用的官方内置组件Teleport和Suspense - 掘金 (juejin.cn)

1. `<Suspense>`

用于处理异步组件的加载状态，允许你在组件加载时显示备用内容。

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

2. `<Teleport>`

将组件渲染到 DOM 的不同位置，这对于模态框、工具提示等非常有用。

<Teleport to="body">
  <div class="modal">I'm a modal!</div>
</Teleport>

3. `<Transition>`

我自己写过所以很有印象。跳动的心-动画效果transition和animation CSS集成在Vue中组件如何使用 - 掘金 (juejin.cn)

用于在组件进入和离开时添加过渡效果，支持 CSS 和 JavaScript 动画。

<Transition name="fade">
  <div v-if="show">Fade In/Out</div>
</Transition>

4. `<KeepAlive>`

我也深入的了解过语法，很熟悉。前端性能优化篇—KeepAlive苹果手机中的墓碑机制 - 掘金 (juejin.cn)

缓存组件的状态，避免重新渲染，这对于在多个视图之间切换时保持状态非常有效。

<KeepAlive>
  <MyComponent />
</KeepAlive>

5. `<ErrorBoundary>`

虽然 Vue 3 没有直接提供 <ErrorBoundary> 组件，但你可以使用 errorCaptured 钩子捕获子组件中的错误。

import { defineComponent } from 'vue';

export default defineComponent({
  errorCaptured(err, vm, info) {
    console.error('Error captured:', err);
    return false; // Prevents further propagation
  },
});

6. `<Fragment>`

在 Vue 3.2+ 中，允许组件返回多个根节点，简化组件结构。

<template>
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
</template>

7. `<Component>`

使用 <component> 标签进行动态组件渲染，可以基于条件动态选择要渲染的组件。

<component :is="currentComponent" />

- 3.有哪些布局弹性布局的属性

弹性布局（Flexbox）是 CSS 中一种用于创建复杂布局的强大工具，它提供了一组属性来控制元素的对齐、排列和分布。以下是 Flexbox 中常用的布局属性：

1. `display: flex` / `display: inline-flex`

display: flex: 将容器设置为弹性容器，使其子元素成为弹性项。
display: inline-flex: 同样将容器设置为弹性容器，但容器本身是内联级别的。

.container {
  display: flex;
}

2. `flex-direction`

定义主轴方向，控制弹性项的排列方向。

row: 水平排列（默认值）。
column: 垂直排列。
row-reverse: 反向水平排列。
column-reverse: 反向垂直排列。

.container {
  flex-direction: row;
}

3. `flex-wrap`

定义弹性容器是否换行。

nowrap: 不换行（默认值）。
wrap: 换行。
wrap-reverse: 反向换行。

.container {
  flex-wrap: wrap;
}

4. `flex-flow`

简写属性，用于设置 flex-direction 和 flex-wrap。

.container {
  flex-flow: row wrap;
}

5. `justify-content`

定义主轴（水平轴）上的弹性项对齐方式。

flex-start: 向主轴开始位置对齐（默认值）。
center: 居中对齐。
flex-end: 向主轴结束位置对齐。
space-between: 弹性项之间均匀分布。
space-around: 弹性项周围均匀分布。
space-evenly: 弹性项之间和两端均匀分布。

.container {
  justify-content: center;
}

6. `align-items`

定义交叉轴（垂直轴）上的弹性项对齐方式。

stretch: 拉伸以填满容器（默认值）。
center: 垂直居中对齐。
flex-start: 向交叉轴开始位置对齐。
flex-end: 向交叉轴结束位置对齐。
baseline: 按照基线对齐。

.container {
  align-items: center;
}

7. `align-content`

定义多行弹性项的对齐方式，控制弹性容器的行之间的对齐。

stretch: 拉伸以填满容器（默认值）。
center: 居中对齐。
flex-start: 向容器的开始位置对齐。
flex-end: 向容器的结束位置对齐。
space-between: 行之间均匀分布。
space-around: 行之间和两端均匀分布。

.container {
  align-content: space-between;
}

8. `align-items`

定义单行弹性项的对齐方式。

flex-start: 对齐到交叉轴的开始位置。
flex-end: 对齐到交叉轴的结束位置。
center: 在交叉轴上居中对齐。
baseline: 按照基线对齐。
stretch: 拉伸以填满交叉轴（默认值）。

.item {
  align-self: flex-end;
}

9. `flex`

用于设置弹性项的可伸缩性，包含三个子属性：

flex-grow: 定义弹性项的扩展比例。
flex-shrink: 定义弹性项的收缩比例。
flex-basis: 定义弹性项的初始主轴大小。

.item {
  flex: 1 1 100px;
}

10. `align-self`

用于设置单个弹性项的交叉轴对齐方式，覆盖 align-items。

.item {
  align-self: center;
}

- 4.van-uploader的上传文件怎么存储（想了一会，双向绑定img，axios把数据传入后端，后端用koa连接池去连接mysql数据库，进行存储，我只说了mysql持久化存储）

我都思考了很久，我觉得是让我说van-uploader底层怎么弄的，但是我对vant组件库底层没有了解，那没办法，只能把关键词放在后面，怎么存储上的。那就不难了，上传的数据img会变成string流保存到前端data里，跟着axios一起发送给后端，我用node和Koa写的后端，去创建连接池连接数据库有性能优化的作用，不用重复创建连接。那后端拿到数据以后连接mysql数据库存储就行了。

- 5.了解双Token吗？（我说我不了解这个，只知道单Token）

这我真没了解，给我干懵逼了，就用过单Token没用过双Token。给出大佬的文章。项目中前端如何实现无感刷新 token！ - 掘金 (juejin.cn)

对于前端是否要刷新Token的问题，好像争议很大。

- 6.路由传参有哪些（只说了一个params，还有一个是query）

大佬总结的文章 vue router 如何使用params query传参，以及有什么区别 - 掘金 (juejin.cn)

- 7.项目中pinia管理哪些数据（关键数据，不能定死的数据）

- 8.怎么解决报错问题的（技术博客和AI工具）

- 9.vue2和vue3的区别

选项式API和组合式API的区别。

1. Composition API vs. Options API

Vue 2: 使用 Options API，组件的选项（如 data、methods、computed、watch）都定义在一个对象中。

new Vue({
  data() {
    return {
      message: 'Hello Vue 2!'
    };
  },
  methods: {
    greet() {
      console.log(this.message);
    }
  }
});

Vue 3: 引入了 Composition API，这种方法更灵活，更易于逻辑复用和类型推导。

import { ref } from 'vue';

export default {
  setup() {
    const message = ref('Hello Vue 3!');
    const greet = () => {
      console.log(message.value);
    };

    return {
      message,
      greet
    };
  }
};

2. 性能改进

Vue 3: 相比 Vue 2，Vue 3 引入了许多性能改进：
- 虚拟 DOM 的优化: 更高效的虚拟 DOM 实现。
- 编译器优化: 更快的编译和更新过程。
- Tree-shaking 支持: 允许更有效地打包应用程序，剔除未使用的代码。

3. 响应性系统

Vue 2: 使用 Object.defineProperty 实现响应性。这在处理大对象或数组时可能有性能问题。
Vue 3: 使用 Proxy API 实现响应性，提供了更好的性能和更灵活的功能。
```
import { reactive } from 'vue';

const state = reactive({
  count: 0
});
```

4. Fragments

Vue 2: 每个组件必须有一个根元素。
Vue 3: 支持多个根元素（Fragments），允许组件返回多个根节点。
```
<template>
  <h1>Title</h1>
  <p>Content</p>
</template>
```

5. Teleport

Vue 2: 没有内置的 Teleport 组件。
Vue 3: 引入了 <Teleport> 组件，可以将内容传送到 DOM 的其他位置，例如模态框和工具提示。
```
<Teleport to="body">
  <div class="modal">I'm a modal!</div>
</Teleport>
```

6. Suspense

Vue 2: 没有内置的 Suspense 组件。

Vue 3: 引入了 <Suspense> 组件，可以处理异步组件的加载状态。

<Suspense>
  <template #default>
    <AsyncComponent />
  </template>
  <template #fallback>
    <div>Loading...</div>
  </template>
</Suspense>

7. TypeScript 支持

Vue 2: 对 TypeScript 支持较弱，通常需要额外的类型声明和工具。
Vue 3: 原生支持 TypeScript，提供更好的类型推导和更强的类型安全。

8. 生命周期钩子

Vue 2: 生命周期钩子如 beforeCreate、created、mounted 等。
Vue 3: 添加了 onBeforeMount、onMounted 等 Composition API 钩子，并且支持 onActivated、onDeactivated 等新钩子。

9. 自定义指令

Vue 2: 自定义指令的定义方式较为复杂。
Vue 3: 自定义指令 API 更简单，支持多个钩子函数（如 created、beforeMount、mounted 等）。

10. 全局 API

Vue 2: 全局 API 通过 Vue.mixin、Vue.component、Vue.use 等定义。

Vue 3: 全局 API 的使用方式改变，采用了 app.config.globalProperties 和 app.use 等新方式。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.config.globalProperties.$myGlobalProperty = 'value';
app.mount('#app');

11. 组件定义

Vue 2: 组件定义通过 Vue.component、Vue.extend 等方法。

Vue 3: 推荐使用 Composition API 或 defineComponent 进行组件定义，支持更好的类型推导和逻辑复用。

import { defineComponent } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    // component logic
  }
});

- 10.组件的生命周期

beforeCreate：组件实例被创建之前，数据观测和事件/侦听器的设置尚未发生。这个阶段通常不用于实际的业务逻辑。 created：组件实例创建完成，数据观测和事件/侐听器的设置已经完成。此时可以进行初始化数据获取和设置。挂载阶段：

beforeMount：模板编译成 DOM 之前的阶段。在这个阶段，DOM 还没有被挂载到页面上。 mounted：组件挂载完成，DOM 元素已经被插入到页面中。适合进行与 DOM 相关的操作，如 API 请求和第三方库的初始化。更新阶段：

beforeUpdate：组件的数据更改导致重新渲染之前。此时可以访问旧的 DOM 进行对比和操作。 updated：组件更新完成，新的 DOM 已经渲染完成。可以执行依赖于最新 DOM 的操作。销毁阶段：

beforeUnmount：组件销毁之前。适合进行清理操作，如移除事件监听器和清除定时器。 unmounted：组件已经销毁，所有的事件监听器和子组件已被移除。

结束

还有介绍了一下自己写的项目之类的，问了一下公司之类的，和我到岗的问题，涉及了一些搭建项目之类的东西，没问有深度的问题，也没有拷打我，还是很友好的面试官。

记录第一次面试的过程，无感刷新Token

- 1.组件通信 （五种组件通信）

- 2.Vue中内置组件有哪些 主要是问我Keep-Alive （我就只记得一个Transition动画的，然后介绍了一下Keep-Alive）

1. <Suspense>

2. <Teleport>

3. <Transition>

4. <KeepAlive>

5. <ErrorBoundary>

6. <Fragment>

7. <Component>

- 3.有哪些布局 弹性布局的属性

1. display: flex / display: inline-flex

2. flex-direction

3. flex-wrap

4. flex-flow

5. justify-content

6. align-items

7. align-content

8. align-items

9. flex

10. align-self

- 4.van-uploader的上传文件怎么存储 （想了一会，双向绑定img，axios把数据传入后端，后端用koa连接池去连接mysql数据库，进行存储，我只说了mysql持久化存储）