面试题自己备份的

vue相关

1.computed和watch的区别

• computed 计算属性：顾名思义需要依靠其他属性来计算出，只有依赖的属性发生变化了，再去获取computed的值才会进行计算，会有缓存可以直接使用缓存，不支持异步操作。（多对一）
• watch 侦听器：更多的用来观察，没有缓存，监听数据，数据发生变化以后就去执行相应的回调，支持异步操作。（一对多）

//computed
export default{
	computed:{
		getNewNum(){
			return this.num1-this.num2;
		}	
	}
}
//watch侦听器
//函数写法
export default {
	watch:{
		userName(newVal,oldVal){
			return newVal+"管理员"
		}
	}
}
//对象写法
export default {
	watch:{
		useName:{
			handler(newVal){
				return newVal+"管理员"
			}, //处理函数
			deep:true, //深度监听
			immediate:true //控制侦听器自动触发一次默认为false
		}
	}
}

2.vue常用的修饰符(13个)

• v-model有关的
  • .lazy在input输入时v-model绑定的值不改变，当光标离开input后值改变
  • .numberv-model绑定的值是数字，一开始输入的是数字就保留数字部分，一开始输入的是字母就无效
  • .tirm过滤掉v-model绑定的值首尾的空格
• 事件有关的
  • .stop阻止事件冒泡
  • .capture捕获事件
  • .once事件只执行一次
  • .self只有点击到绑定事件的本身才会执行
  • .prevent阻止默认事件如a标签的跳转
  • .native子组件绑定事件时确保事件正确执行
• 鼠标
  • .left .middle .right鼠标的左右中键对应的事件
• 滚动条
  • .passive滚动条在滚动的时候会频繁的触发onScroll事件，该修饰符使得该事件在滚动条停止滚动的时候触发，这个情况在pc端还好，在移动端会使得网页变卡
• 驼峰命名
  • .camel确保绑定的参数被识别成驼峰写法
• 数据同步
  • .sync父子组件传值，子组件想更新这个值，使用该修饰符可以简写

3.vue常用的内部指令(13个)

• v-html更新元素的innerHTML
• v-text更新元素的textContent
• v-if根据条件判断增加和删除相应的dom节点
• v-else-if同上
• v-else同上
• v-show根据条件判断修改元素display属性实现显示和隐藏的效果
• v-hide隐藏元素
• v-for列表循环，可以循环数组、对象、数字、字符串等
• v-on用来给元素绑定事件缩写是@
• v-bind给元素绑定动态数据class和style也可以缩写是:
• v-slot插槽名缩写是#
• v-once元素和组件只渲染一次
• v-pre跳过这个元素和他的子元素的渲染过程
• v-model双向绑定表单项的值
• v-cloak防止闪烁

4.如何设置动态的class和style

<!-- 动态class 这里需要在类名上加引号一定要记住 -->
<div :class='{"green":true,"red":isRed}'></div> <!-- 动态class对象 -->
<div :class='["green",isRed?"red":""]'></div> <!--动态class数组 -->
<!-- 动态style  和class区分开-->
<div :style="{color:'red',fontSize:'18px'}"></div> <!--动态style对象 -->
<div :style="[{color:textColor,fontSize:'18px'},{fontWeight:'300'}]"></div> <!-- 动态style数组 -->

5.vue的生命周期

• beforeCreate此时vue实例已经有了，但是还没有初始化数据和响应式处理(服务器端调用)
• created数据初始化完成，响应式处理完成，此时已经可以访问到数据也可以修改数据(服务器端调用)
• beforeMount调用render函数，生成虚拟dom但是还没有转换成真实dom也没有替换el
• mounted这里真实dom挂载完毕
• beforeUpdate数据更新后，生成新的虚拟dom但是还没和旧的虚拟dom做对比打补丁
• updated虚拟dom对比打补丁后，替换真实dom
• beforeDestroy实例销毁前调用，此时仍然可以访问数据
• destroyed实例销毁后调用，绑定在实例上的指令解绑，事件处理器移除，所有子实例都被销毁
• activated keep-alive缓存组件被激活的时候调用
• deactivated keep-alive缓存组件停用时调用
• errorCaptured捕获到子孙组件的错误时候调用。钩子函数有三个参数：错误对象、发生错误的组件实例和包含错误信息来源的字符串、false来阻止错误继续向上传播(服务器端会调用)

6.vue的双向数据绑定

vue双向数据绑定，利用observer观察者和数据劫持结合发布者-订阅者模式

7.vue中路由钩子函数得执行顺序

JavaScript相关

1.防抖节流函数(代码后边补)

2.ES6有哪些新特性

CSS相关

HTML相关

其他

1.强缓存（本地缓存）和协商缓存

• 强缓存：直接使用本地缓存，不用跟服务器进行通信；
• 协商缓存：将资源的一些信息返回服务器，让服务器判断浏览器能否直接使用本地缓存，整个过程至少和服务器通信一次

2.路由模式有哪些，区别在哪

• hash模式：通过#后边内容的修改触发hashChange事件，实现路由切换；
• history模式：通过pushState()和replaceState()来改变url，实现路由切换，需要后端配合。

3.从输入一个URL地址到浏览器完成渲染的整个过程(比较简略的版本)

• 在浏览器的地址栏输入url回车
• 浏览器查看该url是否有缓存，对比缓存是否过期
• DNS解析url为对应的ip
• 通过ip建立TCP连接(三次握手)
• 发送http请求
• 服务器处理请求，浏览器接收HTTP响应
• 浏览器解析并渲染页面
• 断开TCP连接(四次挥手)

非技术类问题

1.面试结束面试官问你还有什么要问的嘛。

• 面试时对方已经了解过了我们，这个时候我们可以去了解一下对方，具体结合面试情况考虑，可以咨询一下公司的业务和技术选型，这样可以了解自己的能力是否和公司匹配。