一、你目前在长春吗？预计多久可以实习？

我目前在长春，预计拿到offer后可以开始实习。

二、描述一下你的项目，你最得意的页面

三、八股问答

（一）前端路由导航激活（切换按钮的激活状态 css）

在实现前端路由导航激活时，通过监听路由的变化，利用 Vue Router 提供的导航守卫或者在组件内使用 watch 监听 $route 对象的变化。当路由发生改变时，根据当前路由路径与导航菜单的对应关系，动态地为相应的菜单项添加或移除激活状态的 CSS 类名。

（二）vue 中 histroy 为什么变化后会显示元素

在 Vue 中使用 vue-router 的 history 模式时，当 URL 的 history 发生变化，vue-router 会根据新的 URL 匹配对应的路由组件，并将该组件渲染到指定的视图区域，从而显示对应的元素。这是因为 vue-router 对浏览器的 history API 进行了封装，监听了 popstate 事件以及在路由跳转时手动更新 history 状态，然后根据内部的路由映射表来决定显示哪个组件。

（三）页面之间传参的方式

  • 路由传参：

    • 动态路由参数：在路由配置中定义动态参数，例如 { path: '/user/:id', component: User }，在组件内通过 this.$route.params.id 获取参数。
    • 查询参数：通过 this.$router.push({ path: '/search', query: { keyword: 'vue' } }) 传递参数，在接收页面通过 this.$route.query.keyword 获取。

  • 父子组件传参：

    • 父传子：在父组件的模板中，通过属性绑定将数据传递给子组件，例如 <child-component :message="parentMessage"></child-component>，在子组件中通过 props 接收，props: ['message']。
    • 子传父：子组件通过 $emit 事件触发一个自定义事件，并传递数据，例如 this.$emit('sendData', data)，在父组件中监听该事件并接收数据，<child-component @sendData="receiveData"></child-component>，methods: { receiveData(data) { console.log(data); } }。

（四）vue 父传子子传父

如上述页面传参方式中所描述，父传子通过属性绑定和 props 实现，子传父通过 $emit 触发自定义事件实现，这种方式使得父子组件之间的数据传递和交互更加灵活和可控，方便构建复杂的组件结构和应用逻辑。

（五）vue3 生命周期函数

Vue 3 中的生命周期函数有了一些变化，主要的生命周期钩子包括：

  • setup：在组件创建之前执行，用于初始化组件的一些数据和逻辑，是 Vue 3 中新增的组合式 API 的入口函数。
  • onBeforeMount：在组件挂载之前被调用。
  • onMounted：在组件挂载完成后被调用。
  • onBeforeUpdate：在组件数据更新之前被调用。
  • onUpdated：在组件数据更新完成后被调用。
  • onBeforeUnmount：在组件卸载之前被调用。
  • onUnmounted：在组件卸载完成后被调用。

（六）vue2 和 vue3 生命周期区别

  • Vue 2 中的 beforeCreate 和 created 在 Vue 3 中被整合到了 setup 函数中，setup 函数在组件实例化之前执行，可以访问到 props 和 context，但不能访问到组件实例 this。
  • Vue 3 中移除了 beforeDestroy 和 destroyed，取而代之的是 onBeforeUnmount 和 onUnmounted，使得生命周期函数的命名更加语义化，符合组件挂载和卸载的概念。
  • Vue 3 的生命周期函数采用了基于函数的注册方式，而不是 Vue 2 中的选项式注册，例如在 Vue 3 中使用 import { onMounted } from 'vue'; onMounted(() => { console.log('mounted'); });，这种方式使得代码更加灵活和可复用。

（七）前后端是怎么实现交互的

前后端交互通常基于 HTTP 协议。前端通过发送 HTTP 请求（如 GET、POST、PUT、DELETE 等请求方法）到后端服务器的特定接口地址，后端服务器接收到请求后，根据请求的内容进行相应的业务逻辑处理，如查询数据库、执行业务算法等，然后将处理结果以 HTTP 响应的形式返回给前端。前端在收到响应后，根据响应的数据进行页面的更新和展示。在 Vue 项目中，常使用 axios 等库来发送 HTTP 请求

（八）表单元素用户名，性别，右边按钮查询，后台请求列表，姓名，性别，职业；设计数据结构并描述整套流程

  • 数据结构设计：

    • 前端表单数据结构：
{
  username: '', // 用户名
  gender: '', // 性别
}
  • 后端返回数据结构：
[
  {
    name: '', // 姓名
    gender: '', // 性别
    profession: '' // 职业
  },
...
]

  • 流程描述：

    • 前端页面展示包含用户名输入框、性别选择框（如男、女）和查询按钮的表单。当用户输入用户名并选择性别后，点击查询按钮，前端会将表单数据（username 和 gender）封装成一个对象，使用 axios 发送一个 POST 请求到后端的查询接口（如 /api/search）。后端接收到请求后，根据传入的用户名和性别参数在数据库中进行查询操作，查询符合条件的用户信息，将查询结果（包含姓名、性别、职业）封装成一个数组形式的 JSON 数据，然后将该数据作为 HTTP 响应返回给前端。前端在收到响应后，解析响应数据，将用户信息展示在页面的列表中，例如使用 v-for 指令循环渲染列表项。

（九）水平居中元素的方法

  • 行内元素或文本：可以使用 text-align: center 样式属性将父元素内的行内元素或文本水平居中
  • 定宽块级元素：可以使用 margin: 0 auto 样式，将块级元素的左右外边距设置为自动，使其在父元素内水平居中
  • 不定宽块级元素：对于不定宽的块级元素，可以使用 display: flex 和 justify-content: center 实现水平居中。

（十）js 中的数组操作有哪些

JavaScript 中的数组操作非常丰富，常见的有：

  • 创建数组：

    • 使用字面量方式 const arr = [1, 2, 3];
    • 使用 Array 构造函数 const arr = new Array(1, 2, 3);
  • 访问数组元素：通过索引访问，例如 arr[0] 获取数组的第一个元素。
  • 修改数组元素：直接通过索引赋值，例如 arr[1] = 5;
  • 数组长度：使用 length 属性获取或修改数组长度，例如 arr.length 返回数组的长度，arr.length = 5 可以改变数组的长度。

  • 添加元素：

    • push：在数组末尾添加一个或多个元素，例如 arr.push(4, 5)，返回修改后的数组长度。
    • unshift：在数组开头添加一个或多个元素，例如 arr.unshift(0)，返回修改后的数组长度。

  • 删除元素：

    • pop：删除数组末尾的元素，返回被删除的元素。
    • shift：删除数组开头的元素，返回被删除的元素。
    • splice：可以删除、插入或替换数组中的元素，例如 arr.splice(1, 2) 删除从索引 1 开始的 2 个元素，arr.splice(2, 0, 'new') 在索引 2 处插入元素 'new'。

  • 数组遍历：

    • for 循环：for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }
    • forEach 方法：arr.forEach(item => console.log(item));
    • map 方法：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后的返回值，例如 const newArr = arr.map(item => item * 2);
    • filter 方法：创建一个新数组，其包含通过所提供函数实现的测试的所有元素，例如 const filteredArr = arr.filter(item => item > 2);
    • reduce 方法：对数组中的每个元素执行一个由您提供的 reducer 函数 (升序执行)，将其结果汇总为单个返回值，例如 const sum = arr.reduce((acc, item) => acc + item, 0);

四、你未来是打算怎么发展的

想在大城市发展

五、我看你简历上主修课程都是后端课程，为什么想到要做前端呢？（问了两次）

标签: none

添加新评论