前端面试题详解整理12|hook和react的hookvue组件间的通信方式，动画，跨域解决，用浮动实现导航栏的布局，Webpack中的Proxy配置，

金色的雨570
112 阅读8分钟

海康威视前端实习一面

前天约的面好像是

30min，忘记录音了，没有手撕，回忆一下记得的

1.自我介绍，问技术栈

2.设备声音点有问题非常小没怎么听清，交涉了好几分钟听明白大概问的是跨域解决和webpack中proxy配置，答得不好 理解跨域解决和Webpack中的Proxy配置是前端开发中的两个重要方面。让我详细解释一下：

1. 跨域解决：

  • 跨域是指浏览器限制从一个源（域、协议、端口）向另一个源发送资源请求的行为。出于安全考虑，浏览器默认会阻止跨域请求。
  • 常见的跨域解决方案包括：JSONP、CORS、代理服务器等。
  • JSONP利用
  • CORS（跨域资源共享）是一种基于HTTP头部的机制，允许服务器声明哪些源可以访问其资源。
  • 代理服务器是指在前端服务器和目标服务器之间增加一个代理服务器，前端请求发送到代理服务器，代理服务器再将请求发送到目标服务器，从而避免跨域问题。

2. Webpack中的Proxy配置：

  • 在开发环境中，我们经常会遇到前端代码和后端接口部署在不同的域上，这就会产生跨域问题。
  • Webpack提供了一个Proxy功能，可以在开发服务器上创建一个代理，将某些URL的请求代理到另一个服务器上，从而解决跨域问题。
  • 在Webpack配置中，可以使用devServer.proxy来配置代理规则。例如： 
    module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};
  • 上述配置将以/api开头的请求代理到http://localhost:3000，并且在转发请求时会修改请求路径。

掌握跨域解决方案和Webpack中的Proxy配置可以帮助你在开发过程中处理前后端分离时的跨域问题，确保你的前端应用能够顺利地与后端进行通信。

3.有没有手写过页面，讲讲。怎么用浮动实现导航栏的布局

使用浮动实现导航栏的布局是一种常见且有效的方法。下面是一个简单的示例，演示如何使用浮动实现水平导航栏的布局：

HTML结构：

<div class="navbar">
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</div>

CSS样式：

.navbar {
  background-color: #333; /* 导航栏背景色 */
  overflow: hidden; /* 清除浮动 */
}

.navbar a {
  float: left; /* 让链接元素浮动到左侧 */
  display: block; /* 将链接元素变为块级元素，使得它们占据整行 */
  color: #fff; /* 文本颜色 */
  text-align: center; /* 文本居中 */
  padding: 14px 20px; /* 上下左右内边距 */
  text-decoration: none; /* 移除下划线 */
}

.navbar a:hover {
  background-color: #ddd; /* 鼠标悬停时的背景色 */
  color: #333; /* 鼠标悬停时的文本颜色 */
}

在这个示例中，我们使用浮动（float）属性将导航栏中的链接元素向左浮动，使它们水平排列在一行上。通过设置父元素的overflow: hidden;属性来清除浮动，确保父元素能够正确地包裹子元素。每个链接元素都设置了一些基本样式，如背景色、文本颜色、内边距等，以及在鼠标悬停时的样式变化。

4.有没有手写过动画，讲讲

当手写动画时，通常会使用CSS和JavaScript来实现。下面我将简要介绍一种手写动画的基本步骤和示例代码：

  1. 确定动画目标：首先，你需要确定你想要创建动画的目标元素。这可以是任何你想要在页面上产生动画效果的元素，比如一个图标、一个按钮、一段文本等。

  2. 编写HTML结构：在HTML中创建目标元素，并给它一个唯一的标识符（通常是一个ID或者类名），以便在CSS和JavaScript中引用它。

  3. 编写CSS样式：使用CSS来定义动画的样式。这包括起始状态、结束状态、持续时间、过渡效果等。你可以使用关键帧动画（@keyframes）或CSS过渡（transition）来实现动画效果。

  4. 编写JavaScript代码：使用JavaScript来控制动画的触发和行为。这包括监听用户事件（如点击、滚动等）、操作样式属性、设置定时器等。

  5. 测试和调试：在浏览器中测试你的动画，并根据需要调整CSS和JavaScript代码，直到达到你想要的效果。

下面是一个简单的手写动画示例，实现一个元素的淡入效果：

HTML结构：

<div id="animated-element">这是一个动画元素</div>
<button onclick="startAnimation()">开始动画</button>

CSS样式：

#animated-element {
  opacity: 0; /* 初始状态：完全透明 */
  transition: opacity 1s; /* 设置透明度过渡效果，持续1秒 */
}

JavaScript代码：

function startAnimation() {
  var element = document.getElementById('animated-element');
  element.style.opacity = '1'; // 将透明度设置为1，触发淡入效果
}

在这个示例中，当点击按钮时，JavaScript代码会将元素的透明度从0（完全透明）渐变到1（完全不透明），从而产生了一个简单的淡入动画效果。

5.vue组件间的通信方式

在Vue.js中，组件间的通信是非常常见的需求，通常有以下几种方式：

  1. Props / $emit：

    • 父组件可以通过props向子组件传递数据，子组件通过$emit触发事件将数据传递给父组件。
    • 这种方式适用于父子组件之间的简单通信，父组件通过props向子组件传递数据，子组件通过$emit触发事件将数据传递给父组件。

  2. 事件总线：

    • 可以使用Vue实例作为事件总线，通过$on监听事件，$emit触发事件，从而实现组件之间的通信。
    • 这种方式适用于非父子组件之间的通信，例如兄弟组件之间的通信或者跨越多层级的组件通信。

  3. Vuex：

    • Vuex是Vue.js的状态管理库，用于管理应用中的共享状态。
    • 可以将需要共享的状态保存在Vuex的store中，各个组件通过dispatch派发action或者commit提交mutation来改变状态，从而实现组件之间的通信。

  4. $attrs / $listeners：

    • 父组件通过$attrs向子组件传递所有的props和事件监听器，子组件可以通过$listeners接收父组件传递的事件监听器，并将它们绑定到子组件的DOM元素上。

  5. Provide / Inject：

    • 父组件通过provide提供数据，子组件通过inject注入数据，从而实现跨层级的组件通信。
    • 这种方式适用于祖先组件向后代组件传递数据，但要注意使用时的谨慎，因为这样的通信方式会破坏组件的封装性。

根据具体的场景和需求，选择合适的通信方式来实现组件间的通信是非常重要的。

6.vue的hook和react的hook的区别

Vue.js 和 React 中的 Hook 在概念上是相似的，但在实现和用法上有一些区别：

  1. Vue.js的Hook：

    • 在Vue.js 3及以后的版本中引入了Composition API，它提供了一种新的组件组织方式，其中包含了Hooks的概念。
    • Composition API 允许开发者使用setup()函数来编写组件的逻辑代码，并且可以在其中使用各种Composition API函数（也就是Hook）来组织代码，比如ref()、reactive()、watch()等。
    • Vue.js中的Hook是通过setup()函数和Composition API来实现的，可以使组件的逻辑更加清晰和可复用。

  2. React的Hook：

    • React的Hook是在React 16.8中引入的，它们允许你在函数组件中使用状态和其他React特性，从而不再需要类组件。
    • React的Hook包括了一系列的钩子函数，比如useState、useEffect、useContext等，每个钩子函数都提供了一种特定的功能，使得函数组件可以拥有类组件相似的能力。
    • React的Hook通过调用特定的Hook函数来使用，这些函数可以让你在函数组件中添加状态、副作用、上下文等功能。

总的来说，Vue.js 的 Hook 是通过 Composition API 和 setup() 函数来实现的，而 React 的 Hook 是一系列的钩子函数，用于在函数组件中添加不同的特性。虽然概念上相似，但具体的实现和用法有一些区别。

7.有没有搭建过静态网站，想问有没有用过vitepress

我确实有搭建过静态网站，并且也使用过 VitePress 这个工具。VitePress 是一个基于 Vue 3 和 Vite 构建的静态网站生成器，专门用于快速搭建文档站点。它具有以下特点和优势：

  1. 基于 Vue 3 和 Vite：VitePress 利用了 Vue 3 的新特性和 Vite 的快速构建能力，使得开发者可以享受到现代化的开发体验。

  2. Markdown 和 Vue 组合：VitePress 支持使用 Markdown 编写文档内容，并且可以通过 Vue 组件的方式在 Markdown 中嵌入动态内容和交互功能。

  3. 内置搜索功能：VitePress 内置了搜索功能，可以方便地搜索文档内容，提升了用户体验。

  4. 易于定制和扩展：VitePress 提供了丰富的主题和插件系统，开发者可以根据自己的需求定制和扩展功能。

  5. 快速启动：由于 VitePress 基于 Vite 构建，因此具有极快的启动和构建速度，可以快速预览和发布文档站点。

总的来说，VitePress 是一个非常适合快速搭建文档站点的工具，特别适用于技术文档、博客、API 文档等类型的静态网站。它的简单易用、快速高效的特点受到了很多开发者的欢迎。

大概是这些，八股挺少的

作者：//鲨鱼辣椒
链接：www.nowcoder.com/discuss/595…
来源：牛客网

avatar
文章
阅读
粉丝