2024 前端面试每日1小时

三日

概念30分

1. 如何理解Vue的模板编译原理

Vue的模板编译实际就是将模板字符串通过解析、优化和代码生成等步骤转换为渲染函数的过程。这个过程中，AST扮演了非常重要的角色，它用树形结构描述了模板的内容和结构，是编译过程的核心数据结构；同事，优化步骤可以提高后续渲染的性能，减少不必要的计算和比较；最后生成渲染函数实可以根据Vue实例的数据生成虚拟DOM，并最终渲染。

• 模板解析（Parse）：将模板字符串转换为抽象语法树（AST）；
• 优化（Optimize）：静态优化，标记无需更新的节点，提高后续渲染性能；
• 生成（Generate）：将优化后的AST转换为JS渲染函数；
• 生成渲染函数（Render）：将生成的JS字符串转换为可执行函数，可根据Vue数据生成虚拟DOM；

2. Vue的自定义指令

1. 全局注册

Vue.directive('focus', {
     
  // 当被绑定的元素挂载到 DOM 中时……  
  inserted: function (el) {
     
    // 聚焦元素  
    el.focus()  
  }  
})

2. 局部注册

directives: {
     
  focus: {
     
    // 当被绑定的元素挂载到 DOM 中时……  
    inserted: function (el) {
     
      // 聚焦元素  
      el.focus()  
    }  
  }  
}

自定义指令钩子

• bind：只调用一次，指令第一次绑定到元素时调用；
• inserted：被绑元素插入父节点时调用；
• update：所在组件的VNode更新时调用
• componentUpdated：指令所在组件的VNode及其子VNode全部更新后调用；
• unbind：只调用一次；

注意事项：

• 自定义指令：专注于操作DOM，而不是更改数据或者处理复杂逻辑；
• 当与Vue的响应式系统交互时，要小心使用updated 钩子，可能会在一个元素的生命周期内多次调用；
• 如果需要在组件卸载时清理DOM操作，可使用 unbind

3. 对Vue的diff算法理解

vue的diff算法，也被称为“虚拟DOM差异算法”，是Vue实现高效DOM更新机制的核心部分。这个算法用于比较新旧两个虚拟DOM树，将差异应用到实际的DOM上，从而避免不必要的DOM操作，提高性能。

• 双端比较：同层节点比较；
• 深度优先遍历：先比较当前节点的子节点，再比较兄弟节点；
• key比较：key不同，则直接会创建一个新的DOM节点；
• 优化策略：同层比较、先头后尾、复用策略等；

二日

概念30分

1. Vue2和Vue3的区别

• 响应式：vue2使用的是Object.defineProperty()，vue3使用的是proxy；
• vue3全部由ts重构，对ts支持更友好；
• 自定义渲染器
• composition API
• vue3可以存在多个根节点，vue2只能有一个

1.1 Vue3相比较Vue2的优势

1. 性能更好
2. 体积更小
3. 更好的ts支持
4. 更好的代码组织
5. 更好的逻辑抽离
6. 更多的新功能

1.2 Vue3 升级了哪些重要功能

1. createAPP()
2. emits