vue一些基础知识

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

vue2.0
ES5：Object.defineProperty

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   姓名: <span id='spanName'></span>
   <br/>
   <input type='text' id='inpName' />

</body>
 <script>
   let obj = {
     name: ''
   }
   let newObj = JSON.parse(JSON.stringify(obj))
   Object.defineProperty(obj, 'name', {
     get(){
      return newObj.name
     },
     set(val){
       if(val === newObj.name) return 
        newObj.name = val;
        observer();
     },
   })
   function observer(){
     spanName.innerHTML = obj.name;
     inpName.value = obj.name
   }
   setTimeout(() => {
     obj.name = '我是eternity';
   }, 1000)
   // 以下类似于v-model
   inpName.oninput = function () {
     obj.name = this.value;
   }
 </script>
</html>

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

vue3.0
ES6: proxy

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   姓名: <span id='spanName'></span>
   <br/>
   <input type='text' id='inpName' />

</body>
 <script>
   let obj = {}
    obj = new Proxy(obj, {
      get(target, prop){  // 目标: obj  prop: 属性 obj.name
        console.log('eternity')
        return target[prop]
      },
      set(target, prop, value){
        console.log('zjh')
        target[prop] = value
        observe()
      }
    })
    function observer(){
      spanName.innerHTML = obj.name;
      inpName.value = obj.name
    }
    setTimeout(() => {
      obj.name = '我是eternity^zjh';
    }, 1000)
    // 以下类似于v-model
    inpName.oninput = function () {
      obj.name = this.value;
    }
 </script>
</html>

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

vue一些基础知识

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

二、MVC和MVVM的区别

三、跨域问题和解决方法

小猿张

引用和评论

Hybird混合开发

2025年最新反编译微信小程序的教程及工具

手写一个动态海洋和天空效果的vue hooks

你可能不知道的图片加载相关知识

原生JS大揭秘—JS代码执行原理解刨

原生electron起步-从零到一完成构建和打包

LRU算法，你别跑，我就要吃透你