vue3简易实现proxy代理实例详解

vue3 简易实现proxy代理

1.基础数据

const state = reactive({ name: 'cld', age: 26, like: 'paint' });
console.log("获取更改age前的值", state.age);
state.age = 28;
console.log("获取更改age后的值", state.age);

核心逻辑 reactive

export function reactive (target) {
  // 创建一个响应式对象 对象 set map array object ...
  return createReactiveObject(target, {
    // proxy + reflect
    get (target, key, receiver) {
      // 可能无法访问key target[key]是否成功不会报错 所以使用reflect
      const res = Reflect.get(target, key, receiver); // == target[key];
      console.log('用户取值', target, key);
      return res;
    },
    set (target, key, value, receiver) {
      const res = Reflect.set(target, key, value, receiver);
      console.log('用户设置值', target, key);// == target[key]=value;
      return res;
    }
  });
}
const isObject = (obj) => { return typeof obj == 'object' && obj != null; };
function createReactiveObject (target, baseHandler) {
// 如果不是对象 不需要代理
  if (!isObject(target)) {
    return target;
  }
  // target目标对象 baseHandler get/set 值处理方法，
  const observed = new Proxy(target, baseHandler);
  return observed;
}

/** Reflect 作用
 * 可能无法访问key target[key]是否成功不会报错
 * 所以使用reflect
 * Reflect.get 返回值   Reflect.set 返回值boolean
 **/
const res = Reflect.get(target, key, receiver);
// Reflect.get(target, key, receiver);  等价于 target[key] 并返回值
const res = Reflect.set(target, key, value, receiver);
// res  值为true/false 表示是否成功设置值

代理实现效果

vue3取值的时候才走代理操作，不取值的时候，不需要深度遍历代理，
vue2一开始就深度递归

当数据里为数组或对象的情况下，需要递归代理

get (target, key, receiver) {// proxy+reflect
    const res = Reflect.get(target, key, receiver);// == target[key];
    if (isObject(res)) {
      return reactive(res);
    }
    return res;
  };

修改值的时候，具体是新增操作还是修改操作 可以定位

set (target, key, value, receiver) {
    const hasKey = hasOwn(target, key);
    const oldValue = target[key]; // Reflect.set 操作前还是历史数据
    const res = Reflect.set(target, key, value, receiver);
    if (!hasKey) {
      // 新增属性
      console.log('用户新增值', target, key);
    } else if (value !== oldValue) {
      //修改操作
      console.log('用户修改值', target, key);
    }
    return res;
  };

push数据的时候，会先取arr的push属性，然后取array的length属性

设置值的时候 key是index索引，在该索引上增加值

其实在该索引上增加值之后，还会再次触发set 应该数组的长度改变了

为了减少多余的无必要的操作，可以通过判断不执行任何操作

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • Vue项目配置跨域访问和代理proxy设置方式

    在vue单页应用项目开发时,避免不了要请求后端,这时通常就会出现跨域问题.有2种常用的解决方案 后端设置允许跨域访问 前端通过代理进行访问后端 下面我们只说说如何配置vue-cli代理访问: vue-cli代理 最简单就是配置vue conifg进行实现 下面配置3个请求的后端,分别是: 请求http://localhost:4201/adminapi/*会代理请求http://localhost:8180/* 请求http://localhost:4201/portalapi/*会代理请求ht

  • vue cli3 配置proxy代理无效的解决

    vue cli3 创建的vue项目配置开发环境代理无效,网上的各种配置都试了,还是不行,最后终于试出来一种配置方法 vue.config.js配置如下内容(不要配置任何多余的选项,什么changOrigin pathRewrite 之类的东西都不要配): module.exports = { devServer: { proxy:"http://127.0.0.1:8081", port: 8085 } } axios访问的时候不要配置任何东西,axios里访问的url不需要加任何前缀

  • vue Proxy数据代理进行校验部分源码实例解析

    vue Proxy数据代理进行校验部分源码实例解析

    目录 initProxy 触发代理 数据过滤 总结 initProxy 数据拦截的思想除了为构建响应式系统准备,它也可以为数据进行筛选过滤,我们接着往下看初始化的代码,在合并选项后,vue接下来会为vm实例设置一层代理,这层代理可以为vue在模板渲染时进行一层数据筛选 Vue.prototype._init = function(options) { // 选项合并 ... { // 对vm实例进行一层代理 initProxy(vm); } ... } initProxy // 代理函数 var

  • webpack+vue-cil 中proxyTable配置接口地址代理操作

    在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可: dev: {

  • Vue使用Proxy代理后仍无法生效的解决

    vue.js 配置了前端代理却未能生效 记录一下最近踩得小坑: 配置完代理后请一定重新执行(重要,非常重要!) npm run dev 若重新执行命令后,代理仍为生效,请按下方步骤进行检查: 检查index.js文件中的代理是否配置正确,示例如下: proxyTable: { '/api': { //代理标识 target: 'http://xxx.xxx.xxx',//指向的实际地址 changeOrigin: true, // 允许跨域 pathRewrite: { // 标识替换 // 原

  • Vue中如何实现proxy代理

    Vue 框架开发的时候,会遇到跨域的问题,可在config/index.js 里配置proxyTable内容,使用proxy 代理. // config/index.js 文件 proxyTable: { '/api': { target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号 changeOrigin: true, // 跨域 pathRewrite: { '^/api': '/' } } }, 这里理解成用'/api'代替targe

  • vue3简易实现proxy代理实例详解

    vue3简易实现proxy代理实例详解

    vue3 简易实现proxy代理 1.基础数据 const state = reactive({ name: 'cld', age: 26, like: 'paint' }); console.log("获取更改age前的值", state.age); state.age = 28; console.log("获取更改age后的值", state.age); 核心逻辑 reactive export function reactive (target) { // 创

  • Nginx的反向代理实例详解

    一.反向代理实例 1 1.实现效果 (1)打开浏览器,在浏览器中输入www.123.com,跳转到linux系统tomcat主页面. 2.具体配置 (1)在windows系统的host文件进行域名和ip对应关系 (2)在Nginx进行请求 注意: 端口乤对外开放.  二.反向代理实例 2 1.实现效果 (1)使用Nginx反向代理,根据访问的路径跳转到不同端口的服务中,Nginx监听端口为8001. 访问 http://127.0.0.1:9001/deu/ 直接跳转到127.0.0.1:801

  • vue3弹出层V3Popup实例详解

    vue3弹出层V3Popup实例详解

    Vue3-Popup 基于vue3构建的手机端自定义弹层组件. 一款集合了msg.alert.dialog.modal.actionSheet.toast等多种效果的Vue3自定义弹层组件.支持上下左右弹出.圆角.自定义弹层样式.多按钮及长按/右键功能. 引入v3popup // 在main.js中全局引入 import { createApp } from 'vue' import App from './App.vue' // 引入弹窗组件v3popup import V3Popup fro

  • 为Vue3 组件标注 TS 类型实例详解

    目录 为 props 标注类型 使用 <script setup> 非 <script setup> 为 emits 标注类型 使用 <script setup> 非 <script setup> 为 ref() 标注类型 默认推导类型 通过接口指定类型 通过泛型指定类型 为 reactive() 标注类型 默认推导类型 通过接口指定类型 为 computed() 标注类型 默认推导类型 通过泛型指定类型 为事件处理函数标注类型 为 provide / in

  • vue跨域proxy代理配置详解

    vue跨域proxy代理配置详解

    目录 引言 例一 例二 总结 引言 相信很多人都用过proxy,这里就不多说proxy的基本使用,这里要说一下很多人使用proxy的一个误区,大家一般都是直接将管官方的例子拿过来,修改一下代理目标直接就是用了,但是代理的路径匹配你真的会用么? 如果你能够认证看完那么我保证你下次再配置代理的时候就能一步就能完成,无需多次npm run serve 先来一个正则热热身待会需要用,看懂了再往下看: 例一 这是我使用express自己搭建的一个超级简单的服务器,代码如下(没有设置允许跨域请求) // 引

  • vue3实现数字滚动特效实例详解

    目录 前言 思路 文件目录 使用示例 入口文件index.js main.js使用 requestAnimationFrame.js思路 完整代码: CountTo.vue组件思路 总结 前言 vue3不支持vue-count-to插件,无法使用vue-count-to实现数字动效,数字自动分割,vue-count-to主要针对vue2使用,vue3按照会报错: TypeError: Cannot read properties of undefined (reading '_c') 的错误信息

  • Vue3新状态管理工具实例详解

    Vue3新状态管理工具实例详解

    目录 前言 安装 创建Store State 定义State 获取state 修改state Getters Actions 异步action action间相互调用 数据持久化 安装 使用 自定义key 持久化部分state 最后 前言 Pinia.js 是新一代的状态管理器,由 Vue.js团队中成员所开发的,因此也被认为是下一代的 Vuex,即 Vuex5.x,在 Vue3.0 的项目中使用也是备受推崇. Pinia.js 有如下特点: 完整的 typescript 的支持: 足够轻量,压

  • Android简易电话拨号器实例详解

    安卓开发简易电话拨号器,具体内容如下 我是基于安卓4.2.2开发的,下面是我写的MainActivity.java代码: package com.example.phone; import android.support.v7.app.ActionBarActivity; import android.support.v4.app.Fragment; import android.content.Intent; import android.net.Uri; import android.os.

  • 基于vue3&element-plus的暗黑模式实例详解

    目录 前言 一.基本使用 二.自定义深色样式 1.深色样式 2.变量覆盖 3.element-plus变量覆盖 4.scss变量 三.暗黑模式下的图片 总结 前言 element-plus@2.2.0 已经开始支持暗黑模式了 通过在html标签上添加一个名为 dark 的类来启用 基于 vue3 & element-plus 的项目现在可以方便的添加暗黑模式 一.基本使用 因为是通过在html标签上添加 dark 类,可以自行实现切换 但为了方便切换以及进一步的定制化,官方推荐使用 useDar

  • Vue3组件挂载之创建组件实例详解

    目录 前情提要 mountComponent 创建组件实例 总结 前情提要 上文我们讲解了执行createApp(App).mount('#root')中的mount函数,我们分析了创建虚拟节点的几个方法,以及setRef的执行机制.本文我们继续讲解mountComponent,挂载组件的流程. 本文主要内容 createComponentInstance发生了什么? 如何标准化组件定义的props.emits? 为什么provide提供的值子组件都能访问到? 组件的v-model实现原理.组件

随机推荐