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 = obsfunction Observer(obj) {// 汇总成一个数组let keys = Object.keys(obj)keys.forEach(k => {// this 指向实例化对象上Object.defineProperty(this, k, {get() {return obj[k]},set(val) {obj[k] = valconsole.log(k + "被修改了");}})})}

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

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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

力扣hot100:42.接雨水

什么时候能用双指针? (1)对撞指针: ①两数和问题中可以使用双指针,先将两数和升序排序,可以发现规律,如果当前两数和大于target,则右指针向左走。 ②接雨水问题中,左边最…

基于STM32F4的FFT(快速傅里叶变换)求信号幅值,频率,相位差

基于STM32F4的FFT(快速傅里叶变换)求信号幅值,频率,相位差 一。FFT原理介绍 快速傅里叶变换(Fast Fourier Transform,FFT)是一种用于高效计算傅里叶变换的算法。傅里叶变换是一种信号处理技术…

动态规划|【双指针】|11.盛水最多的容器

题目 11. 盛最多水的容器 给定一个长度为 n 的整数数组 height 。有 n 条垂线,第 i 条线的两个端点是 (i, 0) 和 (i, height[i]) 。 找出其中的两条线,使得它们与 x 轴共同构成的容器可以容纳最多的水。 返回容器可以储存的最大水量。 说明&#xf…

发现了一个超级好用的上网神器!但是不知道在哪里有卖······随身WiFi好评推荐,随身WiFi好用吗?

这两天到一个小地方出差, 走到一个奶茶店附近, 突然老板打电话说一个紧急文件需要我处理, 说实话有点崩溃, 前不着村后不着店的, 我去哪里找网络办公 辛亏奶茶店的小姐姐听到了, 让我在她店里&#x…

LVS负载均衡服务器

简介: LVS (Linux Virtual Server):四层路由设备,是由中国人章文松研发的(阿里巴巴的副总裁)根据用户请求的IP与端口号实现将用户的请求分发至不同的主机。 工作原理: LVS工作在一台server上提供Directory(负载均衡器)的功能,本身并不提供服务&#xff…

【一起学习Arcade】(6):属性规则实例_约束规则和验证规则

一、约束规则 约束规则用于指定要素上允许的属性配置和一般关系。 与计算规则不同,约束规则不用于填充属性,而是用于确保要素满足特定条件。 简单理解,约束规则就是约束你的编辑操作在什么情况下可执行。 如果出现不符合规则的操作&#…

python实现有限域GF(2^8)上的乘法运算

有限域GF(2^8)上的乘法运算可以看成多项式的乘法 5e转换成二进制为0101 1110,对应的多项式为x^6x^4x^3x^2x 3f转换成二进制为0011 1111,对应的多项式为x^5x^4x^3x^2x1 将这两个多项式相乘再模多项式x^8x^4x^3x1得到结果为1110 0101,转换为…

C# 不可识别数据库格式问题

C#是一种流行的编程语言,用于开发各种类型的应用程序,包括与数据库交互的应用程序。然而,在处理数据库时,有时会遇到一些错误和问题。其中之一就是数据库格式不可识别的错误。 在C#中,我们通常使用ADO.NET来连接和操作…

Flink:动态表 / 时态表 / 版本表 / 普通表 概念区别澄清

博主历时三年精心创作的《大数据平台架构与原型实现:数据中台建设实战》一书现已由知名IT图书品牌电子工业出版社博文视点出版发行,点击《重磅推荐:建大数据平台太难了!给我发个工程原型吧!》了解图书详情,…

使用query请求数据出现500的报错

我在写项目的时候遇到了一个问题,就是在存商品id的时候我将它使用了JSON.stringify的格式转换了!!!于是便爆出了500这个错误!!! 我将JSON.stringify的格式去除之后,它就正常显示了&…

源码框架-​1.Spring底层核心原理解析

目录 Spring中核心知识点: Bean的创建过程 推断构造方法 AOP大致流程 Spring事务 Spring中核心知识点: Bean的生命周期底层原理依赖注入底层原理初始化底层原理推断构造方法底层原理AOP底层原理Spring事务底层原理 ps:这篇文章中都只是大致流程,后续会针对每…

Linux工具篇

文章目录 1.yum1.1 yum是什么?1.2yum下载的软件包在哪?1.3 yum的配置1.4 yum的相关操作 2. Vim2.1 各种模式的相关操作2.2 利用vim解决普通用户无法sudo的问题2.3 vim的配置 3.gcc/g3.1 利用gcc理解程序的翻译过程3.2 编译器的自举 4. 程序的链接4.1动态…

3分钟,学会一个测试员必懂 Lambda 小知识!

今天再来给大家介绍下函数式接口和方法引用。 函数式接口 问:Lambda 表达式的类型是什么? 答:函数式接口 问:函数式接口是什么? 答:只包含一个抽象方法的接口,称为函数式接口 (…

制作耳机壳的UV树脂耳机壳UV胶和塑料材质有什么不同?

制作耳机壳的UV树脂耳机壳UV胶和塑料材质有什么不同? 制作耳机壳的UV树脂和塑料材质在以下几个方面存在区别: 硬度与耐磨性:UV树脂具有较高的硬度和耐磨性,能够有效保护耳机内部零件,延长耳机使用寿命。而塑料材质相…

价格腰斩,腾讯云2024优惠活动云服务器62元一年,多配置报价

腾讯云服务器多少钱一年?62元一年起,2核2G3M配置,腾讯云2核4G5M轻量应用服务器218元一年、756元3年,4核16G12M服务器32元1个月、312元一年,8核32G22M服务器115元1个月、345元3个月,腾讯云服务器网txyfwq.co…

linux安装mysql5.7

linux安装mysql5.7 一、下载mysql5.7二、解压包介绍三、上传包到linux四、卸载mariadb五、安装mysql六、修改权限七、启动mysql八、使用过navicat创作不易,笔记不易,如觉不错,请三连,谢谢~~ 一、下载mysql5.7 去mysql官方下载&am…

数据结构题目①——数组

前言 本篇文章为博主进行代码随想录——数组练习后的总结会涉及到每一道题目的详细的思路整理,以及本人的易错点,希望对大家有所帮助 数组介绍: 数组在C语言中就已经有所涉及,它是一个最基础的数据结构,而在数据结构中…

Oracle 11g升级19c 后部分查询功能很慢

*Oracle 11g升级19c 后部分查询功能很慢 今天生产突然有个查询非常慢,日志显示执行了50秒左右,但是从日志中拿出SQL在PLSQL执行,发现用时不到1秒,查看SQL,怀疑是下面几种原因导致 1、使用函数不当 UNIT.UNIT_CODE LIKE CONCAT(‘…

NLP(一)——概述

参考书: 《speech and language processing》《统计自然语言处理》 宗成庆 语言是思维的载体,自然语言处理相比其他信号较为特别 word2vec用到c语言 Question 预训练语言模型和其他模型的区别? 预训练模型是指在大规模数据上进行预训练的模型,通常…

排序——堆排序

本节继续复习排序算法。这次复习排序算法中的堆排序。 堆排序属于选择排序。 目录 什么是堆? 堆排序 堆排序的思想 堆排代码 向下调整算法 堆排整体 什么是堆? 在复习堆排序之前, 首先我们需要回顾一下什么是堆 。 堆的本质其实是一个数…