最常见VUE面试题

一、vue父子组件之间的传值：

简单来说，子组件通过props方法接受父组件传来的值，子组件通过$emit方法来向父组件发送数据

二、vue生命周期函数：

Vue的生命周期
	从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程
	beforeCreate 创建前
	created    创建后
	beforeMount   挂载之前
	mounted   挂载完成
	beforeUpdate	数据更新之前
	updated   更新之后
	beforeDestroy   销毁前
	destroyed   销毁后

三、vue自定义指令：

1.创建局部指令
vue app = new Vue({
	el:'#app',
	data:{}
	创建指令（可以多个）
	directives:{
		//指令名称
		dirl:{
			inserted(el){
				//指令中第一个参数是当前使用指令的DOM	
				console.log(el)
				console.log(arguments)
				对DOM进行操作
				el.style.width = '200px',;
				el.style.height = '200px';
				el.style.background='#000';
			}
		}
	}
})
2.全局指令
Vue.directive('dir2',{
	inserted(el){
		console.log(el)
	}
})

3.指令的使用
<div id='app>
	<div v-dir1></div>
	<div v-dir2></div>
</div>

 四、MVVM定义：

MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心，它是连接view和model的桥梁。它有两个方向：一是将【模型】转化成【视图】，即将后端传递的数据转化成所看到的页面。实现的方式是：数据绑定。二是将【视图】转化成【模型】，即将所看到的页面转化成后端的数据。实现的方式是：DOM 事件监听。这两个方向都实现的，我们称之为数据的双向绑定。总结：在MVVM的框架下视图和模型是不能直接通信的。它们通过ViewModel来通信，ViewModel通常要实现一个observer观察者，当数据发生变化，ViewModel能够监听到数据的这种变化，然后通知到对应的视图做自动更新，而当用户操作视图，ViewModel也能监听到视图的变化，然后通知数据做改动，这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

五、vue中methods和computed有什么区别？应用场景如何？

1.methods：方法，函数，绑定事件调用；不会使用缓存
2.computed： 计算属性   本质是方法，使用时可以像属性一样使用，
当操作的值没有发生改变时，会使用缓存，当值发生改变，才会改变；提高速度

六、什么是js的冒泡？Vue中如何阻止冒泡事件？

js冒泡概念：当父元素内多级子元素绑定了同一个事件
，js会依次从内往外或者从外往内（？）执行每个元素的该事件，从而引发冒泡
    
    js解决冒泡：event.stopPropagation()
    vue解决冒泡： 事件.stop,例如：@click.stop="" ,@mouseover.stop=""

 七、什么是js的回调地狱？为什么会引发回调地狱？如何解决回调地狱问题

js的回调地狱：根据外层ajax请求的结果，将结果作为参数继续发起ajax请求
     --->引起回调地狱
    getA().then(res=>{
        getB(res.data.a).then(res=>{
	    getC(res.data.b).then(res=>{
               //....回调地狱
            })	
	})
    })
    
    Promise 对象就是为了解决这个问题而提出的。
    它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。 

  getA().then(res=>{
		return   getB(res.data.a)
}).then(res=>{
	//.....链式调用
})

 八、说说你对前后端分离的开发模式的理解

1.前端静态化
前端有且仅有静态内容,再明确些,只有HTML/CSS/JS. 
其内容来自于完全静态的资源而不需要任何后台技术进行动态化组装.
前端内容的运行环境和引擎完全基于浏览器本身.

2.后端数据化

后端可以用任何语言,技术和平台实现,但它们必须遵循一个原则
     :只提供数据,不提供任何和界面表现有关的内容.

3.平台无关化

前端3大技术本身就是平台无关的,而后台连接部分的本质是实现合适的Restful接口和交互Json数据,就这2者而言,
任何技术和平台都可以实现.

4.构架分离化

后端构架几乎可以基于任何语言和平台的任何解决方案,
大型构架方面, RestTful Api可以考虑负载均衡;而数据,
业务实现等可以考虑数据库优化和分布式 
但总而言之,前后端的分离 也实现了 前后端构架的分离.

九、 Vue 2 中给 data 中的对象属性添加一个新的属性时会发生什么？如何解决？

 视图并未刷新。这是因为在Vue实例创建时，新属性并未声明，因此就没有被Vue转换为响应式的属性，自然就不会触发视图的更新，这时就需要使用Vue的全局 api s e t ( ) ： ‘ t h i s . set()：`this.set()：‘this.set(this.obj, ‘new_property’, ‘new_value’)`

十、sass是什么？如何在vue中安装和使用？

1. 用npm安装加载程序（ sass-loader、 css-loader等加载程序)。
2. 在 webpack.config.js中配置sass加载程序。

十一 、vue 的 nextTick 方法的实现原理：

1. vue 用异步队列的方式来控制 DOM 更新和 nextTick 回调先后执行
2. microtask 因为其高优先级特性，能确保队列中的微任务在一次事件循环前被执行完毕

十二 、Vue 组件 data 为什么必须是函数 ? 

因为组件是可以复用的,JS 里对象是引用关系,如果组件 data 是一个对象,那么子组件中的 data 属性值会互相污染。
所以一个组件的 data 选项必须是一个函数,因此每个实例可以维护一份被返回对象的独立的拷贝。

十三、vue常用指令：

v-model 多用于表单元素实现双向数据绑定（同angular中的ng-model）
v-bind 动态绑定 作用： 及时对页面的数据进行更改
v-on:click 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面
v-for 格式： v-for=“字段名 in(of) 数组json” 循环数组或json(同angular中的ng-repeat)
v-show 显示内容 （同angular中的ng-show）
v-hide 隐藏内容（同angular中的ng-hide）
v-if 显示与隐藏 （dom元素的删除添加 同angular中的ng-if 默认值为false）
v-else-if 必须和v-if连用
v-else 必须和v-if连用 不能单独使用 否则报错 模板编译错误
v-text 解析文本
v-html 解析html标签
v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’
v-once 进入页面时 只渲染一次 不在进行渲染
v-cloak 防止闪烁
v-pre 把标签内部的元素原位输出

十四、keep-alive是什么？

如果需要在组件切换的时候，保存一些组件的状态防止多次渲染，就可以使用 keep-alive 组件包裹需要保存的组件。

两个重要属性，include 缓存组件名称，exclude 不需要缓存的组件名称。

十五、vuex的核心概念：

1. state => 基本数据
2. getters => 从基本数据派生的数据
3. mutations => 修改数据，同步
4. actions => 修改数据，异步 (Action 提交的是 mutation，而不是直接变更状态)
5. modules => 模块化Vuex

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

Vuex 是一个专为 Vue.js 应用程序开发的状态管理器，采用集中式存储管理应用的所有组件的状态，主要是为了多页面、多组件之间的通信。
Vuex有5个重要的属性，分别是 State、Getter、Mutation、Action、Module，由 view 层发起一个 Action 给 Mutation，在 Mutation 中修改状态，返回新的状态，通过 Getter暴露给 view层的组件或者页面，页面监测到状态改变于是更新页面。如果你的项目很简单，最好不要使用 Vuex，对于大型项目，Vuex 能够更好的帮助我们管理组件外部的状态，一般可以运用在购物车、登录状态、播放等场景中 

十七、vue-router路由的两种模式：

1. hash模式, 带#。如：http://localhost:8080/#/pageA。改变hash，浏览器本身不会有任何请求服务器动作的，但是页面状态和url已经关联起来了。
2. history模式，不带#， 如：http://localhost:8080/ 正常的而路径，并没有#。基于HTML5的 pushState、replaceState实现

十八、vue-router有哪几种导航钩子？

1. 全局导航钩子：router.beforeEach(to,from,next)
2. 组件内的钩子beforeRouteEnter (to, from, next) beforeRouteUpdate (to, from, next) beforeRouteLeave (to, from, next)
3. 单独路由独享组件 beforeEnter: (to, from, next)

十九、route和router的区别：

1. $route是“路由信息对象”，包括path，params，hash，query，fullPath，matched，name等路由信息参数。
2. $router是“路由实例”对象包括了路由的跳转方法，钩子函数等

二十、路由之间跳转的方式：

1. 声明式（标签跳转）
2. 编程式（ js跳转）