面试 Vue 框架八股文十问十答第七期

面试 Vue 框架八股文十问十答第七期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1）Vue template 到 render 的过程

在Vue中，template会被编译成一个render函数。整个过程包括以下步骤：

• 模板编译： Vue通过模板编译器将template转换为渲染函数。
• 生成AST（抽象语法树）： 模板编译生成AST，表示模板的抽象语法结构。
• 生成render函数： 将AST转换为render函数，该函数返回VNode（虚拟DOM）。
• 渲染： 执行render函数，得到渲染的VNode。
• 补丁： 将新的VNode与旧的VNode进行对比，计算出最小的更新，然后将差异更新到真实DOM上。

2）Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗？

不一定。Vue使用响应式系统，当data中的某个属性发生改变时，Vue会触发视图更新。但实际的更新可能会受到一些因素的影响，比如DOM更新是异步的，Vue可能会在下一个事件循环中批量处理DOM更新，而不是立即同步执行。这种批量处理可以提高性能。

3）简述 mixin、extends 的覆盖逻辑

• Mixin： Mixin是一种重用Vue组件选项的方式。当组件使用Mixin时，Mixin的选项会与组件的选项进行合并。如果存在命名冲突，以组件的选项为准，Mixin的选项会被覆盖。
• Extends： Extends是一种通过基础组件扩展其他组件的方式。被扩展的组件可以访问基础组件的所有选项。如果有命名冲突，以扩展组件的选项为准，覆盖基础组件的选项。

4）描述下Vue自定义指令

Vue自定义指令是一种可以扩展Vue.js功能的灵活机制。自定义指令可以在DOM元素上添加特殊行为，比如改变样式、绑定事件等。自定义指令分为全局指令和局部指令。

• 全局指令： 使用Vue.directive方法定义，可以在整个应用中使用。
• 局部指令： 在组件的directives选项中定义，只在该组件中生效。

自定义指令包含一系列钩子函数，例如bind、inserted、update、componentUpdated和unbind等，用于处理指令的不同生命周期阶段。

5）子组件可以直接改变父组件的数据吗？

一般情况下，子组件不能直接改变父组件的数据。Vue的单向数据流原则要求子组件不能直接修改从父组件传递下来的props。如果需要修改父组件的数据，可以通过触发事件，由父组件捕获事件并修改数据。

父组件可以通过v-model实现双向绑定，允许子组件修改父组件通过v-model传递的数据。但仍然需要通过触发事件来实现双向绑定。

6）Vue是如何收集依赖的？

Vue使用响应式系统来实现数据的双向绑定，其中一个关键的部分是依赖收集。当一个数据被访问时，Vue会将当前组件的Watcher对象（观察者）添加到该数据的依赖列表中。当数据发生变化时，依赖列表的Watcher对象会收到通知，从而触发视图的更新。

Vue的依赖收集是通过getter和setter来实现的。当访问数据时，getter负责收集依赖，而当修改数据时，setter负责通知依赖进行更新。

7）对 React 和 Vue 的理解，它们的异同

• 相似之处：
  • 都是用于构建用户界面的JavaScript框架/库。
  • 提供了组件化的开发方式。
  • 都支持虚拟DOM，通过差异化算法提高DOM更新效率。
  • 都有响应式系统，能够实现数据驱动的视图更新。
• 不同之处：
  • 语法和模板： Vue使用模板语法，将HTML直接作为模板，而React使用JSX，将HTML嵌入JavaScript代码。
  • 数据绑定： Vue的双向数据绑定更直观，而React通常使用单向数据流。
  • 生态系统： React生态系统更庞大，有着更多的第三方库和工具。Vue生态系统相对轻量，但也越来越丰富。
  • 学习曲线： Vue通常被认为对初学者更友好，学习曲线相对较平滑。React的学习曲线可能会更陡峭一些。

8）Vue的优点

• 简单易学： Vue的语法直观且易于理解，对初学者友好。
• 灵活性： Vue提供了很好的灵活性，可以逐渐引入并使用，甚至可以只作为某一部分的解决方案。
• 组件化开发： Vue鼓励组件化开发，使得代码更易维护、复用和测试。
• 响应式数据绑定： Vue的响应式系统使得数据驱动视图变得简单，开发者无需手动操作DOM。
• 生态系统： Vue的生态系统逐渐壮大，有大量的插件和工具可供选择。

9）assets和static的区别

• assets： 存放需要经webpack处理的静态资源，如样式、图片等。这些资源在构建时会被webpack处理和打包。
• static： 存放不经webpack处理的静态资源。这些资源会被直接复制到输出目录（如dist）下，不会经过webpack的处理。

简而言之，assets是需要webpack处理的静态资源，而static是不需要webpack处理的静态资源。

10）delete和Vue.delete删除数组的区别

• JavaScript中的delete： delete是JavaScript语言中的操作符，用于删除对象的属性。但对于数组来说，使用delete删除元素后，数组的长度并不会发生变化，被删除的元素只是变为undefined。
• Vue.delete： Vue.delete是Vue.js提供的方法，用于在响应式对象上删除属性，特别是在删除数组元素时，确保能触发视图更新，并保持响应式。使用Vue.delete删除数组元素后，数组会触发视图更新，并且数组的长度会相应减少。这是为了确保Vue能够监听到数据的变化并进行响应式更新。

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐