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

news2024/10/6 4:04:05

大家有没有想过,为什么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 = ?
,还有就是更深层次的监测,需要用到递归,日后为大家带来更有意思的代码

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

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

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

相关文章

Harbor 的安装及使用

Harbor 安装官网手册: https://goharbor.io/docs/2.10.0/install-config/download-installer/ Harbor 发布包地址: https://github.com/goharbor/harbor/releases 在部署harbor的前提下先安装docker 和 docker-compose 安装docker:https://d…

Opencv基础与学习路线

Opencv Opencv每一篇目具体: Opencv(1)读取与图像操作 Opencv(2)绘图与图像操作 Opencv(3)详解霍夫变换 Opencv(4)详解轮廓 Opencv(5)平滑处理 具体Opencv相关demo代码欢迎访问我的github仓库(包含python和c代码) demo代码 文章目录 Opencv一…

<专利>机器人3D视觉快速定位抓取方法及系统

摘要,此专利无可用的关键技术信息,基本都是下面几句话反复说。。。 本发明提供了一种机器人3D快速定位抓取方法及系统, 包括: 通过高速的3D结构光成像对目标物体的表面轮廓进行扫描, 形成点云数据;对所述点…

idea 手动打 jar 包

1.在 File 中找到并点击 Project Structure 2.按图中高亮的部分依次点击 3.在 Main Class 处设置要打包的类,记得在 Directory for ... 处设置目录为根目录,设置好以后点击两次 OK 回到首页 4.在页面上方找到 Build ,点击 Build Artifacts...…

蓝桥杯练习系统(算法训练)ALGO-993 RP大冒险

资源限制 内存限制:64.0MB C/C时间限制:200ms Java时间限制:600ms Python时间限制:1.0s 问题描述 请尽情使用各种各样的函数来测试你的RP吧~~~ 输入格式 一个数N表示测点编号。 输出格式 一个0~9的数。 样例输入 0 样…

基于React全栈Sora AI视频案例展示项目

花了一天时间基于React Next全栈开发的Sora AI 演示项目 Preview: https://sora.langchat.cn/ Github:https://github.com/tycoding/lang-sora 欢迎大家star、fork呀! 这是一套完整的React & Next.js项目,包含前后端交互、路由、数据库…

Android14之解决编译报错:bazel: no such file or directory(一百八十九)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

企业微信变更主体怎么改?

企业微信变更主体有什么作用?做过企业运营的小伙伴都知道,很多时候经常会遇到现有的企业需要注销,切换成新的企业进行经营的情况,但是原来企业申请的企业微信上面却积累了很多客户,肯定不能直接丢弃,所以这…

靶机渗透之sar

Name: Sar: 1Date release: 15 Feb 2020Author: LoveSeries: Sar Download: https://drive.google.com/open?id1AFAmM21AwiAEiVFUA0cSr_GeAYaxd3lQ 对于vulnhub中的靶机,我们都需先下载镜像,然后导入VM,并将网络连接改为NAT模式。首先我们…

uniapp实战:父子组件对象数组传参

需求说明 1.父组件传参给子组件 1.1子组件中定义属性unitList 1.2 父组件中将data中的unitList传递给子组件 2.子组件向父组件传参 2.1子组件设置用户名文本框以及切换操作属性 2.2 子组件对应操作(文本输入以及按钮切换)添加自…

【学习笔记】深度学习实战 | LeNet

简要声明 学习相关网址 [双语字幕]吴恩达深度学习deeplearning.aiPapers With CodeDatasets 深度学习网络基于PyTorch学习架构,代码测试可跑。本学习笔记单纯是为了能对学到的内容有更深入的理解,如果有错误的地方,恳请包容和指正。 参考文献…

C# 获取类型 Type.GetType()

背景 C#是强类型语言,任何对象都有Type,有时候需要使用Type来进行反射、序列化、筛选等,获取Type有Type.GetType, typeof(),object.GetType() 等方法,本文重点介绍Type.GetType()。 系统类型/本程序集内的类型 对于系…

C++——模板详解

目录 模板 函数模板 显示实例化 类模板 模板特点 模板 模板,就是把一个本来只能对特定类型实现的代码,变成一个模板类型,这个模板类型能转换为任何内置类型,从而让程序员只需要实现一个模板,就能对不同的数据进行操…

2024年 前端JavaScript Web APIs 第二天 笔记

Web APIs 第二天 2.1 -事件监听以及案例 2.2 -随机点名案例 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><t…

Git分布式版本控制系统——git学习准备工作

一、Git仓库介绍 开发者可以通过Git仓库来存储和管理文件代码&#xff0c;Git仓库分为两种&#xff1a; 本地仓库&#xff1a;开发人员自己电脑上的Git仓库 远程仓库&#xff1a;远程服务器上的Git仓库 仓库之间的运转如下图&#xff1a; commit&#xff1a;提交&#xff…

Pytorch 复习总结 4

Pytorch 复习总结&#xff0c;仅供笔者使用&#xff0c;参考教材&#xff1a; 《动手学深度学习》Stanford University: Practical Machine Learning 本文主要内容为&#xff1a;Pytorch 深度学习计算。 本文先介绍了深度学习中自定义层和块的方法&#xff0c;然后介绍了一些…

Doccano 修复 spacy.gold 的bug

引言 最初只是想把Doccano标注的数据集转换成BIO(类似conll2003数据集)的标注格式&#xff1b; 按照PR的修改意见实现了修改&#xff0c;但是本人不建议这么做&#xff1b; 应该随着Doccano的升级&#xff0c;Doccano的导出格式发生了变化&#xff0c;而原来的doccano-transfo…

正确认识肠道内脆弱拟杆菌——其在健康的阴暗面和光明面

谷禾健康 脆弱拟杆菌(Bacteroides fragilis)是拟杆菌门拟杆菌属的重要成员。事实上&#xff0c;脆弱拟杆菌因其免疫调节功能而成为该属中研究最多的共生微生物。它是革兰氏阴性、不形成孢子、杆状专性厌氧菌。在人类健康中扮演着复杂而双面的角色。 这种革兰氏阴性专性厌氧菌常…

架构设计方法(4A架构)-信息架构

1、 信息架构&#xff08;IA&#xff09;&#xff1a;现实事物在IT世界的建模体现 2、数据资产目录 3、 识别业务对象&#xff1a;业务对象的设计方法 设计方法 1.基于业务流程识别业务活动。 2. 识别业务流程中每个业务活动的输入、输出等BI&#xff08;Business Item&#…

Zabbix企业运维监控工具

Zabbix企业级监控方案 常见监控软件介绍 Cacti Cacti是一套基于 PHP、MySQL、SNMP 及 RRD Tool 开发的监测图形分析工具&#xff0c;Cacti 是使用轮询的方式由主服务器向设备发送数据请求来获取设备上状态数据信息的,如果设备不断增多,这个轮询的过程就非常的耗时&#xff0…