文章目录

前言正文什么是 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.$nextTickVue 实例挂载过程中发生了什么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(控制器)：是应用程序处理用户交互的部分。通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

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

什么是 MVVM

MVVM新增了VM类。

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

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

那么问题来了，为什么官方要说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 组件的模板