Vue前端面试题（高频）

 1.dom的重构和回流
（1）重构
当某一个DOM元素样式更改（位置没有变，只是样式更改），浏览器就会重新渲染这个元素
（2）回流
当DOM元素的结构或者位置发生改变（删除、增加、改变位置、改变大小…）都会引发回流。
所谓回流，就是浏览器抛弃原有计算的结构和样式，重新生成DOM渲染树或者计算DOM结构，非常消耗性能

2.条件渲染中v-show和v-if的异同点
同：都是绑定布尔值。值为true元素显示；false元素隐藏
异：1.v-show控制元素隐藏是利用css属性display:none
2.v-if控制元素隐藏是直接将这个节点从dom树上删除（显示时再插入节点）
3.v-show有更高的切换性能，适用于频繁切换状态的场景(使用场景)
4.当初始不渲染此元素且切换不频繁状态，v-if的性能更高(使用场景)

3.怎么劫持数据
（1）Vue2 （使用Object.defineProperty  es5Api）
当我们new Vue 传入一个data对象作为 数据， Vue会立即 遍历 data对象，并利用Object.defineProperty,劫持 data中的所有数据（将所有数据转换成getter和setter），每个实例 创建watcher(观察者)，监听依赖 就是 data中的数据， setter触发时候，立即 （notify）通知观察者 回调触发 调用 render，生成新的虚拟dom保存起来
（每一次更新时，生成新的虚拟dom和上一次 虚拟dom进行比较，利用diff算法得到代价最小方案更新真实dom）
（2）Vue3 （Proxy 代理  es6）
创建实例，使用Proxy 代理 实例数据， watcher依赖就是 data中数据（代理后），setter触发时候，立即 （notify）通知观察者 回调触发 调用 render，生成新的虚拟dom保存起来（每一次更新时，生成新的虚拟dom和上一次 虚拟dom进行比较，利用diff算法得到代价最小方案更新真实dom）

4.单向数据流（结合状态提升）
父子组件之间， 将所有业务状态提升到父组件中管理子组件 ，通过props 接收数据
单向数据流概念：
props必须是父传递给子组件，子组件是不能修改的
（漏洞： 传递 引用类型，只要不重新赋值 单向数据流不报警告）

5.Vue的生命周期（实例化创建到销毁的阶段）
概念：
组件从实例化到最终销毁的整个过程，在这个过程中 不同阶段，实例上会有不同 方法 自动触发，称这些方法 会生命周期 钩子函数
（1）初始化阶段
-1.实例创建
beforeCreate
实例未初始化，实例事件监听完成，定义好所有生命周期钩子函数
created
注入依赖
初始化组件上属性方法，处理数据响应式，完成后，实例上任一方法属性都可以使用（dom还不能获取）
-2.模板编译
beforeMount
生成虚拟dom（分析template解析，调用render生成虚拟dom）
mounted
将虚拟dom编译成真实dom，并挂载到页面上
（2）更新阶段
beforeUpdate
数据发生改变，beforeUpdate会立即触发（此时新的虚拟dom还没创建）
upDated
生成新虚拟dom和上一次虚拟dom比较更新真实dom，可以获取数据修改之后最新的dom
（3）销毁阶段
垃圾回收，当组件停止使用时，将组件实例从内存中移除
vue2
销毁之前 beforeDestroy
已经销毁 destroyed
vue3
销毁之前 beforeUnmount
已经销毁 unmounted

6.组件通信
父向子通信：
利用子组件定义props属性接受父组件传递的参数，父组件在子组件标签上定义传递的参数；
子向父通信：
子组件触发自定义事件，this.$emit(),父组件中监听子组件自定义事件触发；.........
兄弟组件通信：
兄弟1触发自定义事件，兄弟2监听
其他组件通信：
定义ref属性
利用ref获取子组件实例或者dom实例，template 给获取dom或者子组件实例 定义ref属性，获取 通过 this.$refs (保存就是 template利用ref 标记 dom实例或者 子组件实例)
依赖注入
父组件中 provide 向外暴露数据，子组件 inject 注入 父组件 暴露依赖

7.Vue传参
1.动态路由传参
2.query传参
        注意：
              优点：刷新后数据不丢失
              缺点：在地址栏显示
            query传参 参数是对象 query属性传递参数 
             可以通过path跳转指定页面 也可以通过name跳转指定页面
              推荐path(query是放在path后面 更语义)
3.params传参
        注意：
              优点：隐式传参 （不在地址栏显示）
              缺点：.参数刷新后丢失
          必须通过name跳转路由

8.简述一下vuex

Vue项目开发时使用的状态管理工具
vuex核心内容
state 
存放状态，在组建中this.store.state.参数名
mutations 
操作state数据，this.store.state.commit(‘方法名’,参数列表)
getters
加工state成员给外界，this.store.getters.方法名 
actions 
异步操作在actions中调用，this.store.getters.方法名 
modules 
模块化状态管理

9.使用vuex我刷新了一下页面数据怎么消失了，怎么才能让他不消失？

一般在登录成功的时候需要把用户信息，菜单信息放置vuex中，作为全局的共享数据。但是在页面刷新的时候vuex里的数据会重新初始化，导致数据丢失。因为vuex里的数据是保存在运行内存中的，当页面刷新时，页面会重新加载vue实例，vuex里面的数据就会被清空。

解决思路：
办法一：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）
办法二：在页面刷新的时候再次请求远程数据，使之动态更新vuex数据
办法三：在父页面向后台请求远程数据，并且在页面刷新前将vuex的数据先保存至sessionStorage（以防请求数据量过大页面加载时拿不到返回的数据）

10.说说项目中ESLint的重要性，有哪些作用
设置一些规范使得代码更规范和更易读，减少不必要的错误和隐患。

11.假如项目很大，有很多js文件，该怎么处理
-1.去掉多余的库
-2.路由懒加载
-3.开启服务端gzip压缩
-4.压缩js文件，用webpack.optimize.UglifyJsPlugin可以压缩js文件

12.vue双向绑定的原理
vue双向数据绑定原理，又称vue响应式原理，是vue的核心，双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。

13.虚拟dom是什么？
虚拟 DOM（Virtual DOM）本质上是JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象。

14.vue的双向数据原理
Vue数据双向绑定原理是通过数据劫持结合订阅发布模式的方式来实现的，首先是对数据进行监听，然后当监听的属性发生变化时则告诉订阅者是否要更新，若更新就会执行对应的更新函数从而更新视图 MVVM模式就是Model–View–ViewModel模式。 它实现了View的变动，自动反映在 ViewModel，反之亦然。

15.原生ajax和axios的区别
-1、axios是一个基于Promise的HTTP库，而ajax是对原生XHR的封装；
-2、ajax技术实现了局部数据的刷新，而axios实现了对ajax的封装。

16.Vue中常见的事件修饰符及其作用
.stop：阻止事件冒泡，相当于event.stopPropagation()
.prevent：取消预设行为，相当于event.preventDefault()
.capture：启用事件捕获（与冒泡相反，从外到内进行事件捕获）
.self：只有当前元素才能出发，即子元素无法触发
.once：事件只执行一次
.passive：与.prevent的作用相反，即不阻止默认行为，.passive 修饰符尤其能够提升移动端的性能。其实这等同于设置addEventListener的第三个属性passive。

17.vue钩子函数的应用场景

beforeCreate 做loading的一些渲染
created 结束loading，发送数据的请求，拿数据
mounted 可以对dom进行操作
updated 监听数据的更新
beforeDestroy 销毁非vue资源，防止内存泄漏，例如清除定时器
activated 当我们运用了组件缓存时，如果想每次切换都发送一次请求的话，需要把请求函数写在activated中，而写在created或mounted中，其只会在首次加载该组件的时候起到作用。

18.vue如何解决跨域问题
-1.使用的 axios 组件,npm i axios进行安装
-2.在main.js中引入axios，并在全局进行注册
-3.配置config文件，设置调用的接口域名和端口号（target）
changeOrigin：true表示实现跨域
pathRewrite：{
"^api":"/"
//这里用api代替target里面的地址，后面组件中调用接口直接用/api代替
}

19.vue-loader是什么？使用它的用途有哪些
vue-loader会解析文件，提取出每个语言块，如果有必要会通过其他loader处理，最后将他们组装成一个commonjs模块；module.exports出一个vue.js组件对象

20.computed与watch的区别
1.功能上：computed是计算属性，watch是监听一个值的变化，然后执行对应的回调。
2.是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，而watch在每次监听的值发生变化的时候都会执行回调。
3.是否调用return：computed中的函数必须要用return返回，watch中的函数不是必须要用return。
4.computed默认第一次加载的时候就开始监听；watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
5.使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。watch–当一条数据影响多条数据的时候，使用watch-----搜索框.

21.spa应用优缺点：
优点：
 1 实现了前后端分离，权责明确、开发效率高（避免前后端推诿，扯皮）
 2 网页切换速度快 （切换页面 网页无需重新加载 只需要 重新实例化一个路由组件即可）
缺点：
  不利于 seo (vue提供了ssr框架 nuxt)
(search engine optimization)搜索引擎优化
  首页加载较慢 （路由懒加载可以 适当提高首页打开速度）

22.说明一下插槽
默认插槽
子组件内部定义 slot组件 占位，父组件中 子组件使用双标签 传入 视图（自动在slot位置处渲染）
具名插槽
子组件中定义 多个 slot ，并定义name属性
注意：其中一个slot可以不定义name (默认值)，传入视图结构 多个结构块中 没有 定义 v-slot 指令 内容 默认渲染 默认值位置处，父组件 中定义 v-slot指令 指定传入不同 slot中（不定义v-slot内容会自动渲染在默认slot）
#是v-slot的简写
作用域插槽
只有默认插槽 （作用域插槽传值）
1 子组件中 slot组件定义自定义属性 传递数据  <slot :msg="msg" title="静态数据"></slot>2 父组件中 直接 给子组件标签定义 v-slot来接收  <child-page v-slot="data">    <div>      {{ data.msg }}      {{ data.title }}    </div>  </child-page>
注意：
  1 接受数据 有作用域只能在接收组件内部使用
  2 默认插槽 v-slot加给子组件标签
  3 具名插槽 每个都要定义 template嵌套内容 才能接收，
  给每个 template 定义v-slot接收

23..vue-router的路由模式有那些，如何实现
vue-router有3种路由模式：hash，history，adstract.默认是hash
hash模式
使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，其显示的网路路径中会有 “#” 号
history模式
美化后的hash模式，会去掉路径中的 “#”。依赖于Html5 的history，pushState API,所以要担心IE9以及一下的版本，感觉不用担心。并且还包括back、forward、go三个方法，对应浏览器的前进，后退，跳转操作。就是浏览器左上角的前进、后退等按钮进行的操作。
abstract模式
适用于所有JavaScript环境，例如服务器端使用Node.js。如果没有浏览器API，路由器将自动被强制进入此模式。

24.登录鉴权

25.vue数据修改视图不刷新，有哪些情况，怎么解决？
①数组 数组[下标]=值
  vue给每一个实例 添加了方法 $set
$set修改值后 自动调用render  
this.$set(原数组, 索引值, 需要赋的值)

② 直接修改数组的length属性
原因：Object.defineProperty的setter捕获不到 数组改变length属性
解决方案：不要直接修改length 要使用splice方法
③动态新增属性
某个实例 属性在初始化时 没有在data属性中定义初始值 后续通过代码动态添加的 
那么这个属性改变 视图不刷新（原因：请背诵mvvm原理）
要求：所有的数据，都要在data中定义 合理的初始值 (!!初始值不要给 空对象 和 null)
比如数组 初始值给[]
比如：对象{a:1,b:2,c:3 } 对象的初始值 如果对象中有属性 把属性加上（属性给初始值）

26.如何设置axios请求的默认配置