1. v-for 中为什么需要 key？

• 核心作用：确保 DOM 元素的唯一性，优化 diff 算法的更新效率。
• 有 key 的情况：
  key 作为节点的唯一标识，diff 算法会根据 key 精准匹配新旧节点，只更新变化的部分（如新增、删除、移动），避免不必要的 DOM 重绘。
• 无 key 的情况：
  Vue 会采用 “就地复用” 策略，通过节点位置而非标识判断是否复用，可能导致节点状态混乱（如表单输入值异常），且更新时可能重复创建 / 销毁节点，性能损耗更大。

2. 组件的渲染和更新过程

• 渲染过程：
  1. 通过Vue.extend()将组件选项转换为构造函数；
  2. 实例化组件，执行初始化（init）；
  3. 调用vm.$mount()挂载组件，生成虚拟 DOM（vm._render()）；
  4. 将虚拟 DOM 转换为真实 DOM（vm._update()），插入页面。
• 更新过程：
  1. 数据变化触发依赖通知，执行patchVnode；
  2. 通过 diff 算法对比新旧虚拟 DOM，计算最小更新范围；
  3. 只更新变化的 DOM 节点，避免全量重绘。

3. 组件中 data 为什么必须是函数？

• 原因：保证组件实例的数据独立性。
  组件被复用多次时，会创建多个实例。若data是对象，所有实例会共享同一个对象，导致数据相互污染；而函数每次调用会返回新对象，确保每个实例的data独立。
• 原理：
  Vue 在合并组件选项时（mergeOptions），会通过strats.data策略校验：若data不是函数，在非生产环境会报错，强制要求返回对象。

4. Vue 中事件绑定的原理

• 编译差异：
  原生事件编译后对应vnode.data.on，组件事件对应vnode.data.on，带.native修饰符的组件事件会被编译为vnode.data.nativeOn（按原生方式处理）。

5. v-model 的实现原理及自定义方式

• 核心原理：语法糖，本质是value属性 + input事件的结合。
  • 原生元素：如<input v-model="val">等价于<input :value="val" @input="val = $event.target.value">。
  • 组件：默认等价于<MyComponent :value="val" @input="val = $event">。
• 自定义 v-model：
  通过组件的model选项修改默认的属性和事件：
  javascript

   

  运行

   

   

   

   

  Vue.component('MyCheckbox', {
    model: {
      prop: 'checked', // 替换默认的value
      event: 'change'  // 替换默认的input
    },
    props: ['checked'],
    template: `<input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)">`
  })
  

   
  
  
  使用时：<my-checkbox v-model="isChecked"></my-checkbox>（此时绑定的是checked属性和change事件）。

6. v-html 可能导致的问题

• XSS 攻击风险：v-html会将字符串解析为 HTML 并插入 DOM，若内容包含恶意脚本（如用户输入的<script>），可能执行恶意代码。
• 覆盖子元素：v-html会替换元素内所有子节点，导致原有子元素丢失。
• 原理：编译后会生成domProps: { innerHTML: ... }，直接操作 DOM 的innerHTML属性。

7. 父子组件生命周期的调用顺序

• 加载渲染：
  父beforeCreate → 父created → 父beforeMount → 子beforeCreate → 子created → 子beforeMount → 子mounted → 父mounted
  （先父后子初始化，先子后父完成挂载）
• 子组件更新：
  父beforeUpdate → 子beforeUpdate → 子updated → 父updated
• 父组件更新：
  父beforeUpdate → 父updated（不影响子组件）
• 销毁过程：
  父beforeDestroy → 子beforeDestroy → 子destroyed → 父destroyed
  （先父后子准备销毁，先子后父完成销毁）

8. Vue 组件通信方式

9. 如何抽离 Vue 中的相同逻辑？

• 原理：mixin会将定义的选项（如data、methods、生命周期）合并到每个组件中，优先级遵循 “组件选项覆盖混入选项”（特殊属性如生命周期会合并为数组依次执行）。
• 示例：
  javascript

   

  运行

   

   

   

   

  Vue.mixin({
    created() {
      console.log('公共初始化逻辑');
    }
  });
  

   
• 注意：过度使用可能导致逻辑混乱，Vue3 推荐使用Composition API替代。

10. 为什么使用异步组件？

• 作用：实现组件的按需加载，减小初始打包体积，优化页面加载速度。
• 原理：依赖 ES6 的import()语法（动态导入），将组件代码分割为单独的 chunk，在需要时才加载。
• 使用方式：
  javascript

   

  运行

   

   

   

   

  components: {
    AsyncComponent: () => import('./AsyncComponent.vue')
  }
  

   
• 加载过程：
  1. 初始渲染时返回占位符（createAsyncPlaceholder）；
  2. 组件加载完成后，调用resolve更新缓存并强制重新渲染；
  3. 再次渲染时直接使用缓存的组件。

11. 什么是作用域插槽？

• 普通插槽：父组件提供内容，作用域为父组件，子组件通过<slot>接收并渲染。
  • 编译后：父组件的插槽内容作为子组件的子节点（vnode），按slot名称分类。
• 作用域插槽：子组件向父组件传递数据，父组件根据数据动态渲染内容，作用域为子组件。
  • 编译后：父组件的插槽内容被解析为函数，子组件渲染时调用该函数并传入数据（如{ a: 1, b: 2 }）。
  • 示例：
    vue

     

     

     

     

     

    <!-- 子组件 -->
    <slot name="footer" :a="1"></slot>
    
    <!-- 父组件 -->
    <child>
      <template v-slot:footer="msg">
        {{ msg.a }} <!-- 使用子组件传递的数据 -->
      </template>
    </child>
    

     

12. keep-alive 的原理及用法

• 作用：缓存组件实例，避免切换时重复创建 / 销毁，优化性能。
• 核心属性：
  • include：仅缓存指定组件（正则或数组）；
  • exclude：排除指定组件；
  • max：最多缓存的组件数量（超过时使用 LRU 算法移除最久未使用的组件）。
• 生命周期：
  被缓存的组件会触发activated（激活时）和deactivated（失活时）钩子。
• 原理：
  1. 作为抽象组件，keep-alive会在created时初始化cache（缓存 vnode）和keys（缓存 key 列表）；
  2. 渲染时只缓存第一个子组件，通过组件名或 key 判断是否命中缓存；
  3. 命中缓存时直接复用组件实例，更新keys顺序（LRU 策略）；
  4. 超过max时移除最久未使用的缓存。

13. Vue 常见性能优化手段

• 编码层面：
  • 避免data中存储无关数据（减少响应式监听）；
  • v-for需加唯一key，避免与v-if连用；
  • 使用Object.freeze()冻结无需响应式的数据；
  • 拆分大型组件为小型组件，减少不必要的渲染；
  • 合理使用keep-alive缓存频繁切换的组件。
• 加载优化：
  • 路由懒加载（() => import('./page.vue')）；
  • 异步组件按需加载；
  • 第三方库按需导入（如babel-plugin-component）；
  • 图片懒加载（vue-lazyload）。
• 打包优化：
  • 使用 CDN 加载第三方依赖；
  • 拆分公共代码（splitChunks）；
  • 压缩代码（gzip）；
  • 减少sourceMap体积（生产环境使用cheap-module-source-map）。
• 体验优化：
  • 实现骨架屏（app-skeleton）；
  • 使用 PWA（serviceWorker）缓存资源；
  • 大型列表采用虚拟滚动（vue-virtual-scroll-list）。

14. Vue3.0 的主要改进

• 语言层面：采用 TypeScript 开发，增强类型校验；
• 响应式原理：用Proxy替代Object.defineProperty，支持监听数组索引、对象新增属性等；
• API 风格：新增Composition API（如setup、ref、reactive），更灵活地组织逻辑；
• 性能优化：
  • 虚拟 DOM 对比优化（只更新绑定动态数据的节点）；
  • 支持片段（Fragment），组件可返回多个根节点；
• 其他：优化生命周期（如beforeDestroy改为beforeUnmount）、新增Teleport（组件传送）等特性。

15. 实现 hash 路由和 history 路由

• hash 路由：
  • 基于 URL 中的#（如http://xxx.com/#/page），#后的内容不发送给服务器；
  • 监听onhashchange事件，根据location.hash变化切换路由。
• history 路由：
  • 基于 HTML5 的history API（pushState、replaceState），URL 无#；
  • 通过history.pushState修改 URL，监听popstate事件处理前进 / 后退；
  • 需服务端配合（所有路由指向同一个 HTML 文件，避免 404）。

16. Vue-Router 的导航守卫

1. 触发导航，调用失活组件的beforeRouteLeave；
2. 调用全局beforeEach；
3. 调用重用组件的beforeRouteUpdate（2.2+）；
4. 调用路由配置中的beforeEnter；
5. 解析异步路由组件；
6. 调用激活组件的beforeRouteEnter；
7. 调用全局beforeResolve（2.5+）；
8. 导航确认，调用全局afterEach；
9. 触发 DOM 更新；
10. 执行beforeRouteEnter中传给next的回调（组件实例创建后）。

17. Vuex 中 action 和 mutation 的区别

18. Vuex 工作原理

• 核心流程：
  1. 组件通过dispatch调用action；
  2. action执行异步操作后，通过commit调用mutation；
  3. mutation同步修改state；
  4. state变化后，触发组件重新渲染（通过getters或直接访问state）。
• 响应式原理：
  state被 Vue 实例的响应式系统包裹，修改时会自动通知依赖的组件更新。
• DevTools 集成：
  通过记录所有mutation的调用和状态变化，支持时间旅行（回溯状态）。