vue面试题整理（新人互喷）

vue和jquey对比

一个真实DOM 一个虚拟DOM
选取DOM对象，对其进行赋值、取值、事件绑定等操作
对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定

vue和react的区别

react整体的思路就是函数式，所以推崇纯组件，数据不可变，单向数据流，当然需要双向的地方也可以做到，比如结合redux-form，而vue是基于可变数据的，支持双向绑定。
react组件的扩展一般是通过高阶组件，而vue组件会使用mixin。vue内置了很多功能，而react做的很少，很多都是由社区来完成的，vue追求的是开发的简单，而react更在乎方式是否正确。

vue的优点

1.轻量级框架
2.简单易学
3.双向数据绑定
4.组件化
5.视图 数据 结构分离
6.虚拟DOM
7.运行速度快

vue的生命周期

beforeCreate
created
beforeMounte
mounted
beforeUpdate
updated
beforeDestroy
destroyed

使用keep-alive使用钩子函数

当在这些组件之间切换的时候，想保持这么组建的状态，以避免反复渲染导致的性能问题
created()、mounted()都只会触发一次。但是activated每一次进入组件都会触发，退出deactivated

原理：在 created 的时候，将需要缓存的虚拟 DOM 节点放到 cache 中，在 reader 的时候根据 name 再进行取出

什么是 MVVM？与 MVC 的区别

视图（View）：用户界面。
控制器（ViewModel）：业务逻辑
模型（Model）：数据保存
MVVM 主要是解决 MVC 的反馈不即使的问题。
基本上与 MVP 模式完全一致，唯一的区别是，它采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel

为什么 model层数据更改的时候，vm就可以知道数据发生变化了呢？（vue的mvvm框架的双向数据绑定的原理是什么？

解答一：vue在创建vm的时候，会将数据配置在实例当中，然后通过Object.defineProperty,为数据动态的添加了getter与setter方法，当获取数据的时候，就会触发getter方法，当我们设置数据的时候，就会触发其自身的setter方法，从而进一步触发vm的watcher方法，然后数据更改，变会触发视图更新操作。
解答二：vue中通过数据劫持&订阅发布模式： 通过Object.defineProperty对所有的数据进行了数据劫持，就是为该数据动态添加了getter与setter方法，在数据变化的时候发布消息给订阅者，触发响应的监听回调。

axios 是什么？

axios 主要是用来向后台发送请求。支持promise
请求方式：get post delete put patch
axios 支持并发请求，可以同时请求多个接口
　　axios 提供了拦截器。
　　axios 可以防止 跨站请求伪造。也就是钓鱼网站

特征：

1.从浏览器中创建 XMLHttpRequest
2.支持 Promise API
3.客户端支持防止CSRF
4.提供了一些并发请求的接口（重要，方便了很多的操作）
5.从 node.js 创建 http 请求
6.拦截请求和响应
7.转换请求和响应数据
8.取消请求
9.自动转换JSON数据

axios 拦截器：

.interceptors.request.use(config=>{
interceptors.response.use(res=>{
request 请求拦截：发送请求前统一处理。例如：设置请求头 headers
response 相应拦截：是根据响应的代码来进行下一步的操作。例如：由于当前的 token 过期，接口返回 401 未授权。那么我们就要跳转到登陆界面

拦截器封装：

在axios文件夹里新建api.js和request.js，api.js用于写接口，对axios的封装写在request.js里，在api.js 在这里面引用拦截器，对接头统一管理(post请求参数放在data里面，get请求参数放在params里)

request.js文件 封装拦截器 在新建一个api.js 在这里面引用拦截器，对接头统一管理

vue 的指令用法

v-if　　 条件渲染指令
　　v-bind　 绑定属性指令
　　v-on　　监听事件指令
　　v-for　　循环渲染指令
v-text　　渲染文本
Vue.directive()自定义指令

spa 单页面应用

指的是根据检测地址栏的变化将对应的路由组建进行切换
也就是说，一个项目里面只有一个完整的 HTML 页面。其余的都是 HTML 组件，页面之间跳转刷新，都是组件之间切换，减少了 http 请求的发送，提高了用户体验

原理:

js 感知到 url 的变化，通过这一点，可以用 js 动态的将当前页面内容清除，然后将下一个页面的内容挂载到当前页面上，这个时候路由不是后端做，而是前端完成，判断到底是显示哪个页面，清除不需要的，显示需要的，这个过程就是单页面应用。

优点：

良好的交互体验、良好的前后端工作分离模式、减轻服务器的压力、公用一套后端程序代码
缺点：SEO 难度较大、页面上不能进行前进后退管理、初次加载耗时多
解决：路由懒加载 图片懒加载 下拉加载 nuxt服务器渲染等
nuxt服务器渲染 前端拿数据使用数据渲染 后端用数据拼接HTML代码直接返回到前端

SEO优化：

服务端渲染ssr、有预渲染prerender、google抓AJAX、静态化

vue 之间的通信

父子：子组件用 props，接受父组件传递过来的值
子父：父组件生命一条数据，再写一个改变自身的方法，传递给子组件，然后把子组件添加到点击事件上 this.$emit()
　　兄弟之间传值：
ref 链：父组件要给子组件传值，在子组件上定义一个 ref 属性，这样通过父组件的 $refs 属性就可以获取子组件的值了，也可以进行父子，兄弟之间的传值
even.bus 事件总线：简单的场景下，使用一个 空的 VUE 实例作为事件总线，可以实现兄弟之间的通信。

slot 是什么？如何使用？

插槽：具名插槽、匿名插槽、作用域插槽
　　在引用子组件开始标签和结束标签之间，插入一个任意一个元素，用 slot 标签包裹一下，在父组件调用子组件的时候，这个插槽就会插入到子组件对应的具名插槽的位置。slot 有一个 name 属性，加 name 属性就是具名插槽，不加就是匿名插槽。

导航钩子就是 vue 中路由 vue-router

分类：
router.beforeEach 在路由切换开始的时候调用 （后台管理，权限的跳转，拿本地储存的用户信息的权限，进行跳转 if(){next(跳转路径)}）
router.rafterEach 在路由切换离开的时候调用
局部到单个路由
beforeEnter
组件的钩子函数
beforeRouterEnter
beforeRouterUpdata
beforeRouteLeave
三个参数：
to 即将进入的目标对象
from 导航要离开的导航对象
next 是一个函数，调用 resolve 执行下一步

VUE 中如何封装组件？什么组件，为什么要封装组件？

封装
首先，使用Vue.extend()创建一个组件
然后，使用Vue.component()方法注册组件
接着，如果子组件需要数据，可以在props中接受定义
最后，子组件修改好数据之后，想把数据传递给父组件，可以使用emit()方法
为什么要封装组件？
　　 主要就是为了解耦，提高代码复用率。
　　什么是组件？
　　页面上可以复用的都称之为组件
　　它是 HTML、CSS、JS 的聚合体。
　　组件就相当于库，把一些能在项目里或者不同项目里可以复用的代码进行需求性的封装。

组件中的data必须是一个函数，为什么？

一个组件中data必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝，也就是说让每一个组件的实例用到的都是唯一的独立的数据。

模块化开发

一个模块就是实现特定功能的文件
好处：
　　　　1、避免了变量污染，命名冲突
　　　　2、提高代码复用率
　　　　3、提高维护性
　　　　4、依赖关系的管理

vue 防抖和节流

防抖：（定时器）当持续触发某事件时，一定时间间隔内没有再触发事件时，事件处理函数才会执行一次，如果设定的时间间隔到来之前，又一次触发了事件，就重新开始延时。
节流：当持续触发事件时，有规律的每隔一个时间间隔执行一次事件处理函数。

Vue中的scoped及穿透方法

在vue文件中的style标签上，有一个特殊的属性：scoped。当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。通过该属性，可以使得组件之间的样式不互相污染。如果一个项目中的所有style标签全部加上了scoped，相当于实现了样式的模块化。
原理：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性，
穿透scoped：引用了第三方组件，需要在组件中局部修改第三方组件的样式，而又不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊的方式，穿透scoped。
方法：通过 >>> 可以使得在使用scoped属性的情况下，穿透scoped，修改其他组件的值。（sass和less的样式穿透/deep/）
曲线救国 ，写两个style 一个全局的style标签，一个含有作用域的style标签：

通过在外层dom上添加唯一的class来区分不同组件

v-if / v-show 区别？

v-if 元素插入、移除dom
v-show 通过display样式切换
v-else只能与v-if搭配使用
template标签嵌套的话只能使用v-if

为什么避免v-if和v-for用在一起

v-if过滤的话，我们完全可以通过计算属性修改v-for循环的数组或对象
v-for的优先级高于v-if，页面渲染出来，我们再通过v-if的方式隐藏，这样资源浪费，不在一起使用可以避免渲染本该被隐藏的那些dom
虚拟dom key

compute和watch

watch和computed都是以Vue的依赖追踪机制为基础的
methods里面定义的函数，是需要主动调用的，而和watch和computed相关的函数，会自动调用

Computed: 可以关联多个实时计算的对象，当这些对象中的其中一个改变时都会出发这个属性。
Watch：当你需要在数据变化响应时，执行异步操作，或高性能消耗的操作，自定义 watcher 的方式就会很有帮助。

1.watch擅长处理的场景：一个数据影响多个数据
2.computed擅长处理的场景：一个数据受多个数据影响

根据现有数据的变化生成一个新的数据，并且两者会产生关联，建立永久性缓存。当无关数据变化的时候，他不会重新计算，而是直接从缓存里面取值
跟watch区别： watch监听依赖是单个的，他每次监听只能监听一个变量的变化。

vuex

vuex 是一个专门为 vue 构建的状态管理工具，主要是为了解决 多组间之间状态共享问题。强调的是集中式管理，（组件与组件之间的关系变成了组件与仓库之间的关系）

vuex 的核心包括:

state（存放状态）、
mutations（更改状态）、
actions（发送异步请求，拿数据） 在组件中使用是$store.dispath(’’)分发 使用commit调用mutations
getters（根据现有状态生成新的状态）、
modules（模块划分）

state 发布一条新的数据，在 getters 里面根据状态派发新的状态，actions 发送异步请求获取数据，然后在 mutations 里面同步的更改数据（对数据更改）

vuex+本地储存 实现状态持久化

组件使用数据且通过异步动作更改数据的一系列事情：
1.生成store,设置state
2.在根实例中注入store
3.组件通过计算属性或者mapState来使用状态
4.用户产生操作，调用actions的方法，然后进行异步动作
5.异步动作之后，通过commit调用mutations的方法
6.mutations方法被调用后，更改state
7.state中的数据更新之后，计算属性重新执行来更改在页面中使用的状态
8.组件状态被更改…创建新的虚拟dom…
9.组件的模板更新之后重新渲染在dom中
swiper 插件从后台获取数据没有问题，css 代码啥的也没有问题，但是图片没动，怎么解决。
　　主要是因为 swiper 提前初始化了 ，但是数据还没有完全出来。
　　this.$nextTick() 主要作用就是等数据改变引发 DOM 重新渲染完成之后才会执行。

vur-router

路由模式：
hash：这个模式检测到 url 地址栏 # 后面的路径标识符的更改，从而触发浏览器的 hashchange 事件，然后通过 location.hash 得到当前的路径标识符，在进行路由跳转操作。
history：这个模式会直接改变 url 地址，需要后端给我们配置

路由跳转、两种方式：router-link to this.$router.push()

active-class 是哪个组件的属性
　　vue-router 模块提供的 router-link 组件的属性
　　在 vue-router 中要使用 active-class 有两种方式
　　　　1、直接在路由 js 文件中配置 linkActiveClass
　　　　2、在 router-link 中写入 active-class

VUE 路由之间的传值

动态路径参数
to=“sada/id”
router-link传参
　　使用name来确定匹配的路由，通过params来传递参数 this.$route使用path来匹配路由，然后通过query来传递参数编程式使用$router.push 拼接参数传参