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

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

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

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

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

1）MVVM 的理解

MVVM (Model-View-ViewModel) 是一种软件架构模式，旨在分离用户界面的开发（View）和业务逻辑/数据（Model）的开发。MVVM 中的 ViewModel 负责将 Model 中的数据转换成 View 可以直接渲染的形式，同时也接收来自 View 的用户输入，然后更新 Model 中的数据。这种分层的结构使得代码更易于维护和测试。

2）Vue 和 React 的区别，有什么不同？

• 语法差异： Vue 使用模板语法，类似于 HTML，更容易理解和学习。React 使用 JSX，它是 JavaScript 的扩展语法，将 HTML 和 JavaScript 结合在一起。
• 数据绑定： Vue 使用双向数据绑定，通过 v-model 实现。React 采用了单向数据流，通过 props 和 state 进行数据传递。
• 组件通信： Vue 提供了简便的组件通信方式，如 props、自定义事件、provide/inject。React 使用 props 和回调函数进行组件通信。
• 生态系统： React 生态系统更庞大，拥有强大的状态管理库（Redux）、路由库（React Router）等。Vue 提供了 Vuex 进行状态管理，Vue Router 处理路由。

3）Vue2 和 Vue3 有哪些去区别？

• 性能优化： Vue3 使用了 Proxy 替代 Object.defineProperty，提高了性能。引入了编译时优化和Tree-Shaking等特性，减小了包的体积。
• Composition API： Vue3 引入了 Composition API，提供更灵活的组件逻辑复用方式，相较于 Vue2 的选项式 API 更具可维护性。
• Teleport： Vue3 提供了 Teleport，可以方便地在组件外部渲染组件内容，解决了在某些情况下的样式问题。
• 多个根节点： Vue3 放宽了对组件的渲染要求，支持组件有多个根节点。

4）SPA 的理解，有什么优缺点？

• 单页面应用（SPA）： SPA 是一种 Web 应用程序或网站，通过 Ajax 或 WebSockets 在用户与应用程序之间异步加载页面内容，避免了整页刷新。
• 优点：
  • 流畅的用户体验： 由于只更新局部内容，SPA 提供了更快的用户体验，避免了页面刷新造成的闪烁。
  • 减少服务器负担： 服务器只需提供数据，而不用负责页面的渲染，减轻了服务器的负担。
  • 前后端分离： 前端和后端可以独立开发，提高了项目的可维护性和可扩展性。
• 缺点：
  • 首屏加载慢： SPA 首次加载可能较慢，因为需要加载整个应用程序的代码。
  • SEO 难度较大： 搜索引擎对于单页面应用的爬取和索引相对复杂，需要额外的处理。
  • 资源占用： SPA 在运行过程中可能占用较多的内存，对于一些资源有限的设备可能存在问题。

5）SPA 和多页面有什么区别？

• SPA（Single Page Application）： 整个应用只有一个 HTML 页面，通过 JavaScript 动态更新页面内容，通常使用 AJAX 获取数据。页面的切换不需要重新加载整个页面。
• 多页面应用： 包含多个独立的 HTML 页面，每次用户点击链接时，服务器都会返回一个新的页面。每个页面都是一个独立的文档，通常会包含自己的样式和脚本。
• 区别：
  • 加载方式： SPA 只加载一次 HTML 页面，通过路由切换视图；多页面应用每次点击链接都会加载新的 HTML 页面。
  • 性能： SPA 在切换页面时较快，因为只加载局部内容；多页面应用每次切换都需要重新加载整个页面。
  • 开发复杂度： SPA 开发相对复杂，但有更好的用户体验；多页面应用相对简单，但可能有页面加载的延迟。

6）Vue 的性能优化有哪些？

• 使用虚拟 DOM： Vue通过虚拟 DOM 进行 DOM 操作，减少直接操作真实 DOM 的开销，提高渲染效率。
• 合理使用 v-if 和 v-show： v-if 适用于在运行时条件不经常改变的情况，而 v-show 更适用于频繁切换的情况。
• 列表渲染优化： 使用 v-for 时，给每项元素设置唯一的 key，可以帮助 Vue 更高效地更新 DOM。
• 组件懒加载： 使用 Vue 的异步组件和路由懒加载，只在需要时加载组件，减少首屏加载时间。
• 图片懒加载： 使用插件或自定义指令实现图片懒加载，延迟加载图片，提高页面加载速度。
• 减少不必要的 Watcher： 合理使用 computed 属性替代 watcher，避免过多的数据监听。
• 优化网络请求： 合理使用缓存、CDN 加速，减少请求次数，提高页面加载速度。

7）Vue 生命周期阐述一下

• beforeCreate： 实例刚在内存中被创建，数据观测和事件配置之前。
• created： 实例已经在内存中创建完成，数据观测和事件配置已完成，但尚未挂载到页面上。
• beforeMount： 在挂载开始之前被调用，相关的 render 函数首次被调用。
• mounted： 实例已经挂载到页面上，此时 DOM 元素可见。
• beforeUpdate： 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
• updated： 数据更新后调用，发生在虚拟 DOM 重新渲染和打补丁之后。
• beforeDestroy： 实例销毁之前调用，可以在这里进行一些清理工作。
• destroyed： 实例销毁后调用，此时 Vue 实例的所有指令、事件监听都被解绑。

8）Vue 常用的属性、指令有哪些？

• 属性：
  • data：定义数据。
  • computed：计算属性，基于依赖进行缓存。
  • methods：定义方法。
  • props：用于接收父组件传递的数据。
  • watch：监听数据变化执行相应操作。
• 指令：
  • v-bind：动态绑定属性。
  • v-model：实现双向数据绑定。
  • v-if、v-else、v-else-if：条件渲染。
  • v-for：列表渲染。
  • v-show：根据条件展示或隐藏元素。
  • v-on：绑定事件监听器。
  • v-else：用于条件渲染中的“否”块。

9）Computed 和 Watch 的区别

• Computed：
  • 依赖于响应式数据，只有相关依赖发生变化时才会重新计算。
  • 缓存计算结果，只有依赖发生变化时才会重新计算。
  • 适用于计算一个新值的场景，例如根据多个属性计算衍生属性。
• Watch：
  • 更通用，可以监听任何数据的变化。
  • 可以执行异步操作，监听数据的变化并进行相应的处理。
  • 适用于对数据变化做出响应性操作，如发起网络请求、操作 DOM。

10）Vue 组件怎么实现父子通信

• Props/子组件接收父组件数据： 父组件通过 props 将数据传递给子组件。

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  props: ['message']
}
</script>

• 自定义事件/子组件向父组件通信： 子组件通过 $emit 触发自定义事件，父组件通过在子组件上监听这些事件来响应。

<!-- 子组件 -->
<template>
  <button @click="sendMessage">Send Message</button>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('message-sent', 'Hello from child!');
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <child-component @message-sent="handleMessage"></child-component>
</template>

<script>
export default {
  methods: {
    handleMessage(message) {
      console.log(message); // 'Hello from child!'
    }
  }
}
</script>

• Vuex/全局状态管理： 使用 Vuex 管理全局状态，实现父子组件之间的通信。