Vue3.0里为什么要用 Proxy API 替代 defineProperty API

news2024/12/28 18:00:20

一、Object.defineProperty

定义:Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象

为什么能实现响应式

通过defineProperty 两个属性,getset

  • get

属性的 getter 函数,当访问该属性时,会调用此函数。执行时不传入任何参数,但是会传入 this 对象(由于继承关系,这里的this并不一定是定义该属性的对象)。该函数的返回值会被用作属性的值

  • set

属性的 setter 函数,当属性值被修改时,会调用此函数。该方法接受一个参数(也就是被赋予的新值),会传入赋值时的 this 对象。默认为 undefined

下面通过代码展示:

定义一个响应式函数defineReactive

function update() {
    app.innerText = obj.foo
}

function defineReactive(obj, key, val) {
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                val = newVal
                update()
            }
        }
    })
}

调用defineReactive,数据发生变化触发update方法,实现数据响应式

const obj = {}
defineReactive(obj, 'foo', '')
setTimeout(()=>{
    obj.foo = new Date().toLocaleTimeString()
},1000)

在对象存在多个key情况下,需要进行遍历

function observe(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

如果存在嵌套对象的情况,还需要在defineReactive中进行递归

function defineReactive(obj, key, val) {
    observe(val)
    Object.defineProperty(obj, key, {
        get() {
            console.log(`get ${key}:${val}`);
            return val
        },
        set(newVal) {
            if (newVal !== val) {
                val = newVal
                update()
            }
        }
    })
}

当给key赋值为对象的时候,还需要在set属性中进行递归

set(newVal) {
    if (newVal !== val) {
        observe(newVal) // 新值是对象的情况
        notifyUpdate()
    }
}

上述例子能够实现对一个对象的基本响应式,但仍然存在诸多问题

现在对一个对象进行删除与添加属性操作,无法劫持到

const obj = {
    foo: "foo",
    bar: "bar"
}
observe(obj)
delete obj.foo // no ok
obj.jar = 'xxx' // no ok

当我们对一个数组进行监听的时候,并不那么好使了

const arrData = [1,2,3,4,5];
arrData.forEach((val,index)=>{
    defineProperty(arrData,index,val)
})
arrData.push() // no ok
arrData.pop()  // no ok
arrDate[0] = 99 // ok

可以看到数据的api无法劫持到,从而无法实现数据响应式,

所以在Vue2中,增加了setdelete API,并且对数组api方法进行一个重写

还有一个问题则是,如果存在深层的嵌套对象关系,需要深层的进行监听,造成了性能的极大问题

小结

  • 检测不到对象属性的添加和删除
  • 数组API方法无法监听到
  • 需要对每个属性进行遍历监听,如果嵌套对象,需要深层监听,造成性能问题

二、proxy

Proxy的监听是针对一个对象的,那么对这个对象的所有操作会进入监听操作,这就完全可以代理所有属性了

ES6系列中,我们详细讲解过Proxy的使用,就不再述说了

下面通过代码进行展示:

定义一个响应式方法reactive

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相当于在对象外层加拦截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`获取${key}:${res}`)
            return res
        },
        set(target, key, value, receiver) {
            const res = Reflect.set(target, key, value, receiver)
            console.log(`设置${key}:${value}`)
            return res
        },
        deleteProperty(target, key) {
            const res = Reflect.deleteProperty(target, key)
            console.log(`删除${key}:${res}`)
            return res
        }
    })
    return observed
}

测试一下简单数据的操作,发现都能劫持

const state = reactive({
    foo: 'foo'
})
// 1.获取
state.foo // ok
// 2.设置已存在属性
state.foo = 'fooooooo' // ok
// 3.设置不存在属性
state.dong = 'dong' // ok
// 4.删除属性
delete state.dong // ok

再测试嵌套对象情况,这时候发现就不那么 OK 了

const state = reactive({
    bar: { a: 1 }
})

// 设置嵌套对象属性
state.bar.a = 10 // no ok

如果要解决,需要在get之上再进行一层代理

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相当于在对象外层加拦截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`获取${key}:${res}`)
            return isObject(res) ? reactive(res) : res
        },
    return observed
}

三、总结

Object.defineProperty只能遍历对象属性进行劫持

function observe(obj) {
    if (typeof obj !== 'object' || obj == null) {
        return
    }
    Object.keys(obj).forEach(key => {
        defineReactive(obj, key, obj[key])
    })
}

Proxy直接可以劫持整个对象,并返回一个新对象,我们可以只操作新的对象达到响应式目的

function reactive(obj) {
    if (typeof obj !== 'object' && obj != null) {
        return obj
    }
    // Proxy相当于在对象外层加拦截
    const observed = new Proxy(obj, {
        get(target, key, receiver) {
            const res = Reflect.get(target, key, receiver)
            console.log(`获取${key}:${res}`)
            return res
        },
        set(target, key, value, receiver) {
            const res = Reflect.set(target, key, value, receiver)
            console.log(`设置${key}:${value}`)
            return res
        },
        deleteProperty(target, key) {
            const res = Reflect.deleteProperty(target, key)
            console.log(`删除${key}:${res}`)
            return res
        }
    })
    return observed
}

Proxy可以直接监听数组的变化(pushshiftsplice

const obj = [1,2,3]
const proxtObj = reactive(obj)
obj.psuh(4) // ok

Proxy有多达13种拦截方法,不限于applyownKeysdeletePropertyhas等等,这是Object.defineProperty不具备的

正因为defineProperty自身的缺陷,导致Vue2在实现响应式过程需要实现其他的方法辅助(如重写数组方法、增加额外setdelete方法)

// 数组重写
const originalProto = Array.prototype
const arrayProto = Object.create(originalProto)
['push', 'pop', 'shift', 'unshift', 'splice', 'reverse', 'sort'].forEach(method => {
  arrayProto[method] = function () {
    originalProto[method].apply(this.arguments)
    dep.notice()
  }
});

// set、delete
Vue.set(obj,'bar','newbar')
Vue.delete(obj),'bar')

Proxy 不兼容IE,也没有 polyfill, defineProperty 能支持到IE9

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1510634.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

北斗卫星助力海上风电厂:打造海上绿色能源新时代

北斗卫星助力海上风电厂:打造海上绿色能源新时代 近日,东海航海保障中心温州航标处在华能苍南海上风电场完成首套北斗水上智能感知综合预警系统现场安装调试工作,经现场效能测定,能有效保障海上风电场运行安全和海域船舶通航安全…

华为OD机试 - 模拟数据序列化传输(Java JS Python C C++)

题目描述 模拟一套简化的序列化传输方式,请实现下面的数据编码与解码过程 编码前数据格式为 [位置,类型,值],多个数据的时候用逗号分隔,位置仅支持数字,不考虑重复等场景;类型仅支持:Integer / String / Compose(Compose的数据类型表示该存储的数据也需要编码)编码后数…

光电容积脉搏波PPG信号分析笔记

1.脉搏波信号的PRV分析 各类分析参数记参数 意义 公式 参数意义 线性分析 时域分析 均值MEAN 反应RR间期的平均水平 总体标准差SDNN 评估24小时长程HRV的总体变化, SDNN < 50ms 为异常,SDNN>100ms 为正常;…

如何解决爬虫程序访问速度受限问题

目录 前言 一、代理IP的获取 1. 自建代理IP池 2. 购买付费代理IP 3. 使用免费代理IP网站 二、代理IP的验证 三、使用代理IP进行爬取 四、常见问题和解决方法 1. 代理IP不可用 2. 代理IP速度慢 3. 代理IP被封禁 总结 前言 解决爬虫程序访问速度受限问题的一种常用方…

群晖部署私人聊天服务器Vocechat并结合内网穿透实现公网远程访问

文章目录 1. 拉取Vocechat2. 运行Vocechat3. 本地局域网访问4. 群晖安装Cpolar5. 配置公网地址6. 公网访问小结 7. 固定公网地址 如何拥有自己的一个聊天软件服务? 本例介绍一个自己本地即可搭建的聊天工具,不仅轻量,占用小,且功能也停强大,它就是Vocechat. Vocechat是一套支持…

怎么把视频变成gif动图?一招在线生成gif动画

MP4是一种常见的视频文件格式,它是一种数字多媒体容器格式,可以用于存储视频、音频和字幕等多种媒体数据。MP4格式通常用于在计算机、移动设备和互联网上播放和共享视频内容。要将MP4视频转换为GIF格式,您可以使用专门的视频转gif工具。这个工…

中科数安|——如何防止别人复制文档内容?

#如何防止别人复制文档内容# 中科数安所提供的防止别人复制文档内容的措施主要包括但不限于以下几个方面: www.weaem.com 1. **文档加密与权限控制**: - 对关键文档进行加密处理,确保只有获得授权的人员才能解密并查看文档内容。 - 实施精…

Java项目:基于Springboot+vue实现的付费自习室系统设计与实现(源码+数据库+毕业论文)附含微信小程序端代码

一、项目简介 本项目是一套基于Springbootvue实现的付费自习室系统 包含:项目源码、数据库脚本等,该项目附带全部源码可作为毕设使用。 项目都经过严格调试,eclipse或者idea 确保可以运行! 该系统功能完善、界面美观、操作简单、…

即时设计是什么?设计大佬在线讲解

即时设计是一种互联网产品设计工具。产品原型设计软件由以下四个部分介绍: 1、什么是即时设计? 2、即时设计产品和服务怎么样? 3、即时设计的优点是什么?优点是什么? 4、即时设计的客户是什么?哪些公司…

windows的vmdk文件转qcow2运行蓝屏

背景 使用qemu-img将做好的vmware虚拟机转为qcow2到gns3中运行,Linux、Win7、Win10都没出现蓝屏,但Win XP却在开机时蓝屏了,错误代码:0x0000007B 解决方案 最终在proxmox上找到方案:https://pve.proxmox.com/wiki/Ad…

(一区)基于模型的连续和离散全局优化方法

Model-based methods for continuous and discrete global optimization 1.摘要 本文综述了下基于模型的连续和离散全局优化方法,并提出了一种叠加替代信息的新方法。 2.介绍 比较水。。作者说,本文是首次尝试提供对连续和离散建模方法的可理解的调查…

微信自动回复的优势及设置方法

自动回复功能的优势: 1、可设置不重复触发时间和生效时间段,回复效果更智能,提升联系人体验; 2、可以多微信同时设置,可直接导入素材库内容,提高工作效率; 3、多个关键词、多条回复内容&…

可视化表单流程编辑器为啥好用?

想要提升办公率、提高数据资源的利用率,可以采用可视化表单流程编辑器的优势特点,实现心中愿望。伴随着社会的进步和发展,提质增效的办公效果一直都是很多职场办公团队的发展需求,作为低代码技术平台服务商,流辰信息团…

FreeRTOS操作系统学习——事件组

事件组介绍 一个事件组就是一组的事件位,事件组中的事件位通过位编号来访问。事件位用来表明某个事件是否发生,事件位通常用作事件标志。 事件组用一个整数来表示,其中的高8位留给内核使用,只能用其他的位来表示事件。那么这个整…

Liinux——(网络)socket编程

预备知识 源IP地址和目的IP地址 在IP数据包头部中, 有两个IP地址, 分别叫做源IP地址, 和目的IP地址 认识端口号 端口号(port)是传输层协议的内容. 端口号是一个2字节16位的整数;端口号用来标识一个进程, 告诉操作系统, 当前的这个数据要交给哪个进程来处理;IP地址 端口号能…

碾压GPT-4!Claude3到底有多强?

2024年3月4日,官方宣布推出 Claude 3 模型系列,它在广泛的认知任务中树立了新的行业基准。该系列包括三个按能力递增排序的最先进模型:Claude 3 Haiku、Claude 3 Sonnet 和 Claude 3 Opus。每个后续模型都提供越来越强大的性能,允…

【C++】—— 建造者模式

目录 (一)概念详解 (二)代码详解 (三)建造者优缺点详解 (一)概念详解 建造者模式是⼀种创建型设计模式,使⽤多个简单的对象⼀步⼀步构建成⼀个复杂的对象&#xff0c…

静图转换gif动图怎么操作?用这个网站一键生成

静态图片是指一张固定的、不具有动画效果的图像。它是由像素点组成的,每个像素点都有自己的颜色值,形成了整个图像。静态图片通常以常见的图像格式保存,并且在打开时显示相同的内容,没有任何动态变化。动态图片是指一系列图像帧按…

MySQL8.0安装教程+使用Navicat远程连接

MySQL8.0安装教程使用Navicat远程连接 版本:MySQL8.0.28 环境:Windows11 1.MySQL下载 进入官网https://www.mysql.com/进行下载: 2.安装MySQL 下载好后,点击运行程序开始安装,安装步骤如下: 以下步骤验…

linux GitLab 私有仓库的搭建

下载地址 gitLab 安装包下载地址:https://about.gitlab.com/install/ 环境准备: 环境:CentOS7.6 安装包:gitlab-ce-8.9.5-ce.0.el7.x86_64.rpm 硬件配置: 4G 安装步骤: 安装: [rootserver3 ~]…