当前位置：首页 > news >正文

搜狐快速建站哈尔滨网站建设价格低

news 2025/9/3 7:29:01

搜狐快速建站,哈尔滨网站建设价格低,有没有找人做标书的网站,wordpress主题开发基础入门教程面试 Vue 框架八股文十问十答第一期作者：程序员小白条，个人博客相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！ ⭐点赞⭐收藏⭐不迷路！⭐ 1）MVVM 的理解 MVVM (Mod…

面试 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>