Vue面试题总结(简版下)

26. Vue-router的编程式导航有哪些方法？this.$router.pushthis.$router.replacethis.$router.go27. 导航守卫有哪三种？分别有什么作用全局路由守卫 组件路由守卫路由独享守卫作用是路由跳转前对路由进行判断,防止...

26. Vue-router的编程式导航有哪些方法？

	this.$router.push
	this.$router.replace
	this.$router.go

27. 导航守卫有哪三种？分别有什么作用

	全局路由守卫   
	组件路由守卫
	路由独享守卫
	作用是路由跳转前对路由进行判断,防止未登陆的用户跳转到其他页面去

28. 简述vuex中的常用属性

	1.state： 用来存储变量。
	2.mutations和actions： 用来执行回调函数从而更改状态的地方。actions可以进行异步操作。
	3.getters: 相当于组件中的计算属性。
	4.modules: 这个是对处理过后的状态进行分类。

29. Vuex中改变store状态值的方法是什么？为什么？

	使用mutation方法   
	因为在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。

30. 你用过哪些vue组件库？他们有什么优缺点

	轻量化    拥有众多丰富实用的业务组件    
	vant更多情况是适用移动商城的开发,如果项目是其他业务,或者产品的设计风格和vant不一样,则不太适用vant

31. Vue中如何获取dom元素？

	1.document.querySelectorAll
	2.document.querySelector

32. 使用过滤器实现字符串反转，请写出相应代码

	data: { info: "ABC" },
	methods: {
		reverseInfo: function () {
                		this.info = this.info.split("").reverse().join("")
		}
	}

33. 怎样创建和调用一个能插入自定义元素等内容的组件？

	在组件中使用slot

34. Vue中双向数据绑定是如何实现的？

	view	->	viewModel	->	Model
			<-				<-

35. 单页面应用和多页面应用区别及优缺点

	单页面：
	概念：只有一个html页面，所有跳转方式都是通过组件切换完成的。
	优点：页面之间跳转流畅、组件化开发、组件可复用、开发便捷、易维护。
	缺点：首屏加载较慢，加载整个项目中使用的css、js，SEO优化不好。
	多页面：
	概念：整个项目有多个html，所有跳转方式都是页面之间相互跳转的。
	优点：首屏加载较快，只加载本页所使用的的css、js，SEO优化较好。
	缺点：页面跳转较慢

36. vue组件中data为什么必须是一个函数？

	如果data是一个函数的话，这样每复用一次组件，就会返回一份新的data，
	类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。
	而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

37. vue如何打包上传至服务器？请详细描述其步骤？

	1、 修改本地项目文件index.js配置。
	2、 压缩项目文件。
	3、 上传压缩后的项目到服务器
	4、 解压项目并开启777权限
	5、 修改服务器里的一些配置
	6、 重启apche

38. vue全家桶都有什么

	vuex vue2.0 axios vue-cli vue-router

39. vue渲染时闪光白屏问题怎么解决

	在样式文件中或者style标签里写入【v-cloak】{displa：none ！import}

40. vue第一次页面加载会触发那几个钩子函数？

	beforeCreate, created, beforeMount, mounted 。

41. route和router的区别

	router为VueRouter的实例。
	$route可以从当前router跳转对象里面可以获取name、path、query、params等数据
	$router为VueRouter实例，想要导航到不同URL，则使用$router.push方法

42. 怎么定义vue-router的动态路由？怎么获取传过来的值

	在一个路由中设置多段“路径q参数”，对应的值都会设置到$router.params中

	this.$router.push({
	pach://
	query：{
	         key：1	
	}
	})
	var num = this.$route.query.key;

43. vue中的作用是什么

	keep-alive可以在组件切换时，保存其包裹的       组件的状态，使其不被销毁，防止多次渲染。
	其拥有两个独立的生命周期钩子函数 actived 和 deactived，使用keep-alive包裹的组件在切换时不会被销毁，而是缓存到内存中并执行 deactived 钩子函数，命中缓存渲染后会执行 actived 钩子函数。

44. vue与angular以及react的区别

	1. Angular 约束多，擅长复杂中后台场景和多人协作。（大型项目）
	2. Vue 灵活，适用于简单业务快速迭代。（小型）
	3. React 组件化设计的好，可以实现比较好的组件生态进行复用。（中型）

45. vue中的路由拦截器的作用

	关于axios的拦截器分为请求拦截器和响应拦截器两种。
	对特定的http请求或响应消息或请求头进行验证，拦截不合法的http交互以保证web环境的安全

46. axios的特点

	1、在浏览器中发送 XMLHttpRequests 请求；
	2、在 node.js 中发送 http请求；
	3、支持 Promise API；
	4、拦截请求和响应；
	5、转换请求和响应数据；
	6、自动转换 JSON 数据；
	7、客户端支持保护安全免受 XSRF 攻击；

47. vue和jQuery有什么区别

	jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。
	Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

48. MVVM和MVC的原理以及它们的区别

	MVVM
	view -> viewModel -> model
	     <-			  <-

	MVC
	用户 -> C控制台 -> M模型
	     <-   |    <-
	         V试图

49. vue懒加载

	vue懒加载也叫延迟加载，即在需要的时候进行加载，随用随载。
	可以根据功能划分为图片的懒加载和组件的懒加载。

50. axios七大特性

	1、在浏览器中发送 XMLHttpRequests 请求；
	2、在 node.js 中发送 http请求；
	3、基于 promise 的 HTTP 库，支持promise所有的API 
	4、拦截请求和响应；（修改请求数据，只能用在'PUT','POST'和'PATCH'这几个请求方法）
	5、转换请求和响应数据,响应回来的内容自动转换；
	6、自动转换 JSON 数据；
	7、客户端支持保护安全免受 XSRF 攻击；

51. promise中reject和catch处理上有什么区别

	reject是抛出异常是promise方法
	catch是处理异常是promise实际方法