vue面试学习总结

vue面试总结

1、v-if和v-show区别

		v-if 创建、删除 （没有创建元素）
		v-show 显示 、隐藏 (有元素存在)
		v-if 是真正的条件渲染，因为它会确保在条件切换过程中条件快内的事件监听器和子组件适当地被销毁和重建
		v-if也是惰性的，如果在初始条件渲染为假，则什么都不做，一直到条件为真时，开始执行渲染
        相比之下，v-show 就简单多了，不管初始条件是什么 元素总是被渲染 并且只是简单地基于css进行切换
        一般来说 v-if 有更高的切换开销 而v-show有更高的初始渲染开销。
        因此 如果需要非常频繁地切换则使用v-show较好
         如果在运行时条件不太可能改变 则使用v-if较好

2、如何让CSS只在当前组件中起作用

		将当前组件的style 修改为<style scope></style>
		scss、stylus 的扩展
		下载scss: npm install sass-loader node-sass --save
		使用：<style lang='scss' scope></style>
		样式穿透写法：
   			 父元素 /deep/ 子元素 或者  
   			 父元素 >>> 子元素 

3 v-modle的使用,标签如何绑定事件
```

可以实现双向绑定 在input 或者 select 或者文本域配合value使用
v-on:click 或者 @click 
在移动端click有300ms延迟的问题 解决这个问题可以引入fastClic
下载 :npm install fastClick 
引入:import FastClick from 'fastClick' 
FastClick.attach(document.body)

```		

4 vue-loader 是什么 使用它的用途有哪些?

 .vue文件的一个加载器 用途:js可以写es6 style样式 scss等

5 NextTick是做什么的

说明:$nextTick是在下次dom 更新循环结束之后 执行延迟回调，在修改数据之后使用$nextTick则可以在回调获取更新后的DOM
场景:需要在视图更新之后，基于新的视图进行操作

6 脚手架组件data为什么必须是函数

  vue使用两种方式: (1) 不用脚手架 vue.js ;(2)使用脚手架
因为JS本省的特性带来的，如果data是一个对象，那么由于对象本身属于引用类型，当我修改其中的一个属性时，
会影响到所有Vue实例的数据。如果将data作为一个函数返回对象，那么每一个实例的data属性都是独立的，不会相互影响。

7 vuex是什么？怎么使用？哪种场景使用它?

vuex是一个专门为vue构建的状态集管理
主要是为了解决组件间状态共享的问题
强调的是集中式管理，适合做大型项目
vuex的核心对象：state mutations getters actions modules

8 导航钩子函数有哪些?有哪些参数?

导航钩子翻译过来就是路由的生命周期函数，主要分为全局和局部
全局的钩子函数
beforeEach:在路由切换开始时调用；
afterEach:在路由切换离开时调用;

9 谈一下vue响应式数据的原理?

1.核心点:Object.defineProperty
2.默认Vue在初始化数据时，会给data中的属性使用Object.defineProperty重新定义所有属性，当页面取到对应属性时。会进行依赖收集(收集当前组件的watcher)如果属性发生变化会通知相关依赖进行更新操作。

10 vue是如何检测到数组变化？

使用函数劫持的方式，重写了数组的方法
Vue将data中的数组，进行了原型链重写。指向了自己定义的数组原型方法，这样当调用数组api时，可以通知依赖更新，如果数组中包含着引用类型。会对数组中的引用类型再次进行监控。

11 vue的watch与computed的差异？

computed : 计算属性
1.计算属性是由data中的已知值,得到一个新的值;
2.性能不好;
3.别人变化影响我自己(被动变化);

watch 监听data中的数据的变化(主动变化)

1.监听data中的数据
2.我的变化影响别人

12 vue的computed与方法的差异？

13 vue的组件之间的传值？

1.父组件传值子组件：
	
	父组件: <Header :msg='msg'></Header>
	子组件: props:{ msg:String} 或 props:['msg']
	
2.子组件传值父组件
	子组件:
			this.$emit("自定义事件名称",要传的数据)
		    例如: this.$emit("childInput",this.changeVal)
	父组件:
			<Header @childInput="getVal"></Header>
			 methods: {	
    					getVal(msg) {
    					//msg就是子组件传递的数据
      					this.msgVal = msg;
    				}
  				}

3.兄弟组件之间的传值
	
	A兄弟传值:
	 		import bus from "../common/bus.js";
	 		 bus.$emit("toFooter", this.msg);
	B兄弟接收:
			import bus from "../common/bus.js";
			bus.$on("toFooter", data => {
				//data就是this.msg里面的数据
      			this.str = data;
    		});
			

14 vue-cli项目中src目录每个文件夹和文件的用法

src 
	assets  // 静态资源(图片、js、css)
	components  //非路由组件
	views    //参与路由的跳转组件
	router  //路由配置
	store   //vuex(仓库)
	App.vue  //挂载的第一个组件
	main.js  //全局的文件

15 axios是什么?怎么使用?描述使用它的是怎么实现一个登陆流程?

1、axios是什么?怎么使用?
	下载安装:   		 npm install  axios --save
	引入(main.js):   
	import axios from 'axios'
	Vue.prototype.axios =axios;
	
	使用： axios.get('/api/login?userName=???&userPwd=???')
		  axios.post('/api/login',{
		  	userName:???
		  	userPwd:???
		  })
2、设置代理,请求接口(跨域)
   config/index.js
   proxyTable:{
   	
   		'/api':{
   		
   			target:"http://localhost:8080",
   			changeOrigin:true, //允许跨域
   			pathRewrite:{
   				//这里是当前调用的接口请求路径
   				'^/api':'static/mock'
   			}
   		}
   }
   修改了webpack的配置 一定要重启一下服务

15 v-if和v-for可以一起使用么?

不建议一起使用,v-for 比 v-if运算级别更高一些。

16 vue事件使用以及事件修饰符

event 是原生的事件对象

<button @click="increment2(2,$event)">+2</button>
	//自定义事件参数
    increment2(val, event) {
      this.num = this.num + val;
    }

17 vue组件生命周期

创建阶段
挂载阶段
更新阶段
销毁阶段

created与mounted的主要区别在于：created时vue组件实例已经初始化完成，但页面还没有完成渲染，mounted是页面已经绘制完成，可以做一些ajax的请求信息和事件绑定的操作。

beforeDestroy 解除销毁子组件以及事件监听器

18 vue的keep-alive组件有什么用

缓存组件，使用于频繁切换，不需要重复渲染，Vue常见性能优化

19 vue的mixin是什么？

作用:
	多个组件有相同的逻辑，抽离出来
	mixin并不是完美的解决方案，会有一些问题
	Vue3提出的Composition API旨在解决这些问题
缺点:	
	变量来源不明确，不利于阅读
	多mixin可能会造成命名冲突
	mixin和组件可能出现多对多的关系，复杂度较高