Vue之监测数据的原理(对象)

大家有没有想过,为什么vue可以监测到数据发生改变?其实底层借助了Object.defineProperty,底层有一个Observer的构造函数
让我为大家简单的介绍一下吧!
我用对象为大家演示一下

    const vm = new Vue({
        el: "#app",
        data: {
            obj: {
                a: 1,
                b: 2
            }
        }
    })
    console.log(vm._data);

在这里插入图片描述
我们有没有办法,我们修改了数据,控制台提示我们修改了这个数据

我们不借助vue来实现一下吧!

    let data = {
        a: 1,
        b: 2
    }
    // 创建一个监测data的实例化对象
    let obs = new Observer(data)
    // 准备一个vm实例对象
    let vm = {}
    vm._data = data = obs
    function Observer(obj) {
        // 汇总成一个数组
        let keys = Object.keys(obj)
        keys.forEach(k => {
            // this 指向实例化对象上
            Object.defineProperty(this, k, {
                get() {
                    return obj[k]
                },
                set(val) {
                    obj[k] = val
                    console.log(k + "被修改了");
                }
            })
        })
    }

这是不完善的,在vue的底层还有功能这里没有实现,就比如vue可以直接vm.a = ?
,还有就是更深层次的监测,需要用到递归,日后为大家带来更有意思的代码

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

LNMP架构(搭建论坛+博客)

目录 一、LNMP架构概述 1、LNMP架构的概念 2、LNMP架构的优点 二、编译安装nginx软件 1、准备工作 1.1 关闭防火墙 1.2 安装依赖包 1.3 创建运行nginx用户 1.4 压缩包解压 2、编译与安装 3、添加nginx自启动文件 三、编译安装mysql软件 1、准备工作 1.1 安装mysq…

循环队列的实现

文章目录 循环队列的概念循环队列的实现循环队列的判空和判满链表or数组 循环队列的概念 设计你的循环队列实现。 循环队列是一种线性数据结构,其操作表现基于 FIFO(先进先出)原则并且队尾被连接在队首之后以形成一个循环。它也被称为“环形缓…

网站文章被百度快速收录的工具

百度是中国最主要的搜索引擎之一,对于网站管理员来说,网站文章被百度快速收录是至关重要的,因为这直接影响着文章的曝光和网站的流量。然而,许多网站管理员都会问一个常见的问题:文章百度收录需要几天?在这…

【HTML】HTML基础1(第一个网站!)

目录 软件使用 HTML的基本结构 案例示范 用记事本编写网页 软件使用 注释&#xff1a;<!-- -->中的内容是注释内容&#xff0c;自己写代码的时候可以没有&#xff01; HTML的基本结构 <!DOCTYPE html> <!-- 文档声明&#xff0c;位于文档最前面位置 -->…

STM32 IIC协议基础概念

文章目录 前言一、IIC协议介绍二、IIC硬件框图和程序层次三、IIC协议1.IIC协议通信流程2.IIC的引脚为什么需要加入上拉电阻3.IIC的引脚为什么需要配置为开漏输出 四、STM32 IIC硬件结构总结 前言 本篇文章将带大家学习IIC通信协议的一些基础概念和使用。 一、IIC协议介绍 I2…

国产数据库兼容性认证再下两城,极狐GitLab 国产适配更进一步

近日&#xff0c;极狐GitLab 与两大国产数据库 TDSQL 和人大金仓完成兼容性认证。极狐GitLab 在国产化适配、国产化生态建设上有了进一步的发展。 极狐GitLab 团队分别和 TDSQL 和人大金仓数据库团队做了严格的测试验证&#xff0c;完成了这两大国产数据库和极狐GitLab 企业级一…

面试题JS篇

目录 Js 基本数据类型有哪些Ajax 如何使用如何判断一个数据是 NaN&#xff1f;Js 中 null 与 undefined 区别闭包是什么&#xff1f;有什么特性&#xff1f;对页面会有什么影响JS中模块化的方法Js 中常见的内存泄漏什么是事件冒泡&#xff1f;如何阻止事件冒泡&#xff1f;事件…

服务器git安装python包失败,如何手动下载github项目包并安装到虚拟环境中(简单易懂)

背景&#xff1a; 想要复现一个项目&#xff0c;建立好虚拟环境后&#xff0c;准备安装项目需要的包&#xff0c;故输入命令pip install -r requirements.txt requirements.txt如下图 其他包我都安装成功了&#xff0c;只有最后一个包失败了&#xff0c;是需要服务器git链接…

CUDA C:查看GPU设备信息

相关阅读 CUDA Chttps://blog.csdn.net/weixin_45791458/category_12530616.html?spm1001.2014.3001.5482 了解自己设备的性能是很有必要的&#xff0c;为此CUDA 运行时(runtime)API给用户也提供了一些查询设备信息的函数&#xff0c;下面的函数用于查看GPU设备的一切信息。 …

Android PDFView 提示401 pom

背景 在开发安卓app&#xff0c;使用PDF组件来解析URL地址 &#xff0c;从github找到一个开源组件 AndroidPdfViewer 遇到一个大坑&#xff0c;一直提示下载依赖401 pom 打开控制台链接弹出需要登录jitpack 原因分析&#xff1a; 这个组件项目依赖库链接到了需要鉴权的…

VuePress + GitHub 搭建个人博客踩坑记录

最近想给我教练搭个网站,本来选的是 VuePress 框架,也折腾完了,起码是搭建出来了,踩的坑也都总结好了 但是最近发现了一个更简洁的模板: VuePress-theme-hope ,所以最终网站使用的样式是这个 不过我觉得这里面踩坑的记录应该还是有些价值的,分享出来,看看能不能帮到一些小伙伴~…

ODOO12设置收发邮件服务器教程

一、设置-技术 二、设置–技术–发件服务器 信息填写完整后&#xff0c;点击‘测试连接’&#xff0c;若提示成功&#xff0c;则发件服务器设置成功。 三、设置–技术–收件服务器 四、设置–参数–系统参数 修改之前的email系统参数&#xff1a; mail.catchall.alias: 收件服…

【Maven】Maven 基础教程(二):Maven 的使用

《Maven 基础教程》系列&#xff0c;包含以下 2 篇文章&#xff1a; Maven 基础教程&#xff08;一&#xff09;&#xff1a;基础介绍、开发环境配置Maven 基础教程&#xff08;二&#xff09;&#xff1a;Maven 的使用 &#x1f60a; 如果您觉得这篇文章有用 ✔️ 的话&#…

「MySQL」基本操作类型

&#x1f387;个人主页&#xff1a;Ice_Sugar_7 &#x1f387;所属专栏&#xff1a;数据库 &#x1f387;欢迎点赞收藏加关注哦&#xff01; 数据库的操作 创建、显示数据库 使用 create 创建一个数据库 create database goods;然后可以用 show databases 来查看已经创建的数…

人大金仓与mysql的差异与替换

人大金仓中不能使用~下面的符号&#xff0c;字段中使用”&#xff0c;无法识别建表语句 创建表时语句中只定义字段名.字段类型.是否是否为空 Varchar类型改为varchar&#xff08;长度 char&#xff09; Int(0) 类型为int4 定义主键&#xff1a;CONSTRAINT 键名 主键类型&#x…

32单片机基础:TIM输出比较

这个输出比较功能是非常重要的&#xff0c;它主要是用来输出PWM波形,PWM波形又是驱动电机的必要条件&#xff0c;所以你如果想用STM32做一些有电机的项目&#xff0c;比如智能车&#xff0c;机器人等。 IC: Input Capture 输入捕获 CC:Capture/Compare一般表示输入捕获和输出…

爱心商城|爱心商城系统|基于Springboot的爱心商城系统设计与实现(源码+数据库+文档)

爱心商城系统目录 目录 基于Springboot的爱心商城系统设计与实现 一、前言 二、系统功能设计 三、系统功能设计 1、商品管理 2、捐赠管理 3、公告管理 4、公告类型管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#x…

spring boot学习第十三篇:使用spring security控制权限

该文章同时也讲到了如何使用swagger。 1、pom.xml文件内容如下&#xff1a; <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instanc…

华为配置WLAN高密业务示例

配置WLAN高密业务示例 组网图形 图1 配置高密WLAN环境网络部署组网图 业务需求组网需求数据规划配置思路配置注意事项操作步骤配置文件 业务需求 体育场由于需要接入用户数量很大&#xff0c;AP间部署距离较小&#xff0c;因此AP间的干扰较大&#xff0c;可能导致用户上网网…

PostgreSQL从入门到精通教程 - 第45讲:poc-tpcc测试

PostgreSQL从小白到专家&#xff0c;是从入门逐渐能力提升的一个系列教程&#xff0c;内容包括对PG基础的认知、包括安装使用、包括角色权限、包括维护管理、、等内容&#xff0c;希望对热爱PG、学习PG的同学们有帮助&#xff0c;欢迎持续关注CUUG PG技术大讲堂。 第45讲&#…