前端Vue面试八股常考题（一）

1、什么是 Vue 指令？Vue 有哪些常用的指令？

Vue 指令是带有 v- 前缀的特殊属性，其职责是当表达式的值改变时，将变化高效应用到 DOM 上。

常用指令分类及说明：

1. 属性绑定指令

   • v-bind：动态绑定属性或组件 prop，简写为

     <img :src="imageSrc">
     <button :[key]="value">动态属性名</button>
     

   • v-model：在表单元素上创建双向数据绑定

     <input v-model="message">
     <!-- 等价于 -->
     <input :value="message" @input="message = $event.target.value">
     

2. 事件绑定指令

   • v-on：绑定事件监听器，简写为@

     <button @click="doThis">点击事件</button>
     <button @[event]="doThis">动态事件名</button>
     

3. 条件渲染指令

   • v-if/v-else/v-else-if：根据条件动态创建或销毁 DOM 元素

     <div v-if="type === 'A'">A</div>
     <div v-else-if="type === 'B'">B</div>
     <div v-else>Not A/B</div>
     

   • v-show：通过切换display 属性控制元素显示 / 隐藏，不销毁 DOM

     <div v-show="isVisible">Hello</div>
     

4. 列表渲染指令

   • v-for：基于数组或对象渲染列表，需使用 key 优化性能

     <div v-for="item in items" :key="item.id">
       {{ item.text }}
     </div>
     

5. 内容渲染指令

   • v-text：更新元素文本内容
   • v-html：更新元素 innerHTML（注意 XSS 风险）

6. 特殊功能指令

   • v-slot：具名插槽或接收 prop 的插槽，简写为 #
   • v-pre：跳过元素及其子元素的编译过程
   • v-cloak：隐藏未编译模板直到实例准备完毕（需配合 CSS [v-cloak] { display: none; }）
   • v-once：只渲染一次，后续更新跳过

扩展：自定义指令

Vue 允许注册自定义指令，钩子函数与组件生命周期类似：

// 全局注册
app.directive('focus', {
  mounted(el) { el.focus() }
})

// 局部注册
export default {
  directives: {
    focus: {
      mounted(el) { el.focus() }
    }
  }
}

2、Vue 计算属性 computed 的函数名和 data 中的属性可以同名吗？为什么？

不可以同名，原因如下：

1. 命名冲突本质：data 和 computed 最终都会作为 Vue 实例属性存在，若同名会导致实例属性被覆盖。
2. 优先级顺序：data 优先级高于 computed，若同名，模板中会优先使用 data 数据，导致 computed 失效。
3. 警告机制：Vue 初始化时会检测重复定义并抛出警告，避免不可预知的错误。

扩展：Vue 实例属性优先级

• props > methods > data > computed > watch
  后挂载的属性会覆盖先挂载的同名属性（如 methods 方法会覆盖 data 同名属性）。

3、Vue 中 data 的属性可以与 methods 中的方法同名吗？为什么？

不可以同名，因为：

1. 实例属性共享命名空间：data、methods、computed 等会被合并到组件实例对象，同名会导致冲突。
2. 方法覆盖属性：methods 优先级高于 data，同名时方法会覆盖 data 属性，导致数据无法访问。

示例：冲突场景

<script>
export default {
  data() { return { count: 10 } },
  methods: {
    count() { return this.count * 2 } // 错误！会覆盖 data.count
  }
}
</script>

4、Vue 的 v-cloak 和 v-pre 指令有什么作用？

1. v-cloak 指令

• 作用：隐藏未编译的模板内容，避免 “模板闪烁”（用户看到 {{ message }} 原始标签）。
• 使用方式：需配合 CSS 规则 [v-cloak] { display: none; }，Vue 实例挂载后自动移除该属性。
• 应用场景：
  • 无构建工具的开发环境（如直接在 HTML 中使用 Vue）。
  • 大型应用加载时或网络较慢时提升用户体验。

2. v-pre 指令

• 作用：跳过元素及其子元素的编译过程，直接显示原始内容。
• 应用场景：
  • 展示 Vue 模板语法（如文档示例）。
  • 优化性能：对静态内容跳过编译。
  • 保留 HTML 注释（默认编译会移除注释）。

示例：

<!-- v-cloak 示例 -->
<div v-cloak>{{ message }}</div>

<!-- v-pre 示例 -->
<span v-pre>{{ 这段内容不会被编译 }}</span>

5、Vue 的 v-show 和 v-if 有什么区别？使用场景分别是什么？

使用场景：

• v-if 适用场景：
  • 条件不频繁切换（如用户权限控制）。
  • 多条件分支（配合 v-else-if/v-else）。
  • 需要完全销毁组件实例（如表单重置）。
• v-show 适用场景：
  • 频繁切换显示状态（如标签页、对话框）。
  • 需要结合 CSS 过渡动画（因元素始终存在于 DOM 中）。

示例：

<!-- v-if 示例：用户权限控制 -->
<admin-panel v-if="user.isAdmin"></admin-panel>

<!-- v-show 示例：频繁切换的对话框 -->
<div v-show="isDialogVisible" class="dialog">对话框内容</div>

扩展：与生命周期的关系

• v-if 为 false 时，组件不渲染，条件切换时触发完整生命周期。
• v-show 始终渲染组件，仅控制显示，生命周期仅触发一次。

6、在 Vue 组件中写 name 选项有什么作用？

Vue 组件的 name 选项用于显式声明组件名称，主要作用如下：

1. 调试与开发体验

• Vue DevTools 识别：设置 name 后，组件在 DevTools 中显示更直观，便于调试复杂应用。
• 错误堆栈信息：在报错时，name 能明确显示问题发生的组件位置。

2. 递归组件引用

组件需通过 name 选项实现自引用：

<!-- 递归组件示例 -->
<script>
export default {
  name: 'TreeNode',
  props: {
    children: Array
  },
  template: `
    <ul>
      <li v-for="child in children" :key="child.id">
        {{ child.name }}
        <TreeNode v-if="child.children" :children="child.children" />
      </li>
    </ul>
  `
}
</script>

3. 动态组件与 keep-alive

• 动态组件切换：通过 name 缓存组件状态（如 keep-alive）。
• 异步组件加载：name 可作为异步组件的标识。

4. 不同 API 中的定义方式

• 选项式 API：直接在组件选项中定义 name。

• 组合式 API：通过defineOptions 宏定义（Vue 3.3+）：

  <script setup>
  defineOptions({
    name: 'MyComponent'
  })
  </script>
  

7、Vue 2 和 Vue 3 支持哪个版本以上的 IE 浏览器？

8、为什么不建议在 Vue 中同时使用 v-if 和 v-for?

1. 优先级问题导致的行为差异

2. 正确替代方案

• 场景 1：过滤列表项
  使用计算属性或方法预先过滤数据：

  <script>
  export default {
    computed: {
      activeUsers() {
        return this.users.filter(user => user.isActive)
      }
    }
  }
  </script>
  <template>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </template>
  

• 场景 2：条件性渲染整个列表
  使用 <template> 分离逻辑：

  <template v-if="shouldRenderList">
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </template>
  

9、在 Vue 渲染模板时，如何保留模板中的 HTML 注释？

10、为什么 Vue 中的 data 属性是一个函数而不是一个对象？

1. 核心原因：避免组件实例间数据共享

• 对象是引用类型：若 data 为对象，所有组件实例将共享同一数据对象，导致数据污染。
• 函数返回新对象：每个实例调用 data() 都会返回独立的数据副本，保证数据隔离。

2. 根实例 vs 组件实例的区别

3. Vue 2 与 Vue 3 的实现差异

11、Vue 的 template 标签有什么用？

<template> 标签在 Vue 中作为占位符或逻辑容器使用，其行为在 Vue 2 和 Vue 3 中有所不同：

1. 核心用途

• 条件渲染

  ：包裹多个元素，避免添加额外 DOM 节点：

  <template v-if="condition">
    <h1>标题</h1>
    <p>内容</p>
  </template>
  

• 列表渲染：与 v-for 结合，不生成额外 DOM：

  <template v-for="item in list" :key="item.id">
    <div>{{ item.name }}</div>
    <span>{{ item.value }}</span>
  </template>
  

• 插槽定义：定义具名插槽或默认插槽：

  <template #header>
    <h1>头部内容</h1>
  </template>
  

2. Vue 2 vs Vue 3 的差异

12、Vue 中 MVVM、MVC 和 MVP 模式的区别是什么？

扩展：Vue 中的 MVVM 实现

• 响应式系统：Vue 2 使用 Object.defineProperty，Vue 3 使用 Proxy 实现数据劫持。
• 模板编译：将 template 编译为渲染函数，生成虚拟 DOM。
• 双向绑定：通过 v-model 实现表单元素与数据的双向绑定，本质是 :value + @input 的语法糖。