备注

下述加理解的不用背理解就行

其他都必须问到说出原因

基础

为啥vue会火（理解）

随着这几年前端的快速发展，页面中需要实现的功能越来越复杂，DOM操作频繁，使用传统的jQuery库去频繁操作DOM时不仅消耗性能，而且各种DOM绑定后期维护时简直是一场噩梦，在开发大型项目时，模块的依赖问题变得非常复杂，还记得grunt年代时，一个html页面通过有十几个script标签，简直让人吐血，如果缺少组件化思想，后期项目会变的举步维艰，原来的grunt，gulp等工具虽然解决了前端工程中静态资源的压缩，合并，打包和es6编译等问题，但是模块依赖和组件化开发一直没有得到很好的解决，Vue在这个大背景下应运而生，凭借虚拟DOM减少了操作DOM时引起的页面回流和重绘，提升了性能，本身又是基于数据驱动和组件化思想开发，提供了非常简洁，易于理解的API，一经推出，便迅速走红。明白了这个背景，我们再来看Vue就能更好的理解了。

jquery和vue的区别

1-操作角度：通过MVVM思想将逻辑和UI分离，更方便展示数据
2-性能：通过虚拟DOM提升性能
3-模块化：方便开发
4-单页面应用：减轻服务器压力
5-组件复用：减少代码冗余，还可以使用别人的组件

vue发布时间（理解）

vue.js 2.x 最初发布2016年6月alpha.0
vue.js 1.x 最初发布2015年9月alpha.3

Alpha内测
Beta内测（比alpha消除了严重错误等 加入很多新功能）
rc候选版本（几乎不加新功能，主要除错）
release（最终版）

仓库地址：查看版本https://github.com/vuejs/vue

vue脚手架（理解）

- cli1 最初2015年12月（忽略）
- cli2 最初发布2016年4月				 yarn add vue-cli global
- cli3 最初发布2018年1月alpha.4        yarn add @vue/cli global
- cli4 最新（最初发布2019年5月alpha.0   yarn add @vue/cli global
- vue.config.js

Vue3.0快出了和vue2.0有哪些区别

#1部分命令发生了变化
    下载安装 npm install -g vue@cli
    删除了vue list
    创建项目 vue create
    启动项目 npm run serve

#2默认项目目录结构也发生了变化
    移除了配置文件目录，config 和 build 文件夹
    移除了 static 文件夹，新增 public 文件夹，并且 index.html 移动到 public 中
    在 src 文件夹中新增了 views 文件夹，用于分类 视图组件 和 公共组件

#3可视化界面
	找到项目，vue ui 命令会直接打开可视化界面，里面可以进行配置、依赖等操作

vue中v-if和v-show区别，如何选择？

v-if 控制DOM
v-show 控制样式

默认开大代码量大：v-if
切换少：v-if

mvvm框架是什么？它和其它框架（jquery）的区别是什么？哪些场景适合？

问：mvvm框架是什么？
答：MVVM是软件开发中的架构思想，在原有的模型、视图中间增加视图数据模型，从而更方便管理数据

问：它和其它框架（jquery）的区别是什么？
答：vue数据驱动，通过数据来显示视图层而不是节点操作。

问：哪些场景适合？
答：小项目十几个页面，用JQ方便。项目较大考虑到后期维护、性能等问题选择VUE

mvc和mvvm 的区别

MVC和MVVM都是开发中常见的架构思想
主要将C演变成VM从而解决MVC中大量的DOM操作使页面渲染性能降低，加载速度变慢，影响用户体验

vue的mixin用过吗简单说一下

作用：复用组件代码
应用：a组件用了过滤器 自定义指令 普通方法等，其他组件也需要  通过mixin复用导入即可

vue常用的修饰符？

.stop
.prevent
.capture
.self
.once
.passive

路由

单页面应用的好处

优点
1.提高用户体验度、快、切换内容不需要重新加载整个页面，减轻服务器压力
2.前后端分离便于后期扩展
3.转场动画，也就是一个页面切换另一个页面  transition
缺点
1. 不利于seo优化
2. 初次加载耗时（注：这时候可能问vue首屏加载慢如何解决 见优化部分答案）

或

概念：只有一个html页面，所以跳转的方式是组件之间的切换
优点：跳转流畅；组件化开发；组件可复用；开发便捷
缺点：首屏加载过慢；seo优化不好

多页面的好处

概念：有多个页面，跳转方式是页面之间的跳转
优点：首屏加载快；seo优化好
缺点：跳转较慢；相对复杂，没有实现前后端分离

简述你对SSR或BSR的理解

SSR服务器渲染：有利于SEO优化
BSR客户端渲染：不利于SEO优化

咱们前端如何实现多页面应用

Nuxt.js

###Nuxt.js原理
1、用户打开浏览器，输入网址请求到Node.js
2、部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据
3、Nuxt.js获取到数据后进行服务端渲染
4、Nuxt.js将html网页响应给浏览器

###Nuxt.js使用了哪些技术？
Nuxt.js使用Vue.js+webpack+Babel三大技术框架/组件

Babel 是一个js的转码器，负责将ES6的代码转成浏览器识别的ES5代码。

###Nuxt.js的特性有哪些？
基于 Vue.js 自动代码分层 服务端渲染 强大的路由功能，支持异步数据 静态文件服务 ES6/ES7 语法支持 打包和压缩 JS 和 CSS HTML头部标签管理 本地开发支持热加载 集成ESLint 支持各种样式预处理器： SASS、LESS、 Stylus等等

vue你之前做过spa类型的项目吗，怎么实现的？

!!!注：这种问题很多人会解释什么是SPA 你准备给面试官上课？
还是欺负面试官不懂技术  直接说 哪个项目用的 原理就行。

回答：
在xxxx后台项目使用等
然后单页面应用原理就是利用BOM API就行。

hash、history 模式区别

区别：地址栏多个#号
其次：history需要配置服务器才能正常访问

hash、history 模式原理

#hash路由
通过location.hash切换，通过window.onhashchange 监听切换
#history路由
通过history.pushState 切换,window.onpopstate 监听路径的切换

vue的css写在哪里？还有方式吗？

.vue组件中，
在assets目录下创建，然后导入

在JS中导入
import '@/assets/css/index.css'
在CSS中导入
@import "../static/css/user.css";

Vue按需加载里的 Import是命令还是方法？怎么理解

是方法，
ES6模块导入的语法其中一种。


component: () => import()

#语法1：导入整个模块的内容
import * as 变量名Obj from '路径及文件名.js';
#语法2：导入单个模块
import {变量名} from '路径及文件名.js';
#语法3：导入模块别名
import {变量名 as 别名} from '路径及文件名.js';
#语法4：仅仅导入（应用导入样式）
import '路径及文件名.js';
#语法5：导入模块（通过export default导出）
import 变量名 rom '路径及文件名.js';
#语法6：动态import
import( '路径及文件名.js');

vuex

你是怎么认识vuex的？vue子传父，兄弟组件如何传值

你是怎么认识vuex的？  换句话什么时候需要用vuex
发现组件之间要相互通信所以就换了vuex

vue子传父，兄弟组件如何传值：答案见下面

Vue之间的组件通信，怎么实现的

父子
步骤1：子接受数据   通过props:['变量名1',...,'变量名n']来接受数据
步骤2：父传递数据   必须在父组件调用子组件上通过 v-bind:props中的变量名="父data中的键"
子父
步骤1：子创建自定义事件   this.$emit(自定义事件名称， 数据1,...,数据n)
步骤2：父调用自定义事件 父在调用子组件上通过 @自定义事件名称="函数名"   你在父定义函数接受数据即可
兄弟
步骤1：创建所有组件共享数据中心   const eventBus = new Vue()
步骤2：传递数据   eventBus.$emit(自定义事件名称， 数据1,...,数据n)
步骤3：接受数据   eventBus.$on(自定义事件名称，处理函数)

vuex 的作用

实现所有组件相互通信，数据共享

vue工作流

通过state存储数据
然后在组件展示
接着通过action请求接口
通过mutation更新state数据
以此类推

vuex原理：

说工作流

vuex是什么？怎么使用？哪种功能场景使用它？

vuex是什么？：组件状态管理工具
怎么使用？（说工作流）
哪种功能场景使用它？：组件之间需要相互通信时，例如购物车购买数量、登录信息等

vuex几种状态

四种
state 仓库存数据
getter 派生出新数据
mutation更新数据
action异步请求获取数据操作mutation

双向绑定

vue中非响应式（换句话说，什么时候双向绑定失效/出问题）

1利用索引修改数组
2修改对象

https://blog.csdn.net/weixin_44889992/article/details/90228861

watch和computed的区别，watch可以替代computed吗，深度监听怎么写？

computed：有缓存，可以监控多个数据变化，键随意
watch：只能简单一个数据变化，键必须是模型名

不可以，因为computed有缓存 

深度监听：监听数组，数组中的对象属性发送改变监听不到解决如下
https://segmentfault.com/q/1010000018957536/a-1020000019101426

 watch:{
      params: {
        deep: true,
        handler: function (newVal,oldVal){
          this.getSetting(this.params);
          console.log("111")
        }
      }
    }

vue的双向数据绑定原理是什么

vue的双向数据绑定原理

通过JS Object构造函数的defineProperty()方法实现

钩子函数/生命周期

钩子函数：在指定场景下触发的函数，举例（模型修改beforeUpdate和updated等）
生命周期：指代码可用和不可用时间，举例（data模型模型数据 created）

vue 生命周期

vue的生命周期有哪些

vue生命周期，分别对应做什么。

vue生命周期，及其介绍，

vue中总共有8个
我以前在xxxx项目常用的有：created和mounted

为什么要有生命周期（问得好）

因为：VUE中MVVM思想、虚拟DOM等机制
所以：需要钩子函数/生命周期，从而方便开发、提升性能等
举例：需要mounted确保数据渲染完毕，才可以去获取DOM
	 需要destroyed来清除卸载组件的事件等

created 和 mounted 有什么区别

相同点：模型都已经初始化
不同点：mounted中配合nextTick可以确保页面已经渲染完毕  可以继续获取DOM

vue中mounted和updated这两个生命周期怎么运行的

mounted 页面首次渲染完毕时触发
updated 模型数据更新时候触发

接口（待添加）

如何拦截后台响应回来的数据，应用

用promise封装fetch fetch、axios区别

http状态码

登录存储技术

\1. axios怎么跳过第一个请求，直接请求第二个？

本地存储以及区别

后台cros跨域怎么实现的？请求头是什么？

拦截器怎么实现的？

axios是什么？怎么使用？描述使用它实现登录功能的流程？

什么是RESTful API？怎么使用?

请谈谈对http的理解

http请求头怎么设置传递的数据格式

prominse的三大特性

Asiox与fetch的区别

你用vue写登录注册的时候具体都做了那些登录注册怎么用vuex实现它

上线（待添加）

vue打包上线流程

vue周边如何实现node进程后台运行

git中如何解决代码冲突的问题

你们怎么解决 git提交的时候的冲突

优化（待添加）

vue首屏加载过慢如何解决

vue封装过哪些组件

如何实现页面。。。。。。的动画效果？

Keep-alive哪些地方用到***

如果用户恶意点击怎么处理（1-验证码，2-点击之后loading）

vue为什么不用id选择器去选择dom

怎么在vue获取dom元素
和keep-alive有关的生命周期

搜索如何输入多字只发送一次请求（函数防抖和节流

作用：频繁触发DOM事件的解决方案
应用：搜索完毕调用、滚动停止调用，手机号、邮箱验证输入检测等

防抖（原理）：事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时（英雄联盟回城）。
防抖（代码）：
var timer; 
function debounce(fn, delay) {
    clearTimeout(timer);
    timer = setTimeout(function(){
        fn();
    }, delay);
}


节流（原理）：一段时间内，只执行一次函数（英雄技能）。
节流（代码）：
var timer; 
function throttle(fn, delay) {
    if (timer) return;
    timer = setTimeout(function(){
        fn();
        clearTimeout(timer)
    }, delay);
}

UI框架（待添加）

element-ui的二次封装

对比（待添加）

vue和react的区别？

vue中为什么可以直接可以修改数据，直接渲染，而react中要用setstate

怎么优化vue和react项目？直接打包吗？

sass的用法好处

echart（待添加）

echart的使用步骤

前端自动化构建工具（待添加）

webpack有做过哪些配置

Webpack的优化

组件（待添加）

vue中怎么引入一个组建，全局使用。

其他

回流：重新布局重新布局（每个页面至少1次）

重绘：重新绘制影响元素外观、风格、不影响布局

优化：

最小化重绘：一个个设置样式，统一设置class 批量修改DOM：1-隐藏修改，2-虚拟DOM等避免触发同步布局事件对于复杂动画效果,使用绝对定位让其脱离文档流

最小化重绘：一个个设置样式，统一设置class
批量修改DOM：1-隐藏修改，2-虚拟DOM等
避免触发同步布局事件
对于复杂动画效果,使用绝对定位让其脱离文档流

vue总结03

备注

基础

路由