vue3中如何获取proxy包裹的数据

目录
  • 如何获取proxy包裹的数据
    • 具体问题
    • 解决办法
  • vue3 proxy基本用法
    • 新的改变
    • 基本使用

如何获取proxy包裹的数据

在进行 vue3+ts+elementplus 重构vue2项目时遇到了关于proxy的问题

具体问题

使用el-upload组件进行图片上传，然后绑定handleChange方法进行图片改变的监听，将上传的图片push到fileList数组中。

const handleChange: UploadProps['onChange'] = (file, fileList1) => {
  //当改变时，将fileList1push到fileList数组，然后用fileList进行之后的处理
  fileList.push(fileList1)
  console.log('测试',fileList)
}

然后声明一个form表单，对数组进行遍历，插入form表单。此时发现问题：fileList是proxy对象

如图所示，fileList数组被proxy包裹

解决办法

查资料了解到：vue3使用proxy代替vue2的object.defineProperty，相当于在对象前设置的“拦截”

可以利用序列化获取，因为这里所取值为数组第一项，所以修改为：

JSON.parse(JSON.stringify(fileList))[0]

输出如图

综上，解决了取出proxy中数据的方法，然后就是对其foreach遍历等操作

vue3 proxy基本用法

新的改变

  • 我们的vue3 使用proxy 来代替vue2 的 Object.defineProperty
  • 效率更高，值得我们学习

基本使用

  <script>
        var target = {
            name: "xiaoming",
            age: 18
        }
        // handler 是一个对象
        const handler = {
            set(target, prop, value) {
                let result = Reflect.set(target, prop, value)
                console.log("设置的操作" + result)
                return true;
            },
            get(target, value) {
                let result = Reflect.get(target, value)
                console.log("获取的的操作" + result)
            }
        }
        let proxy = new Proxy(target, handler);
        proxy.coure = "java"
        console.log(proxy)
    </script>

这个打印效果：

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • proxy实现vue3数据双向绑定原理

    目录 一.proxy对比Object.defineProperty的优点 二..proxy监听对象的简单实现 1.代理对象简单实现 2.补充知识 Reflect 3.proxy方法 三.手写vue3.0双向绑定-es6 Proxy 1.什么是Proxy 2.vue.js中使用双向绑定 四.Proxy对比Object.defineProperty 一.proxy对比Object.defineProperty的优点 proxy的优点: Proxy 可以直接监听对象而非属性: Proxy 可以直接监听

  • 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) { // 创

  • Vue3 的响应式和以前有什么区别，Proxy 无敌？

    前言 大家都知道,Vue2 里的响应式其实有点像是一个半完全体,对于对象上新增的属性无能为力,对于数组则需要拦截它的原型方法来实现响应式. 举个例子: let vm = new Vue({ data() { return { a: 1 } } }) // ❌ oops,没反应! vm.b = 2 let vm = new Vue({ data() { return { a: 1 } }, watch: { b() { console.log('change !!') } } }) // ❌ oo

  • vue3为什么要用proxy替代defineProperty

    在这之前,我们得先了解下vue的核心理念mutable 不管是vue2还是vue3,在实现的过程中,核心概念一直保持稳定,以可变数据源为核心的理念,来实现整个UI变动更新 用最简单的讲法就是:初始化数据生成了页面,直接修改源数据触发更新,页面重新渲染 关注vue的人都知道,vue3里面使用了proxy替换了defineProperty, 在使用vue2的时候,我们经常会碰到一个问题,添加新的对象属性obj.a = 1会无法被vue2劫持,必须使用vue2提供的$set方法来进行更新 这个的原因想

  • Vue3使用Proxy实现数据监听的原因分析

    vue 数据双向绑定原理,而这个方法有缺点,并且不能实现数组和对象的部分监听情况;具体也可以看我之前写的一篇博客: 关于 Vue 不能 watch 数组 和 对象变化的解决方案,最新的 Proxy,相比 vue2 的 Object.defineProperty,能达到速度加倍.内存减半的成效.具体是怎么实现.以及对比旧的实现方法为啥能有速度加倍.内存减半的特性,下面我们来聊聊: Vue 初始化过程 Vue 的初始化过程,分别有Observer.Compiler和Watcher,当我们 new V

  • vue3中如何获取proxy包裹的数据

    vue3中如何获取proxy包裹的数据

    目录 如何获取proxy包裹的数据 具体问题 解决办法 vue3 proxy基本用法 新的改变 基本使用 如何获取proxy包裹的数据 在进行 vue3+ts+elementplus 重构vue2项目时遇到了关于proxy的问题 具体问题 使用el-upload组件进行图片上传,然后绑定handleChange方法进行图片改变的监听,将上传的图片push到fileList数组中. const handleChange: UploadProps['onChange'] = (file, fileL

  • vue3中的对象时为proxy对象如何获取值(两种方式)

    目录 第一种获取target值的方式: 第二种获取target值 PS:vue3中获取proxy包裹的数据 前言 一.具体问题 二.解决办法 使用vue3.0时,因为底层是使用proxy进行代理的所以当我们打印一些值得时候是proxy代理之后的是Proxy对象,Proxy对象里边的[[Target]]才是真实的对象. 第一种获取target值的方式: 通过vue中的响应式对象可使用 toRaw() 方法获取原始对象 //第一种获取target值的方式,通过vue中的响应式对象可使用toRaw()

  • vue3中获取ref元素的几种方式总结

    目录 vue3获取ref元素方式 vue3中ref获取dom(包含for循环) 情况一:只是单纯的获取某个dom元素 情况二:在for循环中获取dom元素 情况三:获取ref中的ref vue3获取ref元素方式 1. 原生js获取dom元素: document.querySelector(选择器) document.getElementById(id选择器) document.getElementsByClassName(class选择器) 2. ref获取单个dom元素: <template

  • 理解Proxy及使用Proxy实现vue数据双向绑定操作

    1.什么是Proxy?它的作用是? 据阮一峰文章介绍:Proxy可以理解成,在目标对象之前架设一层 "拦截",当外界对该对象访问的时候,都必须经过这层拦截,而Proxy就充当了这种机制,类似于代理的含义,它可以对外界访问对象之前进行过滤和改写该对象. 如果对vue2.xx了解或看过源码的人都知道,vue2.xx中使用 Object.defineProperty()方法对该对象通过 递归+遍历的方式来实现对数据的监控的,具体了解 Object.defineProperty可以看我上一篇文

  • Vue3中的ref为何要用.value进行值的调用呢

    目录 Vue3中ref为何要用.value进行值的调用 Vue3 ref告别.value Ref 语法糖在项目中的使用 Vue3中ref为何要用.value进行值的调用 在Vue2中,所有的数据都通过一个Data进行统一的返回,并且在data中对某个组件要用的数据进行统一的管理,常见的使用形式是这样的: <template>   <div class="div">     <todos :Obj="tos" :removeObj=&qu

  • Vue3 中的数据侦测的实现

    Vue3 中的数据侦测的实现

    在10月05日凌晨Vue3的源代码正式发布了,来自官方的消息: 目前的版本是 Pre-Alpha , 仓库地址:Vue-next,可以通过Composition API了解更多新版本的信息,目前版本单元测试相关情况vue-next-coverage. 文章大纲: Vue 的核心之一就是响应式系统,通过侦测数据的变化,来驱动更新视图. 实现可响应对象的方式 通过可响应对象,实现对数据的侦测,从而告知外界数据变化.实现可响应对象的方式: getter 和 setter defineProperty

  • vue3中proxy的基本用法说明

    vue3中proxy的基本用法说明

    目录 vue3 proxy基本用法 新的改变 基本使用 vue3中proxy代理 理解Proxy代理 vue3 proxy基本用法 新的改变 我们的vue3 使用proxy 来代替vue2 的 Object.defineProperty 效率更高,值得我们学习 基本使用 <script> var target = { name: "xiaoming", age: 18 } // handler 是一个对象 const handler = { set(target, prop

  • vue3中通过ref获取元素节点的实现

    vue3中通过ref获取元素节点的实现

    目录 通过ref获取元素节点 获取ref元素的几种方式小结 1. 原生js获取dom元素 2. ref获取单个dom元素 3. ref获取v-for循环中的dom元素 4. 在swiper中获取swiper的dom元素 通过ref获取元素节点 ref 在vue2中可以说简化js原生的document.getElementById("#id")操作 .当然在vue3中也一样 首先,给你想获取到的元素一个ref 属性 然后,再将这个ref对象创建出来,就可以访问到他的值 但是.这样在set

  • Vue3中使用setup通过ref获取子组件的属性

    Vue3中使用setup通过ref获取子组件的属性

    目录 setup通过ref获取子组件的属性 调用子组件的属性和方法 setup通过ref获取子组件的属性 主要依赖defineExpose 子组件通过 defineExpose将数据抛出 <template>   <div class="test-com">testCom</div> </template> <script setup lang="ts"> import { ref } from 'vue'

随机推荐