网站建设质量保证,网上推广招聘,只有一个域名怎么建设网站,少儿编程课网课免费面试 Vue 框架八股文十问十答第一期 作者#xff1a;程序员小白条#xff0c;个人博客 相信看了本文后#xff0c;对你的面试是有一定帮助的#xff01;关注专栏后就能收到持续更新#xff01;
⭐点赞⭐收藏⭐不迷路#xff01;⭐
1#xff09;MVVM 的理解
MVVM (Mod…面试 Vue 框架八股文十问十答第一期 作者程序员小白条个人博客 相信看了本文后对你的面试是有一定帮助的关注专栏后就能收到持续更新
⭐点赞⭐收藏⭐不迷路⭐
1MVVM 的理解
MVVM (Model-View-ViewModel) 是一种软件架构模式旨在分离用户界面的开发View和业务逻辑/数据Model的开发。MVVM 中的 ViewModel 负责将 Model 中的数据转换成 View 可以直接渲染的形式同时也接收来自 View 的用户输入然后更新 Model 中的数据。这种分层的结构使得代码更易于维护和测试。
2Vue 和 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 处理路由。
3Vue2 和 Vue3 有哪些去区别
性能优化 Vue3 使用了 Proxy 替代 Object.defineProperty提高了性能。引入了编译时优化和Tree-Shaking等特性减小了包的体积。Composition API Vue3 引入了 Composition API提供更灵活的组件逻辑复用方式相较于 Vue2 的选项式 API 更具可维护性。Teleport Vue3 提供了 Teleport可以方便地在组件外部渲染组件内容解决了在某些情况下的样式问题。多个根节点 Vue3 放宽了对组件的渲染要求支持组件有多个根节点。
4SPA 的理解有什么优缺点
单页面应用SPA SPA 是一种 Web 应用程序或网站通过 Ajax 或 WebSockets 在用户与应用程序之间异步加载页面内容避免了整页刷新。优点 流畅的用户体验 由于只更新局部内容SPA 提供了更快的用户体验避免了页面刷新造成的闪烁。减少服务器负担 服务器只需提供数据而不用负责页面的渲染减轻了服务器的负担。前后端分离 前端和后端可以独立开发提高了项目的可维护性和可扩展性。 缺点 首屏加载慢 SPA 首次加载可能较慢因为需要加载整个应用程序的代码。SEO 难度较大 搜索引擎对于单页面应用的爬取和索引相对复杂需要额外的处理。资源占用 SPA 在运行过程中可能占用较多的内存对于一些资源有限的设备可能存在问题。
5SPA 和多页面有什么区别
SPASingle Page Application 整个应用只有一个 HTML 页面通过 JavaScript 动态更新页面内容通常使用 AJAX 获取数据。页面的切换不需要重新加载整个页面。多页面应用 包含多个独立的 HTML 页面每次用户点击链接时服务器都会返回一个新的页面。每个页面都是一个独立的文档通常会包含自己的样式和脚本。区别 加载方式 SPA 只加载一次 HTML 页面通过路由切换视图多页面应用每次点击链接都会加载新的 HTML 页面。性能 SPA 在切换页面时较快因为只加载局部内容多页面应用每次切换都需要重新加载整个页面。开发复杂度 SPA 开发相对复杂但有更好的用户体验多页面应用相对简单但可能有页面加载的延迟。
6Vue 的性能优化有哪些
使用虚拟 DOM Vue通过虚拟 DOM 进行 DOM 操作减少直接操作真实 DOM 的开销提高渲染效率。合理使用 v-if 和 v-show v-if 适用于在运行时条件不经常改变的情况而 v-show 更适用于频繁切换的情况。列表渲染优化 使用 v-for 时给每项元素设置唯一的 key可以帮助 Vue 更高效地更新 DOM。组件懒加载 使用 Vue 的异步组件和路由懒加载只在需要时加载组件减少首屏加载时间。图片懒加载 使用插件或自定义指令实现图片懒加载延迟加载图片提高页面加载速度。减少不必要的 Watcher 合理使用 computed 属性替代 watcher避免过多的数据监听。优化网络请求 合理使用缓存、CDN 加速减少请求次数提高页面加载速度。
7Vue 生命周期阐述一下
beforeCreate 实例刚在内存中被创建数据观测和事件配置之前。created 实例已经在内存中创建完成数据观测和事件配置已完成但尚未挂载到页面上。beforeMount 在挂载开始之前被调用相关的 render 函数首次被调用。mounted 实例已经挂载到页面上此时 DOM 元素可见。beforeUpdate 数据更新时调用发生在虚拟 DOM 重新渲染和打补丁之前。updated 数据更新后调用发生在虚拟 DOM 重新渲染和打补丁之后。beforeDestroy 实例销毁之前调用可以在这里进行一些清理工作。destroyed 实例销毁后调用此时 Vue 实例的所有指令、事件监听都被解绑。
8Vue 常用的属性、指令有哪些
属性 data定义数据。computed计算属性基于依赖进行缓存。methods定义方法。props用于接收父组件传递的数据。watch监听数据变化执行相应操作。 指令 v-bind动态绑定属性。v-model实现双向数据绑定。v-if、v-else、v-else-if条件渲染。v-for列表渲染。v-show根据条件展示或隐藏元素。v-on绑定事件监听器。v-else用于条件渲染中的“否”块。
9Computed 和 Watch 的区别
Computed 依赖于响应式数据只有相关依赖发生变化时才会重新计算。缓存计算结果只有依赖发生变化时才会重新计算。适用于计算一个新值的场景例如根据多个属性计算衍生属性。 Watch 更通用可以监听任何数据的变化。可以执行异步操作监听数据的变化并进行相应的处理。适用于对数据变化做出响应性操作如发起网络请求、操作 DOM。
10Vue 组件怎么实现父子通信
Props/子组件接收父组件数据 父组件通过 props 将数据传递给子组件。
!-- 父组件 --
templatechild-component :messageparentMessage/child-component
/templatescript
export default {data() {return {parentMessage: Hello from parent!};}
}
/script!-- 子组件 --
templatediv{{ message }}/div
/templatescript
export default {props: [message]
}
/script自定义事件/子组件向父组件通信 子组件通过 $emit 触发自定义事件父组件通过在子组件上监听这些事件来响应。
!-- 子组件 --
templatebutton clicksendMessageSend Message/button
/templatescript
export default {methods: {sendMessage() {this.$emit(message-sent, Hello from child!);}}
}
/script!-- 父组件 --
templatechild-component message-senthandleMessage/child-component
/templatescript
export default {methods: {handleMessage(message) {console.log(message); // Hello from child!}}
}
/scriptVuex/全局状态管理 使用 Vuex 管理全局状态实现父子组件之间的通信。
