vue一些基础知识

一、vue2.0/3.0 双向数据绑定的实现原理

vue2.0
ES5：Object.defineProperty

  
  
  


   姓名: 
   

   


 

存在的问题:
1、需要对原始数据克隆
2、需要分别给对象中每一个属性设置监听
3、对于对象和数组的监听不是很有效，可用$set,或者原生的方法;

vue3.0
ES6: proxy

  
  
  


   姓名: 
   

   


 

二、MVC和MVVM的区别

MVVM: 视图更改影响视图，视图更改数据（双向数据绑定，双向影响）vue的onChange，onInput事件已经处理完毕
MVC: 数据更改影响视图， 少了一层onChange

三、跨域问题和解决方法

1、 JSONP 跨域
callback 问号传参的方式
本地写入callback函数，后盾将数据返回作为callback的参数
缺陷： 不安全，只能用get，还需要服务单独支持
2、基于iframe 的跨域解决方案

3、CORS 跨域资源共享

import axios from 'axios';
import qs from 'qs';
axios.defaults.baseUrl = 'http://127.0.0.1:300';
axios.defaults.timeout = 10000;
axios.defaults.withCredentials = true; 
// 允许跨域携带cookie请求
/*
* 设置请求传递数据的格式（看服务器要求什么格式）
*x-www-urlencoded
*/
axios.defaults.headers['Content-Type'] = 'application/x-www-urlencoded';
axios.defaults.transformRequest = data => qs.stringify(data); 
/*
* 设置请求拦截器
* TOKEN校验（JWT）:接收服务器返回的token，存储到vuex、本地存储中，每一次访问服务器的时候，我们应该吧token带上
*/
axios.interceptors.request.use(config => {
   let token = localStorage.getItem('token');
   token && (config.headers.Authorization = token);
   return token;
},error => {
  return Promise.reject(error);
});

/*
* 响应拦截器
*/
axios.interceptors.response.use(response => {
  return response.data;
}, err => {})

export default axios;

后端： access-control-allow-origin：'*'