2024 前端面试每日1小时
三日
概念30分
1. 如何理解Vue的模板编译原理
Vue的模板编译实际就是将模板字符串通过解析、优化和代码生成等步骤转换为渲染函数的过程。这个过程中，AST扮演了非常重要的角色，它用树形结构描述了模板的内容和结构，是编译过程的核心数据结构；同事，优化步骤可以提高后续渲染的性能，减少不必要的计算和比较；最后生成渲染函数实可以根据Vue实例的数据生成虚拟DOM，并最终渲染。
- 模板解析（Parse）：将模板字符串转换为抽象语法树（AST）；
- 优化（Optimize）：静态优化，标记无需更新的节点，提高后续渲染性能；
- 生成（Generate）：将优化后的AST转换为JS渲染函数；
- 生成渲染函数（Render）：将生成的JS字符串转换为可执行函数，可根据Vue数据生成虚拟DOM；
2. Vue的自定义指令
- 全局注册
Vue.directive('focus', { // 当被绑定的元素挂载到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }
})
- 局部注册
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的优势
- 性能更好
- 体积更小
- 更好的ts支持
- 更好的代码组织
- 更好的逻辑抽离
- 更多的新功能