面试2

最新推荐文章于 2021-04-22 14:02:16 发布

福小娟儿

最新推荐文章于 2021-04-22 14:02:16 发布

阅读量87

点赞数

分类专栏：理解知识类文章标签：面试

本文链接：https://blog.csdn.net/qq_40969782/article/details/115129558

版权

理解知识类专栏收录该内容

2 篇文章 0 订阅

订阅专栏

对MVVM的理解

MVVM是Model-View-ViewModel的缩写。它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

数据双向绑定原理

所谓的双向绑定，就是view的变化能反映到ViewModel上，ViewModel的变化能同步到view上。
vue.js采用数据劫持结合发布者-订阅者的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时，发布消息给订阅者，触发相应的监听回调。
Vue.js通过Directives指令去对DOM做封装，当数据发生变化，会通知指令去修改对应的DOM，数据驱动DOM的变化。vue.js还会对操作做一些监听（DOM Listener），当我们修改视图的时候，vue.js监听到这些变化，从而改变数据。这样就形成了数据的双向绑定。

vue.config.js 配置文件常用配置项

devServer ：{
 port:端口号
 https:是否开启https协议
 proxy：{//代理
	 "/api" : {
			target: " http://localhost:3000 ",   //代理地址
			changeOrigin: true,           // 是否跨域
			ws:  true,
			pathRewrite: {
			" ^/api " :  ""  //若请求的路径在目标url下但不在/api 下，则将其转换成空
			}    
		}
	 }
}
publicPath："/aaa"  //部署后的基础路径
outputDir: process.env.outputDir, 
assetsDir: 'static', //  outputDir的静态资源(js、css、img、fonts)目录
chainWebpack:配置链
css :css loder特殊插件配置
configureWebpack：webpack配置

常用数据类型header的配置项

headers:{
//json提交传递的是一个长字符串
‘Content-Type’: ‘application/json;charset=UTF-8’
//文件提交传递的是文件流
‘Content-Type’: multipart/form-data;boundary=something’
//表单提交传递的是键值对
‘Content-Type’: application/x-www-form-urlencoded’
}

浏览器请求回来后的页面渲染过程
路由的两种模式及区别

history模式和hash模式
history没有#号需要后端配置基础路由地址
hash模式包含#

ajax的概念及优势，ajax基于什么实现

ajax=异步的js和xml 能通过后台和服务器进行少量数据交换，在不重新加载页面的情况下实现部分网页异步更新
ajax基于现有的internet标准，并且联合使用他们
1、XMLHttpRequest对象
2、javascrip/DOM
3、css
4、xml
ajax状态码
readyState 0（请求未初始化）、1（服务器连接已建立）、2（请求已接收）、3（请求处理中）、4（请求已完成且响应已就绪）
status 200（‘ok’）、404（未找到页面）
ajax实现流程

function loadXMLDoc()
{
	var xmlhttp;//创建ajax请求
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	//ajax请求状态码发生变化时的回调函数
	xmlhttp.onreadystatechange=function()
	{
		//请求成功后的DOM处理
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			//xmlhttp.responseText为ajax响应数据
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	//发送请求
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}

跨域的后台解决办法配置

浏览器支持 cors
@CrossOrigin(origins = “http://localhost:8080”)
浏览器不支持cors
response.setHeader(“Access-Control-Allow-Origin”, “*”);

http协议的优势

http是超文本传输协议的简称。规范了浏览器和服务器交互数据的格式
http协议的特点
1 、简单快捷：客户向服务器请求服务时只需要传路径和请求方法，不同的请求方法规定了客户端与服务端联系的不同类型，由于http协议简单，因而服务端程序规模小，因此速度就很快
2、灵活 http可以传递任意类型的数据对象用content-type来标记传输类型
3 、无连接限制每次链接只能处理一个请求，请求处理完并接收到客户端应答后立即断开，因此节省了传输时间
4、无状态，为无状态协议对事务处理没有记忆能力，服务器不需要先前信息时处理较快，反之需要重新连接就会耗费时间，在1.1版本后支持可持续性连接
http交互流程
1、客户端与服务器建立连接
2、客户端向服务器发送数据请求
3、服务器将接收到的数据处理后的结果相应给客户端
4、客户端和服务端连结关闭
客户端请求消息格式
请求行、请求头、空行、请求数据
服务端响应头
状态行、消息报头空行、响应正文

10.axios概念及基本配置项
axios 基于promise用于浏览器和node.js的http客户端。
基本配置项
url: ‘/index’,
headers: {‘Content-Type’: ‘application/text;charset=UTF-8’},
emulateJSON: true, //启用该选项后，请求会以application/x-www-form-urlencoded作为Content-Type
method: ‘get’,
params:data
或者使用qs配置表单请求体
先安装qs
npm install qs --save
引入Qs
import Qs from ‘qs’
配置
url: ‘/index’,
headers: {‘Content-Type’: ‘application/text;charset=UTF-8’},
emulateJSON: true, //启用该选项后，请求会以application/x-www-form-urlencoded作为Content-Type
method: ‘get’,
data:Qs.stringify(data)
11、ajax axios fetch的区别

1、ajax Ajax即“Asynchronous Javascript And XML”（异步 JavaScript 和
XML），是指一种创建交互式网页应用的网页开发技术。通过http进行通信构建复杂、安全性低容易收到csrf和xss攻击，会有网络延迟
且无法显示服务器响应的其它信息 2、axios axios基于promise用于浏览器和node.js的http客户端
支持异步和防御CSRF/XSRF,安全快速，提供了一些并发请求接口，支持拦截请求和响应同时自动转化json 3、fethch
基于promise设计的，类似jquery ajax ，未使用xmlHttpRequest对象
写法方便、API也比较丰富更加底层，脱离了XHR但还有很多问题，只对网络请求报错，默认不带cookie,不能拦截请求，也无法检测请求进度