当前位置：首页 > news >正文

前端热门面试题day1

news 来源：原创 2025/7/5 17:36:29

内容回答较粗糙，如有疑问请自行搜索资料

什么是vue中的slot？它有什么作用

Vue中的Slot（插槽）就像给组件预先留的“内容停车位”，让父组件能把自定义内容“塞”到子组件的指定位置。它的主要作用是：

灵活定制组件内容
比如一个卡片组件，父组件可以自由填入标题、内容甚至底部按钮，而不用改组件代码。
复用组件，一处定义，多处适配
像乐高一样，同一个组件框架，不同页面塞不同内容，避免重复造轮子。
默认内容备着，以防万一
如果父组件没提供内容，组件自己会显示预设的默认文字或结构，不会空空如也。

在vue渲染模板时，如何保留模板中的html注释

使用 v-pre 指令
作用：跳过该元素及子元素的编译，保留原始内容（包括注释）。
适用场景：静态区域或调试时保留注释。

<div v-pre><!-- 这个注释会被保留 --><p>内容不参与响应式</p>
</div>

Vue的v-clock和v-pre有什么区别

关键区别

功能
- v-cloak：隐藏未编译的过渡状态，需配合 CSS（如 display: none）。
- v-pre：直接跳过编译，保留原始内容（如展示代码中的 {{ }}）。
编译行为
- v-cloak 的元素会被编译，仅过渡状态被隐藏。
- v-pre 的元素及子元素完全不参与编译，所有 Vue 语法均不解析。
适用场景
- v-cloak：解决页面加载时短暂显示 {{ message }} 的闪烁问题。
- v-pre：展示未编译的 Vue 语法（如文档示例）、优化静态内容性能。
  一句话总结：
  v-cloak 是“隐藏未渲染的过渡态”，v-pre 是“完全禁用编译”。

Vue Router中如何获取路由传递过来的参数

获取路由传递的参数主要分为两种类型：动态路由参数（params）和查询参数（query）
在 Vue 3 中，使用 Vue Router 获取路由传递的参数主要分为两种类型：动态路由参数（params） 和 查询参数（query）。以下是具体实现方法及示例：

一、动态路由参数（params）

作用：通过路径中的动态段（如 /user/123）传递参数。

1. 通过 `useRoute()` 获取（Composition API）

2. 通过 `this.$route` 获取（Options API）

3. 通过 `props` 传递参数（推荐）

在路由配置中启用 props，将参数直接作为组件的 props 接收：

二、查询参数（query）

作用：通过 URL 查询字符串传递参数（如 /user?id=123&name=admin）。

1. 通过 `useRoute()` 获取（Composition API）

2. 通过 `this.$route` 获取（Options API）

三、监听参数变化

当路由参数变化时（例如用户切换路径 /user/123 到 /user/456），可以通过 watch 监听参数变化：

注意事项

动态参数类型：动态参数默认是字符串类型，需手动转换为数字：
```
const userId = parseInt(route.params.id); // 转为数字
```
解耦组件与路由：通过 props 传递参数，组件无需直接依赖 $route，提高复用性。
路由跳转：
- 动态参数：router.push({ name: 'User', params: { id: 123 } })
- 查询参数：router.push({ path: '/user', query: { name: 'Alice' } })

Vue3中的过滤器以及其基础用法

在 Vue 3 中，过滤器（Filters）已被官方移除，这是 Vue 3 的一个重大变化。Vue 官方认为过滤器的功能可以通过方法（Methods）、计算属性（Computed）或全局工具函数实现，而过滤器语法会增加不必要的复杂性。

vue3中路由如何配置404页面

通过 Vue Router 的通配符路由捕获所有未匹配的路径，并将其导向自定义的 404 页面组件。

1. 创建 404 组件

在项目中新建一个组件（如 NotFound.vue），用于显示 404 错误信息（如“页面未找到”提示）。

2. 配置路由规则

在路由配置文件中，将通配符路由（/:pathMatch(.*)*）放在所有常规路由的最后，确保它仅在其他路径均未匹配时触发。
该路由的 component 属性指向 404 组件。

3. 服务器配置（关键！）

问题原因：Vue 是单页应用（SPA），使用 HTML5 History 模式时，直接刷新非首页路由会导致服务器返回 404。
解决方法：配置服务器，将所有未知路径请求重定向到 index.html，让 Vue Router 在前端处理路由。
- Nginx：在配置文件中添加 try_files $uri $uri/ /index.html;。
- Apache：在 .htaccess 中添加重写规则，将未知路径指向 index.html。
- Node.js（Express）：添加路由 app.get('*', (req, res) => res.sendfile('index.html'))。
- IIS：通过 web.config 文件配置 URL 重写规则。

4. 可选：使用 Hash 模式

如果不想配置服务器，可在 Vue Router 中设置 mode: 'hash'，使用带 # 的 URL，避免服务器路径问题。

5. 避免常见错误

路由名称唯一：每个路由的 name 属性必须唯一，避免重复。
懒加载组件：使用异步加载（如 () => import('路径')）优化性能。
动态路由添加：若动态添加路由后跳转出现 404，需确保路由在跳转前已加载完成。

Vue中的template标签有什么作用

在 Vue 中，template 标签是定义组件结构和实现动态渲染的核心工具
template 标签是 Vue 实现动态 UI 的核心工具，其作用包括：

定义组件结构：声明 HTML 模板并绑定数据。
条件与循环：通过指令控制元素的显示、隐藏或重复。
插槽机制：支持组件间内容的灵活传递。
代码组织：提升可维护性和复用性。
性能优化：减少冗余 DOM 节点，结合虚拟 DOM 提升渲染效率。

为什么vue中的data属性是一个函数而不是对象

在 Vue 中，data 属性被设计为一个函数（而非直接的对象）的核心原因是为了确保每个组件实例拥有独立的数据副本，避免组件间的数据污染和不可预测的副作用。

• 确保每个组件实例拥有独立的数据副本，避免数据污染。
• 支持组件的复用性，使其在不同场景下安全使用。
• 遵循组件化开发的核心原则，即组件应独立且自包含。

为什么不建议在vue中同时使用vue-if和vue-for

性能问题多次条件判断和 DOM 操作导致效率低下，尤其在大数据量时。
优先级差异 Vue2 和 Vue3 的行为不同，可能导致逻辑错误或兼容性问题。
代码可读性逻辑混合导致代码难以维护和调试。

在vue组件中写name选项有什么作用

在 Vue 3 中，name 选项的作用与 Vue 2 类似，主要包括以下几点：

调试和开发工具支持
- 在 Vue Devtools 中显示组件名称，替代“匿名组件”，便于快速定位组件。
- 错误信息中会显示组件名，帮助开发者快速定位问题。
支持递归组件
必须为递归组件定义 name，否则 Vue 无法识别组件自身。
配合 <keep-alive> 缓存组件
通过 include 或 exclude 属性，使用组件名指定需要缓存的组件。
动态组件匹配
在 <component :is="name"> 中通过组件名动态切换组件。
服务器端渲染（SSR）支持
在生成的 HTML 中标识组件，提升可读性和调试效率。

什么是vue中的slot？它有什么作用

在vue渲染模板时，如何保留模板中的html注释

Vue的v-clock和v-pre有什么区别

关键区别

Vue Router中如何获取路由传递过来的参数

一、动态路由参数（params）

1. 通过 useRoute() 获取（Composition API）

2. 通过 this.$route 获取（Options API）

3. 通过 props 传递参数（推荐）

二、查询参数（query）

1. 通过 useRoute() 获取（Composition API）

2. 通过 this.$route 获取（Options API）

三、监听参数变化

注意事项

Vue3中的过滤器以及其基础用法

vue3中路由如何配置404页面

1. 创建 404 组件

2. 配置路由规则

3. 服务器配置（关键！）

4. 可选：使用 Hash 模式

5. 避免常见错误

Vue中的template标签有什么作用

为什么vue中的data属性是一个函数而不是对象

为什么不建议在vue中同时使用vue-if和vue-for

在vue组件中写name选项有什么作用

相关文章：

1. 通过 `useRoute()` 获取（Composition API）

2. 通过 `this.$route` 获取（Options API）

3. 通过 `props` 传递参数（推荐）

1. 通过 `useRoute()` 获取（Composition API）

2. 通过 `this.$route` 获取（Options API）