Vue面试题总结

1、简述MVVM和MVC

MVC:
Model（模型）
View（视图）
Controller（控制器）
简单的理解：视图请求数据，将请求发送至控制器，控制器再将请求发送给模型，模型去查找数据，找到之后传给控制器，控制器再传给视图进行渲染。

MVVM
Model 代表数据模型
View 代表UI视图
ViewModel 负责监听 Model 中数据的改变并且控制视图的更新(桥梁，可以理解成mvc中的控制器)
简单理解：视图请求数据，将请求发送至VModel，在Vmodel的两端具有监听机制，直接调用模型的数据，一端改变全部改变，利用数据劫持，结合订阅者和发布者模式，实现数据的双向绑定

++++++

2、简述虚拟DOM + diff算法

虚拟dom是利用js描述元素与元素的关系。
好处：可以快速渲染和高效更新元素，提高浏览器的性能

diff算法: 基础虚拟DOM完成节点更新的方法
1. 用js对象来表示真实的DOM树结构，创建一个虚拟DOM对象
2. 当数据发生改变的时候，创建一个新的js的虚拟DOM对象
3. 比较新旧对象的差异，记录下来，最终更新到真实的DOM树结构上。

3、怎么创建vue的实例

 ```js
 <div id="app"></div>
 new Vue({
      el: "#app",
      data:{
 ```

      },
      methods:{

      }
 })
 ```

4、列举常用指令以及作用
v-html 解析输出变量 能解析html
​ v-text 解析输出变量
​ v-bind 给标签绑定属性 可以简写为 :属性名=“变量”
​ v-on 给元素绑定事件 用法 v-on:事件名=“方法名” 可以简写为@事件名=“方法”
​ v-pre 跨过当前的标签不解析 用法 ：<标签 v-pre></标签>
​ v-cloak 解决差值表达式闪烁的问题
​ v-model 实现数据的双向绑定 只能适用于表单元素
​ v-for 可以循环遍历数据
​ v-if 条件输出
​ v-show条件输出

5、列举出常用的修饰符
.stop 阻止事件冒泡
.capture 设置事件捕获
.self 只有当事件作用在元素本身才会触发
.prevent 阻止默认事件，比如超链接跳转
.once 事件只能触发一次

    .native 触发js原生的事件
    .number 把文本框的内容转换为数字
    .trim  去除文本框左右空格

    .keyup.enter 
    .keyup.space

6、v-if和v-show的区别及使用场景

区别：
1、当条件为真的时候 没有区别 当条件为假的时候 v-if通过创建或删除DOM节点来实现元素的显示隐藏，v-show通过css中的display属性来控制
2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换

7、vue怎么绑定事件？以及常用的事件修饰符

绑定属性:
v-bind:属性名=“变量” ：属性名=“变量”
绑定事件.
语法：@事件名.修饰符=“方法名”
.stop 阻止事件冒泡
.capture -事件捕获
.self 只是监听触发改元素的事件
.once - 只触发一次
.prevent - 阻止默认事件

8、methods computed watch的区别
computed 具有缓存性，依赖于属性值，只有属性发生改变的时候才会重新调用
methods 是没有缓存的，只要调用，就会执行，一般结合事件来使用
watch 没有缓存性 监听data中的属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作

9、vue中怎么动态的绑定class样式

<标签 v-bind:class="{类名:条件变量或者条件表达式}">

10、什么是过滤器？怎么定义全局和局部过滤器

过滤器是实现变量的格式化输出 。过滤器分为局部过滤器还有全局过滤器
全局过滤器 是在多个实例中可以使用的过滤器
语法：
Vue.filter(“过滤器的名字”，function(value){
// value是调用过滤器的属性的值
})
调用：
在v-bind中或者{{ 属性|过滤器名}}

局部过滤器 只是在当前的组件或者实例中使用
filters:{
名：function(val){

}

}
注意：过滤器可以串联 但是后面的肯定是以前面的为基础
{{变量|过滤器1|过滤器2}}

11、自定义指令的语法是什么？请举例说明一个带参数的自定义指令怎么定义

 bind(){} 只调用一次，指令第一次绑定到元素时调用
 inserted(){} 被绑定元素插入父节点时调用
 update(){} 被绑定元素所在的模板更新时调用，而不论绑定值是否变化
 componentUpdated(){} 被绑定元素所在模板完成一次更新周期时调用
 unbind(){}只调用一次， 指令与元素解绑时调用

12、渐进式框架的理解

 Vue是一个MVVM的渐进式框架，，渐进式指的是先使用Vue的核心库，然后再根据需求逐渐增加所需要的插件，慢慢的组织成自己的项目，
 我们在使用过程中主张最小化，Vue没有强主张，插件使用比较灵活，也就是没有做职责之外的事。

13丶Vue中双向数据绑定是如何实现的
vue中的v-model可以实现双向绑定，其核心思想通过Object.definePropery来对Vue的数据进行数据劫持，
主要分为三部分
observer主要是负责对Vue数据进行数据劫持，使其数据拥有get和set方法
指令解析器负责绑定数据和指令，绑定试图更新方法
watcher负责数据监听，当数据发生改变通知订阅者，调用视图更新函数更新视图

14丶单页面应用和多页面应用区别及优缺点

单页面应用：
优点：跳转速度快
缺点：首屏加载慢
多页面应用：
有点：首屏加载快
缺点：跳转的效率不高

15丶自定义指令 有哪些钩子函数，及自定义指令的使用场景

bind(){} 只调用一次，指令第一次绑定到元素时调用
inserted(){}被绑定元素插入父节点时调用
update(){}被绑定元素所在的模板更新时调用，而不论绑定值是否变化
componentUpdated(){}被绑定元素所在模板完成一次更新周期时调用

unbind(){}只调用一次， 指令与元素解绑时调用

Vue.directive(‘txt’,{
bind(el,binding){
el.innerText = binding.value;
}
})

16丶v-clock有什么作用

   v-cloak 解决差值表达式闪烁的问题

17、组件特性及好处
1. 组件系统Vue中核心的特性之一，组件化可以让我们实现html代码块的结构重复利用
2. 组件化开发能大幅度提高应用开发效率、测试性、复用性
3. 组件数据通信遵循单项数据流，高内聚，低耦合。

 总的来说，组件可以让页面的结构更新清晰直观，业务逻辑关系更加明确，
 页面组件，功能组件，通用组件，可以在各个场景使用。

18、组件的基本组成

 vue组件主要包括3个部分：界面展示代码template、业务实现代码script、界面布局代码style

19、父传递子如何传递
（1）在父组件的子组件标签上绑定一个属性，挂载要传输的变量
（2）在子组件中通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用 props:[“属性名”] props:{属性名:数据类型}

20、子传递父如何传递

（1）在父组件的子组件标签上自定义一个事件，然后调用需要的方法
（2）在子组件的方法中通过 this.$emit("事件")来触发在父组件中定义的事件，数据是以参数的形式进行传递的

21、兄弟组件如何通信

      （1）在src中新建一个Bus.js的文件，然后导出一个空的vue实例
      （2）在传输数据的一方引入Bus.js  然后通过Bus.$emit(“事件名”,"参数")来来派发事件，数据是以$emit()的参数形式来传递
      （3）在接受的数据的一方 引入 Bus.js 然后通过 Bus.$on("事件名",(data)=>{data是接受的数据})

22、Props验证类型都有哪些

 Boolean 布尔类型
 String  字符串类型
 Number  数字类型
 Array  数组
 Function  方法
 Object 对象
 Symbol 

23、keep-alive是什么？

 keep-alive是Vue提供给我们一个内置组件，他可以用来保存我们路由切换时组件的状态

 组件使用keep-alive以后会新增两个生命周期 actived()  deactived(),
 我们在切换路由的时候，想保存组件的状态，比如列表页面进入详情，我们想保存列表滚动的位置，我们就可以使用keep-alive保存列表页面的滚动位置。

 怎么使用keep-alive，有两种方式，1. 路由配置  2. keep-alive参数

 1. 全局保存在App.vue中  <keep-alive>把<routerView/>包裹起来

 2. 路由定义方式 
      1、router.js中设置要缓存的页面

      ```js
           {
                path: '/child1',
                name: 'Child1',
                component: Child1,
                meta:{
                          keepAlive:true,//保存keep-alive状态
                }
           }
      ```
      2、用v-if来显示router-view是否在keep-alive中出现
      <keep-alive>
           <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive> 
      <router-view v-if="!$route.meta.keepAlive"></router-view>

 3. 使用keep-alive的标签属性，  include()  exclude()
      <keep-alive  inclue="list,detail"  ></keep-alive>
      include 包含标签名字被缓存 exclude 包含的标签不被缓存

      缓存名字组件中有个name属性进行定义即可  

24、生命周期共有几个？分别在什么时候使用？
1.创建beforeCreate() 创建前的阶段，这个时候data中的数据，还未定义，所以不能使用
created() 最早开始使用 data和methods中数据的钩子函数
2.挂载
beforeMount() 指令已经解析完毕内存中已经生成dom树，还没有渲染到本地
mounted() dom已经渲染完毕，最早可以操作DOM元素钩子函数
3.更新
beforeUpdate() 当data的数据发生改变会执行这个钩子 内存更新，但是DOM节点还未更新
updated() 数据更新完成以后触发的方法，DOM节点已经更新
4.销毁
beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
destroyed()已经销毁完毕

 keep-alive 方法
 actived()  组件加上keep-alive，进入组件触发的方法
 deactived  离开组件的时候触发的方法。
 errorCaptured() 组件内发生错误的时候的触发的方法

25、created和mounted区别

created()是最早使用data中数据的钩子函数
mounted()是最早可以操作dom元素的钩子函数

26、安装脚手架的步骤
node -v npm -v 检测node是否安装

 vue init webpack mypro   初始化vue的脚手架项目

 cd mypro  进入脚手架项目

 cnpm install  下载脚手架所需要的依赖
 
 npm run dev  启动项目  访问8080端口即可。

27、为什么要是用脚手架

 Vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架
 vue脚手架的作用是用来自动一键生成vue+webpack的项目模版，包括依赖库，免去你手动安装各种插件，寻找各种cdn并一个个引入的麻烦

28、Vue-cli中如何使用sass

 安装node-sass和sass-loader的方法
 cnpm install node-sass@4.14.1  --save 
 cnpm install sass-loader@7.3.1 --save 
 
 组件内的标签使用 

     <style lang="scss" scope> 
     .box{
          width: 100%;
          .header{
               line-height: 60px;
          }
     }
     </style>

 亲测可用

29、Vue-cli打包命令是什么？打包后会导致路径问题，应该在哪里修改（面试真题）

 npm run build -环境 -域名 -打包文件夹 -平台
 打包后会项目中生成一个dist文件夹

 在打包之前，需要将文件中config文件夹下的index.js中的 assetsPublicPath:"" 中的 / 改为 ./

30、Vue-router共有几种模式？默认是哪种？

 history模式  hash模式  默认  hash模式

31丶params和query的区别？

1.用法上的
 刚query要用path来引入，params要用name来引入，接收参数都是类似的，分别是this.$route.query.name和this.$route.params.name
 2.展示上的
 query更加类似于我们ajax中get传参，params则类似于post，说的再简单一点，前者在浏览器地址栏中显示参数，后者则不显示
 3.params是路由的一部分,必须要有。query是拼接在url后面的参数，没有也没关系

32、重定向用哪个属性？

 redirect属性

33、assets和static的区别（面试真题）

 assets目录中文件在打包的时候会进行打包压缩然后上传到打包好的目录，如果接口中的文件，不能放到assets中去。
 static目录中的文件直vue 接拷贝到打包好的目录中 不会进行压缩， 放第三方的json文件或者图片

34、请写出嵌套路由的配置规则
{
path:"",
name:"",
component: ()=>{},
children:[
{
path:"",
name:"",
compoent: ()=>{},
}
]
}

 访问的二级路由页面，挂载到一级路由的组件上，需要在一级路由上加上routerView组件标签，不然不显示二级页面

​
35、有列表页进入到详细页的思路

 1. 列表页面点击元素，传递id参数
 2. 详情页面通过query或者params获取id参数，通过id查询数据信息
 3. 渲染详情页面的数据信息

36丶路由钩子函数共有几种？分别是什么？参数to、from、next分别是什么意思？

 router.beforeEach() 全局路由守卫的钩子函数，可以写到main.js中
 beforeRouteEnter  进入组件之前触发方法
 beforeRouteUpdate  组件参数更新的时候触发
 beforeRouteLeave   离开组件的时候触发的钩子函数
 to 即将要进入页面的路由信息
 from 离开页面路由信息
 next 是否继续进入进入路由  next(false)阻止进入  next()继续进入路由地址

37、Vuex是什么？
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储和管理程序的所有组件的数据

38、Vuex有什么好处？及使用场景

 在大型的程序中如果多个组件中用到的数据我们可以存储到vuex,如果小型项目我们可以适当的使用vuex

39、介绍Vuex的核心概念及其作用

1、state 所有的数据都存储在state中 state是一个对象
2、mutations 可以直接操作state中的数据
3、actions 只能调用mutations的方法
4、getters 类似计算属性实现对state中的数据做一些逻辑性的操作
5、modules 将仓库分模块存储

40、详述Vuex运行机制

在组件中通过dispatch来调用actions中的方法在actions中通过commit来调用mutations中的方法，在mutations中可以直接操作state中的数据，state的数据只要一发生改变立马响应到组件中

41、vuex中如何异步修改数据（面试真题）

 通过dispatch调用actions中的方法，再通过commit提交调用mumations中的方法，修改state数据达到修改数据目的

42、axios安装步骤

 cnpm install axios --save 
 main.js 中配置
 import axios from "axios"
 Vue.prototype.$axios = axios;

43、axios常用的请求方式有哪些？

 get方法 ，post方法， all() 方法

44、简述axios并发请求

 axios我们可以通过all方法完成并发请求，
 在 .then中通过axios.spread拿到all中请求回来数据，在进行数据操作即可

45、Axios创建实例

 import  axios from "axios"

 axios.create({
      baseUrl: "",
      timeout: 3000
 })

46、简述拦截器是什么，共有几个拦截点，分别是什么

 拦截器axios发送出去请求或者数据响应回来之前进行数据的拦截或者过滤

 主要有请求拦截器  请求发送出去之前拦截
 响应拦截器  数据响应回来后触发

 比如页面loading效果结合拦截器+vuex完成。

47、Element UI 完整引入步骤及按需引入步骤是什么？

完整引入

 在 main.js 中写入以下内容：

 import Vue from 'vue';
 import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(ElementUI);

按需引入
1. 首先，安装 babel-plugin-component：

 npm install babel-plugin-component -D

 然后修改.babelrc文件  
 然后，将 .babelrc 修改为：

 {
   "presets": [["es2015", { "modules": false }]],
   "plugins": [
     [
       "component",
       {
         "libraryName": "element-ui",
         "styleLibraryName": "theme-chalk"
       }
     ]
   ]
 }
 接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：

 import Vue from 'vue';
 import { Button, Select } from 'element-ui';
 Vue.use(Button);
 Vue.use(Select);