面试 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 管理全局状态，实现父子组件之间的通信。