前端面试题

前端面试题

vue

1.什么是生命周期

vue的生命周期是指vue从创建实例之初到销毁的过程，vue的所有功能实现都是围绕其生命周期进行的，在生命周期的不同阶段调用对应的钩子函数可以实现从组件数据管理和DOM渲染的两大重要功能

2.vue的生命周期的作用是什么

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程中更容易形成更好的逻辑

3.vue生命周期中的八个钩子函数

1.beforeCreat()创建在new一个vue实例之后，只有一些默认的生命周期钩子和默认事件，其他的东西还没创建。在生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods方法
2.create()被创建data和methods都已经被初始化好了，可以调用了
3.beforeMount()挂载前在内存中已经编译好了模板，但是还没有挂载到页面中，此时页面还是旧的
4.mounted()已挂载vue实例已经初始化完成。此时组件脱离了创建阶段，进入到了运行阶段，如果我们想要通过插件操作页面上的DOM节点，最早可以在这个阶段中进行
5.beforeupdate()更新前页面的数据还是旧的，data中的数据是更新后的，页面还没有和最新的数据保持同步
6.updata()更新页面显示的数据和data中的数据已经保持同步，都是最新的
7.beforeDestroy()销毁前vue实例从运行阶段到了销毁阶段，这个时候所有的data和methods，指令，过滤器...都是处于可用状态，还没有被真正的销毁
8.destroyed()被销毁这个时候上所有的data和methods，指令过滤器...都是出于不可用状态，组件已经被销毁了

4.MVVM框架是什么？

MVVM即Model-View-ViewModel 基于mvc的设计原理 Model代表数据模型负责业务逻辑和数据封装，View代表UI组件负责界面和显示，ViewMode监听模型数据的改变和控制视图行为，用户交互后简单来说就是通过双向数据绑定把View层和model层连接起来在MVVM架构下，View和Model没有直接联系，而是通过ViewModel进行交互，我们只关注业务逻辑不需要手动操作DOM不需要关注View和Model的同步工作

5.vue-router是什么？有哪些组件？

vueRouter是vue官方的路由管理工具 组件有<router-link>,<router-view>和<keep-alive>

6.Vue路由守卫的三种方式

**全局守卫**
	前置守卫（beforeEach）
		router.beforeEach((to,from,next)=>{
			//  to: 目标路由
			//  from: 当前路由
			//  next() 跳转  一定要调用
			//  next(false);//不让走
			//  next(true);//继续前行
			//  next('/login')//走哪
			//  next({path:'/detail/2',params:{},query:{}})//带点货
		})
	后置守卫（afterEach）
		router.afterEach((to,from)=>{
		   	//全局后置守卫业务
		})
**路由独享守卫**
	 写在路由配置里，钩子函数名：beforeEnter，只有前置守卫
	 如 {
	 		 path: '/user',
	 		  component:User,
	 		   beforeEnter:(to,from,next)=>{
	 		   		
	 		   }
	      }
**组件内部守卫**
	写在组件对象里。分别有前置守卫，后置守卫，路由改变守卫（当前组件被复用的情况,不是路径改变）三个钩子函数
		export default{
			beforeRouteEnter(to,from,next){//前置
				  // 不！能！获取组件实例 `this`
 				 // 因为当守卫执行前，组件实例还没被创建
			},
			beforeRouteUpdate(to,from,next){//路由改变守卫（当前组件被复用的情况,不是路径改变）
				//在当前路由改变，但是该组件被复用时调用
				//举例来说，对于一个带有动态参数的路径/foo/:id,在/foo/1和/foo/2之间跳转的时候，由于会渲染同样的Foo组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用
				//可以访问组件实例`this`
			},
			beforeRouteLeave(to,from,next){//后置
				//导航离开该组件的对应路由时调用
				//可以访问组件实例`this`
			}
		}

JS部分

跨域的8种解决方案

iframe + document.domain location.hash window.name
postMessage
	HTML5中的XMLHttpRequest Level2中的API
proxyTable
	在开发模式下，webpack会为我们提供一个http的代理服务器，我们请求接口时，实际上时请求的webpack提供给我们的这个http代理服务器，再由这个代理服务器请求真实的数据服务器，最后在由webpack代理服务器转交给我们的vue程序
	![在这里插入图片描述](https://img-blog.csdnimg.cn/43fa0995d16749f6b18d8a1e70febd21.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5a2m5rW35peg5rav562J562J,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)
	浏览器是禁止跨域的，但是服务器是不禁止的，在本地运行npm run dev等命令时，实际上是用node运行了一个服务器，因此proxyTable实际上是将请求发送给自己的服务器，再由服务器转发给后台服务器，做了一层代理，因此不会出现跨域问题
	postman调试的接口如下：
		url：http://192.1.1.112/23/taskList/design/modelList
		proxyTable: {
			    '/tsk':{
  					target:'http://192.1.111.23:8089/taskList',
  					changeOrigin:true,
  					pathRewrite:{
    							'^/tsk':''
                               }
                     }
                }

node.js中间件
cors
	cors背后的思想，就是使用自定义的HTTP头部浏览器与服务器进行沟通，从而决定请求或响应是应该成功，还是应该失败
	var xhr =  new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if(xhr.readyState == 4){
        if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
          console.log(xhr.responseText);
         }
      }
    }
    xhr.open('get', 'http://www.baidu.com');
    ......
    xhr.send(null);
websocket
	webSocke是一种浏览器的API，它的目标是在一个单独得持久链接上提供全双工，双向通信（同源策略对websocket不适用）
	webSocket原理：在JS创建了webSocket后会有一个Http请求发送到浏览器以发起链接。取得服务器的响应后，建立的链接会使用HTTP升级从HTTP协议交换为WebSocket协议
	只有在支持websocket协议上的服务器上才能正常工作
		var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
		socket.send('hello WebSockt');
		socket.onmessage = function(event){
			var data = event.data;
		}
JSONP
	JSONP包含两部分：回调函数和数据
	回调函数是当响应到来时要放在当前页面被调用的函数
	数据就是传入回调函数中的JSON数据，也就是回调函数的参数了。
	function handleResponse(response){
	   console.log('The responsed data is: '+response.data);
	}
	var script = document.createElement('script');
	script.src = 'http://www.baidu.com/json/?callback=handleResponse';
	document.body.insertBefore(script, document.body.firstChild);
	/*handleResonse({"data": "zhe"})*/
	//原理如下：
		//当我们通过script标签请求时
		//后台就会根据相应的参数(json,handleResponse)
		//来生成相应的json数据(handleResponse({"data": "zhe"}))
		//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
		//至此跨域通信完成
	jsonp虽然很简单，但是有如下缺点：
		1）安全问题(请求代码中可能存在安全隐患)
		2）要确定jsonp请求是否失败并不容易
		3) 只支持GET请求方式，在原生JavaScript脚本中使用方便，但是当利用了如Vue.js这种MVVM框架时就有些难以施展了
nginx反向代理

创建对象的几种方式

创建自定义对象最简单的方式即使创建一个Object的实例，然后给它添加属性和方法
	var person = new Object();
	person.name = "Nicholas"
	person.age = 29;
	persin.job = "Software Engineer";
	person.sayName = function(){
		console.log(this.name)
	}
	//或者对象字面量语法
	var person={
		name:'Nicholas',
		age:'29',
		job:'Software Engineer',
		sayName:function(){
			console.log(this.name)
		}
	}
    缺点：使用同一个接口创建很多对象，会产生大量的重复代码
工厂模式
	这种模式抽象了创建对象的具体过程，用函数来封装以特定接口创建对象的细节
	function createPerson(name,age,job){
		var o = new Objcet();
		o.name = name;
		o.age = age;
		o.job = job;
		o.sayName = function(){
			console.log(this.name)
		}
		return o;
	}
	
	var person1 = createPerson('wwy','24','student');
	var person2 = createPerson('wq','24','student');
	缺点：工厂函数解决了创建多个相似对象的问题，但是没有解决对象的识别问题（即怎么样知道一个对象的类型）
构造函数模式
原型模式
组合使用构造函数模式和原型模式
动态原型模式
寄生构造函数模式
稳妥构造函数模式

双向绑定的原理

核心是Object.defineProperty()方法
	语法：Object.defineProperty(obj,prop,descriptor)
	其中 obj是要在其上定义属性的对象
		prop是要定义或修改的属性名称
		descrtptor是将被定义或修改的属性描述符
		简单来说就是通过此方法来定义一个值
		调用使用到了get方法
		赋值使用到了set方法
		var obj = {}
        Object.defineProperty(obj,'hello',{
            get:function(){
                console.log('调用了get方法')
            },
           set:function(newValue){
               console.log('调用了set方法，方法值是'+newValue)
            }
        });

        obj.hello;
       obj.hello = 'hi'

       console.log(obj)

浏览器缓存

缓存优缺点：
	优点： 
		1.减少了不必要的数据传输，节省带宽
		2.减少了服务器的负担，提升网站性能
		3.加快了客户端加载网页的速度
		4.用户体验好
	缺点：
		资源如果有更改但是客户端不及时更新会造成用户获取信息滞后，如果老版本有bug的话情况会更加糟糕
强缓存
	当浏览器去请求某个文件的时候，服务端就在respone header里面对该文件做了缓存配置。缓存的时间，缓存类型都由服务端控制。
	强缓存就是给资源设置个过期时间，客户端每次请求资源时都会看是否过期；只有过期才回去询问服务器
协商缓存
	某天客户端请求该资源时发现其过期了，这时就会去请求服务器了，而这时候去请求服务器的过程就可以设置协商缓存，这时候协商缓存就是需要客户端和服务端两端进行交互
	可以在response header里面设置
		etage：每个文件有一个，改动了文件就变了，文件hash
		lest-modified：文件的修改时间，精确到秒
	也就是说，每次请求返回来 response header 中的 etag和 last-modified，在下次请求时在  request      header 就把这两个带上，服务端把你带过来的标识进行对比，然后判断资源是否更改了，如果更改就直接返回新的资源，和更新对应的response header的标识etag、last-modified。如果资源没有变，那就不变etag、last-modified，这时候对客户端来说，每次请求都是要进行协商缓存了，即：
	    发请求->看资源是否过期->过期->请求服务器->服务器对比资源是否真的过期->没过期->返回304状态码->客户端用缓存的老资源
    服务端发现资源真的过期的时候：
    	发请求->看资源是否过期->过期->请求服务器->服务器对比资源是否真的过期->过期->返回200的状态码->客户端第一次接收该资源一样，记下它的cache-control中的max-age、etag、last-modified等