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

2024-01-03 19:49:12

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

文章来源:https://blog.csdn.net/qq_67358181/article/details/135370866
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。