vue基础面试题

1.简述MVVM和MVC

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

MVP：

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

2.简述虚拟DOM和diff算法

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

diff算法

优点：最终表现在DOM上的修改只是部分的变更，可以保证高效的渲染，提高网页的性能

缺点：首次渲染大量DOM时，由于多了一层虚拟DOM的计算，会比innerHtml慢一点

3.怎么创建vue的实例

 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 事件只能触发一次
    .keyup.enter 
    .keyup.space

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

区别：
1、当条件为真的时候 没有区别 当条件为假的时候 v-if是不创建元素 v-show 渲染元素然后隐藏掉
2、v-if更适合数据的筛选和初始渲染 v-show更适合元素的切换

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

绑定：
v-bind:属性名=“变量” ：属性名=“变量”

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

8.methods computed watch的区别

methods是没有缓存的，只要调用，就会执行

computed具有缓存性，依赖于属性值，只有属性发生改变的时候才会重新调用
watch没有缓存性 监听属性 属性值只要发生变化就会执行 可以利用他的特性做一些异步的操作

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

<标签 v-bind:class="{类名:变量}">

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

过滤器是实现变量的格式化输出 。过滤器分为局部过滤器还有全局过滤器
全局过滤器 是在多个实例中可以使用的过滤器
语法：
Vue.filter(“名”，function(value){
// value是调用过滤器的属性的值
})
调用：
在v-bind中或者{ { 属性|过滤器名}}
局部过滤器 只是在当前的组件或者实例中使用
filters:{
名：function(val){
}
}
注意：过滤器可以串联 但是后面的肯定是以前面的为基础

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(){}只调用一次， 指令与元素解绑时调用

16.v-clock有什么作用

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

17.组件特性及好处

特性：重用性，可指定性，互操作性，高内聚性，低耦合度

好处：组件可以拓展HTML元素、封装可重用代码

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提供给我们的一个组件，用来在路由切换的时候保存我们的组件状态

当我们在切换路由需要保存失活组件的状态的时候需要用到,比如我浏览淘宝滑动的中间位置，然后又去购物车页面，再回到首页的时候能够保存住我刚才滑动的位置

  1. 全局保存在App.vue中  把routerView保存起来

  2. 部分缓存  
       1、router.js中设置要缓存的页面
       {
                 path: '/child1',
                 name: 'Child1',
                 component: Child1,
                 meta:{
                      keepAlive:true
                 }
       }
       },
       2、用v-if来显示router-view是否在keep-alive中出现
       
            
        
       

24.生命周期共有几个？分别在什么时候使用？

1.创建

beforeCreate() 在执行这个钩子的时候 只有一些实例本身的事件和生命周期函数 用户自定义不能使用
created() 最早开始使用 data和methods中数据的钩子
2.挂载
beforeMount() 指令已经解析完毕 内存中已经生成dom数
mounted()dom已经渲染完毕 页面和内存的数据已经同步
3.更新
beforeUpdate() 当data的数据发生改变会执行这个钩子 内存中数据是新的 页面是旧的
updated() 内存和页面都是新的
4.销毁
beforeDestroy()即将销毁 data和methods中的数据此时还是可以使用的，可以做一些释放内存的操作
destroyed()已经销毁完毕

activated(组件激活时)：和上面的beforeDestroy和destroyed用法差不多，但是如果我们需要一个实例，在销毁后再次出现的话，用 beforeDestroy和destroyed的话，就太浪费性能了。实例被激活时使用，用于重复激活一个实例的时候

deactivated(组件未激活时)：实例没有被激活时。

errorCaptured(错误调用)：当捕获一个来自后代组件的错误时被调用

25.created和mounted区别

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

26、安装脚手架的步骤

 vue init webpack mypro  

 cd mypro 

 cnpm install 
 
 npm run dev  

27.为什么要使用脚手架

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

28.Vue-cli中如何使用sass

 cnpm install node-sass --save 
 cnpm install [email protected] --save 
 
 标签使用 
 

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目录中文件在打包的时候会进行打包压缩然后上传到打包好的目录
static目录中的文件直接拷贝到打包好的目录中 不会进行压缩

34.请写出嵌套路由的配置规则

 {
      path:"",
      name:"",
      compoent: ()=>{},
      children:[
           {
                子路由配置
           }
      ]
 }

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

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

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

路由钩子函数有三种分别为 全局守卫  单个路由守卫  组件内部守卫
全局守卫钩子 beforeEach
单个路由守卫  beforeEnter
组件内部守卫 
	beforeRouteEnter
	beforeRouteUpdate
	beforeRouteLeave
to 对象 去哪儿
from 对象 从哪来
next 函数  next()==next(true) 继续执行
		  不写next==next(false)终止执行
		  next(path)跳转

37.Vuex是什么？

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

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

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

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

state 存储数据   在组件中的使用  this.$store.state.属性名
mutations 直接操作state中的数据  在组件中的使用 this.$store.commit("方法名",参数)
actions 可以实现异步操作  在actions中操作mutations中的数据  在组件使用 this.$store.dispatch("方法名"，参数)
getters getters类似于计算属性可以对state中数据进行逻辑计算 在组件中 this.$store.getters.方法名
modules 将state分模块

40.详述Vuex运行机制

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

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

在vue的组件中通过dispatch来调用actions中的方法，在actions中通过commit来调用mutations中的方法，在mutations可以直接操作state中的数据，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"
 var instance=axios.create({
      baseUrl: "",
      timeout: 3000
 })

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

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

 主要有请求拦截器  请求发送出去之前拦截
 instance.interceptors.response.use(
 	config=>{
 	return config
 	}
 )
 响应拦截器  数据响应回来赋值之前拦截
 instance.interceptors.response.use(
 	res=>{
 		return res
 	}
 )

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);

按需引入

 import { 组件名 } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 Vue.use(组件名);

拓展

48.vm.$nextTick

参数：{Function}[callback]

用法：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。

this.nextTick(callback),当数据发生变化，更新后执行回调。

this.$nextTick(callback),当dom发生变化，更新后执行的回调。

49.在cnode社区遇到bug该怎么修复

fragment状态异常

错误原因：

activity已经不存在，还在commit，造成状态异常

commit(); commitallowstateslos();

错误发生处

OthersHomeActivity2 line438

MainActivity line156

BaseActivity onbackpressed

修复过程commit改为commitallowstateslos()