刷题指南，简洁扼要

金九银十即将到来，求职套路多，面试指南分享！

近期在使用vue3做项目，虽然期间踩了无数的坑，但是皇天不负有心人，我终于成功将项目部署到了阿里云！

到了金九银十的时刻，这是一个难得的良机。

我将我近期研究总结的基础问题及解答列在下方，不完整的可以评论区补充。

资料总结/刷题指南

面试官：有使用过vue吗？说说你对vue的理解 | web前端面试 - 面试官系列

2022 最新 Vue 3.0 面试题_Resourceful!的博客-CSDN博客_vue3.0面试题

个人经验总结

1.vue是什么
是一个用于创建用户界面的开源JavaScript框架
是一个创建单页应用的Web应用框架
JavaScript前端框架，旨在更好地组织与简化Web开发
Vue所关注的核心是MVC模式中的视图层
方便地获取数据更新，并通过组件内部特定的方法实现视图与模型的交互

简单就是：

vue是创建用户页面的开源JavaScript框架，创建单组件应用的Web应用框架。旨在组织与简化Web开发。所关注的核心是视图层。vue的核心特性是MVVM，model-view-viewmodel,模型-视图-视图模型，模型层负责业务逻辑及和服务器端进行交互，视图层为HTML页面，视图模型层用来连接model和view，是他们之间的通信桥梁。

2.Vue核心特性
数据驱动（MVVM)  :Model-View-ViewModel
Model：模型层，负责处理业务逻辑以及和服务器端进行交互
View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

3.组件化
把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式
降低整个系统的耦合度，在保持接口不变的情况下，我们可以替换不同的组件快速完成需求
调试方便，由于整个系统是通过组件组合起来的，在出现问题的时候，可以用排除法直接移除组件，或者根据报错的组件快速定位问题。
提高可维护性，由于每个组件的职责单一，并且组件在系统中是被复用的，所以对代码进行优化可获得系统的整体升级

4.指令系统
指令 (Directives) 是带有 v- 前缀的特殊属性
当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
常用的指令
条件渲染指令 v-if
列表渲染指令v-for
属性绑定指令v-bind   :
事件绑定指令v-on    @
双向数据绑定指令v-model
总结
Vue所有的界面事件，都是只去操作数据的
Vue所有界面的变动，都是根据数据自动绑定出来的

5.Vue和React对比
react单向数据流，而Vue是双向数据流
react使用的是不可变数据，而Vue使用的是可变的数据
react中我们通过使用回调函数来进行通信的，而Vue中子组件向父组件传递消息有两种方式：事件和回调函数
react主要使用diff队列保存需要更新哪些DOM，得到patch树，再统一操作批量更新DOM。Vue 使用双向指针，边对比，边更新DOM

6.你对SPA单页面的理解，它的优缺点分别是什么？如何实现SPA应用呢?
什么是SPA?
单页面应用
一种网络应用程序或网站模型
通过动态重写当前页面来与用户交互

7.生命周期函数/钩子函数？
beforeCreated
created
beforeMounted
mounted
beforeUpdate
update
beforeDestroy
destroy

8.http状态码
403无权限
404找不到此接口
405方法不被允许
500 服务端错误
502 服务器无响应

9.你知道vue中key的原理吗
key指代唯一id，可以根据key更准确快速找到子节点

10.缓存keepAlive
v-if="$route.meta.keepAlive && isRouterAlive"
beforeRouteEnter(to, from, next) {
      if (!to.query.clear) {
        to.meta.keepAlive = true
      } else {
        if (to.query.clear == 'clear') {
          to.meta.keepAlive = false
        } else if (to.query.clear == 'noClear') {
          to.meta.keepAlive = true
        }
      }
      next((vm) => {
        //回到上次浏览位置
        if (from.meta.isScollTopPosition && from.meta.isScollTopPosition == 1) {
          vm.$nextTick(() => {
            document.getElementById("home_scheme_query").scrollTop = to.meta.scollTopPosition;
          })
        }
      });
    },
    beforeRouteLeave(to, from, next) {
      //保存页面浏览到的位置
      if (from.meta.keepAlive) {
        from.meta.scollTopPosition = document.getElementById("home_scheme_query").scrollTop;
      }
      next();
    },
//安卓回调方法
 window.callbackAddDevice = this.reload;

11.ES6

12.虚拟dom？，为什么需要虚拟DOM
提高渲染性能，提升用户体验
虚拟dom就是一个普通的js对象。
描述真实dom结构
dom很慢，哪怕一个div也会包含很多属性，同时真实DOM进行更新时过程很笨拙，虚拟DOM使用diff算法，可以很轻便的进行DOM的操作。

13.跨域
在vue.config.js文件中配置devServer实现代理转发，从而实现跨域
通过webpack为我们起一个本地服务器，它作为请求的代理对象转发请求至目标服务器，得到结果再转发给前端

14.Vue3.0的设计目标是？做了哪些优化
更小
更快
TypeScript支持
API设计一致性
提高自身可维护性
开放更多底层功能
一句话概述，就是更小更快更友好
 

寄语

提示：对于未来准备找工作或者正在找工作的小伙伴，你有什么想说的呢？欢迎写下你的想法。