前端面试题(二)

一、grid宫格布局

将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局

display: grid指定一个容器采用网格布局

默认情况下，容器元素都是块级元素，但也可以设成行内元素。

div {
  display: inline-grid;
}

容器指定了网格布局以后，接着就要划分行和列。

grid-template-columns属性定义每一列的列宽，grid-template-rows属性定义每一行的行高。

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
}

除了使用绝对单位，也可以使用百分比

.container {
  display: grid;
  grid-template-columns: 33.33% 33.33% 33.33%;
  grid-template-rows: 33.33% 33.33% 33.33%;
}

具体的可以查看 CSS Grid 网格布局教程 - 阮一峰的网络日志

二、vue 父子组件传值

   1.props=>向子组件传值

      props 主要用于父组件向子组件通信。再父组件中通过使用:msg='msg'绑定需要传给子组件的属性值，然后再在子组件中用props接收该属性值

   2.emit通过事件向父组件传值

      在子组件的点击事件中 通过触发父组件中的自定义事件，把想传给父组件的信息以参数形式带过去 父组件便可拿到子组件传过来的值

   3.expose和ref(vue3独有)

      expose和ref主要用于父组件获取子组件的属性或方法。在子组件中，向外暴露出属性或方法，父组件便可以使用 ref 获取到子组件身上暴露的属性或方法。

  4.attrs

    attrs 主要用于子组件获取父组件中没有通过 props 接收的属性。

  5.provide/inject

     遇到多层传值时，使用 props 和 emit 的方式会显得比较笨拙。

     这时就可以用 provide 和 inject 了。

     provide与inject 主要为父组件向子组件或多级嵌套的子组件通信。

     provide：在父组件中可以通过 provide 提供需要向后代组件传送的信息。

     inject：从父组件到该组件无论嵌套多少层都可以直接用 inject 拿到父组件传送的信息。

 6.readonly

    获取一个对象 (响应式或纯对象) 或 ref 并返回原始代理的只读代理,不能给属性重新赋值。只读代理是递归的：访问的任何嵌套 property 也是只读的。
简单得理解：要确保父组件传递得数据不会被子孙组件更改时，增加readonly

  7.v-model

   v-model是 Vue 的一个语法糖

  8.插槽 slot

  9.eventbus

vue3的组件通信&v-model使用_vue3 v-model-CSDN博客

三、vue修饰符

1.基础事件修饰符

修饰符	作用说明	实战代码
.stop	阻止事件冒泡（子元素事件不触发父元素同名事件）	<button @click.stop=“btnClick”>点击
.once	事件仅触发一次（后续点击/操作无效，先父后子，与冒泡相反）	<button @click.once=“oneClick”>
.prevent	阻止事件默认行为（如表单提交刷新、a标签跳转）	<form @submit.prevent=“formSubmit”>
.self	仅元素自身触发事件（子元素点击不触发）	<div @click.self=“divClick”>父容器

2.鼠标事件修饰符

精准绑定鼠标左、中、右键的触发事件，无需判断event.button，仅在click类事件中生效。右键点击默认会触发浏览器菜单，如需禁用可配合.prevent：@click.right.prevent="rightClick"。

<template>
  <div 
    style="width:200px;height:200px;border:1px solid #000"
    @click.left="leftClick"    // 左键点击
    @click.middle="middleClick"// 滚轮点击
    @click.right="rightClick"  // 右键点击
  >
    点击此区域（左/中/右键）
  </div>
</template>

<script setup>
const leftClick = () => console.log('鼠标左键点击')
const middleClick = () => console.log('鼠标滚轮点击')
const rightClick = () => console.log('鼠标右键点击')
</script>

3.移动端事件修饰符

主要用于移动端触摸/滚动事件优化，核心是.passive，相当于给滚动事件加“懒执行”，提升页面滑动流畅度。

<template>
  
  <div 
    class="scroll-container"
    @touchmove.passive="handleScroll"
  >
    长列表内容...（避免滚动卡顿）
  </div>
</template>

<script setup>
// 无需阻止默认行为时用.passive，浏览器会提前优化
const handleScroll = (e) => {
  console.log('滚动位置：', e.touches[0].clientY)
}
</script>

<style>
.scroll-container {
  width: 100%;
  height: 300px;
  overflow-y: auto;
}
</style>

原理：.passive 告诉浏览器“此事件不会阻止默认滚动”，浏览器无需等待事件回调完成即可执行滚动，解决移动端“滚动卡顿”问题，不能与.prevent同时使用。

4.表单修饰符

修饰符	作用说明	适用场景
.lazy	输入框失焦（blur事件）时才同步v-model值（默认是input事件实时同步）	大文本输入、无需实时反馈的表单
.trim	自动去除v-model值的首尾空格（中间空格保留）	用户名、手机号等需过滤空格的输入
.number	将输入值转为数字类型（无法转换时保留字符串）	年龄、金额、数量等数字输入

5.键盘修饰符

 监听键盘事件时，修饰符可直接指定触发按键，无需判断event.keyCode。常用内置别名：.enter（回车）、.esc（退出）、.space（空格）、.up/.down（方向键）。

<template>
  
  <input @keyup.enter="submit" placeholder="按回车触发" />
  <input @keyup.esc="clear" placeholder="按ESC清空" />

  
  <input @keyup.ctrl.65="selectAll" placeholder="Ctrl+A触发全选" />

  
  <input @keyup.13="submit" placeholder="按键码13=回车" />
</template>

<script setup>
const submit = () => console.log('提交内容')
const clear = (e) => e.target.value = ''
const selectAll = (e) => {
  e.target.select()
  console.log('全选触发')
}
</script>

6.v-bind的修饰符 - 属性绑定增强

修饰符	作用说明	核心价值
.camel	将HTML标签的短横线命名属性转为驼峰命名（如view-box → viewBox）	适配SVG等标签的驼峰属性需求
.sync	简化子组件修改父组件数据的逻辑（语法糖：等价于v-on:update:propName）	替代繁琐的emit调用，简化双向绑定

使用技巧与避坑要点

4.1 修饰符组合使用规则
  顺序影响逻辑：事件修饰符的顺序决定执行顺序，如@click.prevent.stop 先阻止默认行为再阻止冒泡；涉及捕获阶段时，.capture 需放在最前面。

  互斥修饰符：.passive 与.prevent 互斥（前者承诺不阻止默认行为），同时使用会触发浏览器警告。

  多修饰符叠加：支持按需组合，如@click.right.prevent.once 表示“右键点击、阻止菜单、仅触发一次”。

4.2 框架 版本差异避坑
  .native 废弃：Vue3完全移除.native，自定义组件的事件需通过defineEmits 显式声明，父组件直接绑定即可。

  .sync 替代：Vue3推荐用v-model:propName 替代.sync，两者功能一致，但v-model: 支持多属性双向绑定。

4.3 性能优化建议
  移动端滚动场景必加.passive，减少滚动卡顿（尤其长列表）。

  大文本输入用.lazy 减少数据同步频率，降低性能开销。

  避免过度使用修饰符：简单场景（如普通按钮点击）无需加修饰符，保持代码简洁。

自定义修饰符

   通过binding.modifiers对象可获取指令修饰符配置，在钩子函数中实现逻辑分支：

<!-- 多修饰符组合使用 -->
<div v-demo.bold.text-red>带两个修饰符的文本</div>

const app = Vue.createApp({})

app.directive('demo', {
  mounted(el, binding) {
    // 响应.bold修饰符
    if (binding.modifiers.bold) {
      el.style.fontWeight = 'bold'
    }
    // 响应.text-red修饰符（JS中需转为驼峰）
    if (binding.modifiers['text-red']) {
      el.style.color = 'red'
    }
  }
})

修饰符可与动态指令参数协同工作，实现更灵活的配置：

<!-- 修饰符可与动态指令参数协同工作，实现更灵活的配置：-->
<div v-demo:[dynamicArg].modifier="value"></div>

注意事项

1.命名规范
修饰符名使用kebab-case（短横线分隔），JS中通过驼峰访问：

// HTML: v-demo.my-modifier
// JS: binding.modifiers.myModifier

2.与事件指令的区别
.prevent等事件修饰符是Vue内置功能，自定义修饰符需开发者自行实现逻辑。

3.组合使用规则
多个修饰符可同时使用，顺序不影响功能：

<!-- 通过修饰符组合实现多维度样式控制：-->
app.directive('highlight', {
  mounted(el, binding) {
    if (binding.modifiers.yellow) {
      el.style.backgroundColor = 'yellow'
    }
    if (binding.modifiers.thick) {
      el.style.fontWeight = 'bold'
    }
  }
})

<!-- 多修饰符组合效果 -->
<p v-highlight.yellow>黄色背景</p>
<p v-highlight.yellow.thick>黄色背景+加粗</p>

Vue3移除的修饰符：.native 已移除，子组件通过 defineEmits 声明事件即可。

自定义修饰符：通过指令钩子实现，如自定义表单验证修饰符 v-model.custom

性能优化：频繁输入场景用 .lazy 减少数据同步次数，提升页面响应速度。