您现在的位置是：首页 > 技术教程 正文

2024年前端最新面试题-vue3（持续更新中，2024.3.11更新）

admin 阅读： 2024-03-27
后台-插件-广告管理-内容页头部广告（手机）

文章目录

  • 前言
  • 正文
      • 什么是 MVVC
      • 什么是 MVVM
      • 什么是 SPA
      • 什么是SFC
      • 为什么 data 选项是一个函数
      • Vue 组件通讯（传值）有哪些方式
      • Vue 的生命周期方法有哪些
      • 如何理解 Vue 的单项数据流
      • 如何理解 Vue 的双向数据绑定
      • Vue3的响应式原理是什么
      • 介绍一下 Vue 的虚拟 DOM
      • 介绍一下 Vue 的 diff 算法
      • Vue中key的作用
      • 为什么列表操作中，操作数据建议传id，而不是索引
      • v-if 和 v-show 的区别
      • v-if 和 v-for 为什么不建议放在一起使用
      • 计算属性(computed) 和 方法(methods) 的区别
      • 计算属性(computed) 和 侦听器(watch) 的区别
      • Vue中如何监控某个属性值的变化
      • v-model 是如何实现的，语法糖实际是什么
      • Vuex是什么？
      • 什么情况下应该使用 Vuex？
      • 路由传值的方式有哪几种
      • $route 和 $router 的区别
      • 怎么定义 vue-router 的动态路由？怎么获取传过来的值
      • vue-router 有哪几种路由守卫
      • Vue.$nextTick
      • Vue 实例挂载过程中发生了什么
      • Vue 的模版编译原理
      • computed 和 watch 的区别
      • keep-alive 是什么
      • 什么是mixin，如何使用
      • 什么是插槽，如何使用
      • Vue 中的修饰符有哪些
      • $forceUpdate的原理
      • Vue Router中的常用路由模式和原理
      • 页面刷新后Vuex 状态丢失怎么解决
      • 关于 Vue SSR 的理解
      • 了解哪些 Vue 的性能优化方法
      • Vue3的新特性有哪些
      • createApp做了哪些事情
      • reactive和ref的区别是什么
      • Vue3和Vue2的区别
      • Vue3的新工具 vite 和 Webpack 有什么区别

前言

Vue 官推消息，Vue 2 将于 2023年12月31日 停止维护（EOL）。

Vue 2.0 发布于 2016 年，迄今为止已有7年时间。Vue 2.0 的发布是其成为主流框架过程中的一个重要里程碑。

然而随着 2020 年 9 月份发布的 Vue 3 及其生态系统的日渐成熟，Vue 2.0 也渐渐退出了我们的视线，众多开发者们也在逐渐向 Vue3 靠拢。

早在2023年初，众多公司的面试重点就已经开始向Vue3倾斜。

2024有跳槽打算的朋友，拿下Vue3是重中之重。

正文

什么是 MVVC

  • MVC全名是 Model View Controller,时模型 - 视图 - 控制器的缩写，一种软件设计典范。
    • Model(模型)：是用于处理应用程序数据逻辑部分。通常模型对象负责在数据库中存取数据。
    • View(视图)：是应用程序中处理数据显示的本分。通常视图是依据模型数据创建的。
    • Controller(控制器)：是应用程序处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

image.png

  • MVC的思想：一句话描述就是Controller负责将Model的数据用View显示出来，换句话说就是在Controller里面把Model的数据赋值给View。

什么是 MVVM

  • MVVM新增了VM类。
    • ViewModel层：做了两件事达到了数据的双向绑定，一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。 实现的方式时：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转换成后端的数据。实现的方式是：DOM事件监听。

image.png

  • MVVM与MVC最大的区别就是：实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再手动操作Dom元素来改变View的显示。 而是改变属性后该属性对应的View层显示会自动改变（对应Vue数据驱动的思想）
  • 整体看来，MVVM比MVC精简很多，不仅简化了业务与界面的依赖，还解决了数据频繁更新的问题，不用再用选择器操作DOM元素。因为在MVVM中，View不知道Model的存在，Model和ViewModel也察觉不到View，这种低耦合模式提高代码的可重用性。
  • 注意：Vue并没有完全遵循MVVM的思想，这一点官网自己也有声明。

image.png

  • 那么问题来了，为什么官方要说Vue没有完全遵循MVVM思想呢？
  • 严格的MVVVM要求View不能和Model直接通信，而Vue提供了$refs这个属性，让Model可以直接操作View，违反了这一规定，所以是Vue没有完全遵循MVVM。

什么是 SPA

  • 单页面应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个 HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
  • 一些应用在前端需要具有丰富的交互性、较深的会话和复杂的状态逻辑。Vue 不仅控制整个页面，还负责处理抓取新数据，并在无需重新加载的前提下处理页面切换。

什么是SFC

  • Vue 的单文件组件 (即 *.vue 文件，英文 Single-File Component，简称 SFC) 是一种特殊的文件格式，使我们能够将一个 Vue 组件的模板