vue一些基础知识 vue一些基础知识

一、vue2.0/3.0 双向数据绑定的实现原理
【vue一些基础知识】vue2.0
ES5：Object.defineProperty

Document - 锐客网姓名:

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

Document - 锐客网姓名:

二、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：'*'