vue面试题

vue框架的特点：

		双向绑定，虚拟DOM，数据驱动，组件化

vue指令：

	v-on v-bind v-if v-if-else v-show  v-model v-for v-html v-text

v-show和v-if的区别：

	v-show是通过display的none和block之间进行切换(dom不会再样式里销毁)
	v-if是通过条件判断是否显示隐藏
	多次要显示隐藏可以用v-show,一次可以使用v-if（dom会在样式里销毁）

vue全局API：

	component组件 
	nextTick获取最新数据 
	set设置 
	delete删除 
	directive自定义指令 
	filtër过滤器 
	use使用

vue组件传值：

	父传子通过自定义属性 比如：<one :val="username"/>
		username 在data中初始化
	子组件通过props['val']进行接受

	子传父通过自定义事件或者通过插槽 $on订阅 $emit发布
	
	子组件   自定义事件 
	<input type="button" value="点击触发" @click="childClick">
		 data () {
 			 return {
 	  			 childValue: '我是子组件的数据'
	  	}
	 },
	 
		methods: {
	 	  childClick () {
 	     // childByValue是在父组件on监听的方法
	    // 第二个参数this.childValue是需要传的值
	     this.$emit('childByValue', this.childValue)
  		 }
    }
	父组件接受
			 <!-- 引入子组件 定义一个on的方法监听子组件的状态-->
			 <child v-on:childByValue="childByValue"></child>
	
		data () {
  			return {
	   	     name: ''
 		 }
	 },
		methods: {
		  childByValue: function (childValue) {
   	 	// childValue就是子组件传过来的值
  	 	 this.name = childValue
 		 }
 	 }


	非父子传值通过创建一个VUE公共实列对象，或者Vuex进行传递

Vuex是数据储存的一个公共管理工具，有四个属性

	state:存储公共状态
	mutations:处理同步数据
	actions:处理异步数据
	getter:计算属性
	modules:模块，（可以看作是一个小vuex 里面有这个五个属性）

vue生命周期是一个实例从创建到销毁的过程

	1.挂载阶段
	beforeCreate:创建之前
	Created:创建之后
	beforeMount:挂载之前
	Mounted:挂载完毕
	
	2.运行更新
	beforeUpdate:更新之前
	Updated:更新之后
	
	3.销毁阶段
	beforeDestory:销毁之前
	destory:销毁之后

vue路由：根据不同的地址呈现不同的内容，单页面应用当中使用

	两种传值方式：动态路由params  和 query
	路由可以通过动态路由传值<a href="one/:id+/:name" >跳转</a>
	this.$route.params
	
	路由传值可以通过query,接受通过this.$route.query

路由守卫：

全局守卫：beforeEach 

局部守卫
beforeRouteEnter 进入路由前的守卫

		在当前路由钩子函不同是访问不到this的
		1、登陆的验证
		2、热力图
		3、权限校验
		4、消息通知 

	beforeRouteUpdate 路由更新时的守卫
		当路由发生改变的时候，而当前组件没有经历创建和销毁的时候我们就需要用到了

	beforeRouteUpdate.
		除此之外我们还可以通过watch来监听$route的变化也能达到同样的效果

	beforeRouteLeave 路由离开时的守卫
		1、未支付
		2、未保存
		3、答题系统
		4、退出登陆

路由守卫的参数

	to:到哪个路由
	from:从哪个路由来
	next：进入路由
	(to和from就相当于一个$route,这里面都是当前路由的信息)

路由配置项：

	path:用户请求的路径
	component:当path的路由匹配成功以后就会显示对于的组件
	children:路由嵌套 可以理解成它就是一个小型的routes 值是一个数组 数组中的每一个对象就是一个二级路由的配置项
    二级路由的配置项属性和一级的路由配置项属性是一致。注意path不要去加/
    name:命名路由
    meta:路由元信息 每个路由身上携带的信息
    props:路由解耦
    redirect:重定向

路由懒加载： 异步加载比同步加载快

	1、异步组件的方式
	`component:resolve=>require(["../pages/home/index.vue"],resolve)`
	2、ES6import方式
	component:()=>import("../pages/home/homeOne.vue")

前端路由和后端路由的区别：

	前端路由多用于单页面开发 SPA,是涉及不到数据库，用hash或者historyAPI来实现，一般用于展示不同的页面

单页面开发与多页面开发区别：

	优点：用户体验好，页面效果炫酷，前后端分离
	缺点：单页面加载慢，页面复杂性提高

单页面加载慢，白屏现象怎么解决：

	使用路由懒加载，骨屏架构加载，nuxt服务端渲染

axios:

	          基于promise的http库  可以在浏览器和node环境中使用
	特点：
	                1、支持promise的api
	                2、可以在浏览器环境中创建xmlHTTPrequest进行数据请求
	                3、可以在node环境中通过http进行数据请求
	                4、请求、响应数据的拦截
	                5、请求、响应数据的转换
            
	**拦截器**
    	当客户端的数据发送到服务端之前，以前服务端的数据响应到客户端之前的一次拦截

axiso 封装

	 1、下载  cnpm  install axios -S
	 2、建立一个http.js文件
	//http request 拦截器
	axios.interceptors.request.use(
	  config => {
	    // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
	    config.data = JSON.stringify(config.data);
	    config.headers = {
	      'Content-Type':'application/x-www-form-urlencoded'
	    }
	    // if(token){
	    //   config.params = {'token':token}
	    // }
	    return config;
	  },
	  error => {
	    return Promise.reject(err);
	  }
	);
	//http response 拦截器
	axios.interceptors.response.use(
	  response => {
	    if(response.data.errCode ==2){
	      router.push({
	        path:"/login",
	        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
	      })
	    }
	    return response;
	  },
	  error => {
	    return Promise.reject(error)
	  }
	)

自定义指令：Vue.directive

	      全局自定义指令：
	 Vue.directive
	      局部自定义指令：
	 directives
	 	语法：Vue.directive(指令名称，指令实现的函数)
	函数中的第一个参数：使用指令的DOM元素
        	 第二个参数：是一个对象modifiers代表修饰符，对象中value是表达式结果
         
	自定义指令必须要在实例化之前

vue中的过滤器如何使用

	 Vue.filter()
	     参数1：过滤器名称
	 参数2：过滤器实现的方法  该方法中有2个参数 
	           参数1为需要过滤的数据，
	           参数2为过滤器传递的参数

组件之间跳转的方法

	答：① 直接修改地址栏中的路由地址
	       ② 通过router-link实现跳转：
	    <router-link to="/myRegister">注册</router-link>
	       ③ 通过js的编程的方式：       
	   jumpToLogin: function () {
	 this.$router.push('/myLogin'); }

动态组件：keep-alive包裹的元素不会被销毁

	当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行

v-model 只能在from表单中应用

vue的双向绑定原理：

		实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监听器Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者Watcher 看是否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器Dep来专门收集这些订阅者，然后在监听器Observer和订阅者Watcher之间进行统一管理的

computed与watch的特点区别

		watch擅长处理的场景：一个数据影响多个数据         例如:网络请求 模糊查询 浏览器自适应 监控路由对象
	  computed擅长处理的场景：一个数据受多个数据影响          例如:商品购物车的结算  过滤某些商品数据