关于VUE中对object.object和object[object]的认识

Vue3 响应式系统 - 4 - object的响应式方案 总结《Vue.js设计与实现》一书内容,结合自身理解 仅供记录&交流~ 阅读详情

发现

在做项目的过程中偶然发现了使用object[object]和object.object得到的结果结果是一样的,这让我感觉到很讶异,毕竟以前使用object[object]都是在数组中使用的,并没有这样使用过.

案例

const lineChartData = {
  newVisitis: {
    expectedData: ['2020-12-1', '2020-12-2', '2020-12-3', '2020-12-4', '2020-12-5', '2020-12-6', '2020-12-7'], //每日注册人数日期
    actualData: [120, 82, 91, 154, 162, 140, 145] //每日注册人数
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
}

如上,若我们使用newVisitis内的对象,那么我们肯定是通过this.lineChartData.newVisitis这样获取的.
但是此时我们通过**this.lineChartData[newVisitis]**也可以获取到
代码如下:

 methods: {
    handleSetLineChartData(type) {
      console.log(type)
      console.log( lineChartData[type]," lineChartData[purchases]")
      console.log( lineChartData.purchases," lineChartData.purchases")
      this.lineChartData = lineChartData[type]
    }
  }

结果如下:

在这里插入图片描述

Vue源码解析之Object侦测1——Observer 源码解析侦测变化Object的变化侦测功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 #mermaid-svg-Akp490RXUgu61uoX .label{font-family:'trebuchet ms', verdana 阅读详情

相关推荐

Vue双向数据绑定:Object.defineProperty和Proxy

前言:我们从以前的操作DOM元素到现在的操作数据,从以前的MVC模式到现在的MVVM模式,以及现在深入人心的组件化开发,这个转折我觉得真的是太机智了。 现在我们平常开发主要用到的技术里,可以看到React和小程序是单向数据流,Vue和Angular是双向数据绑定,Angular用的是脏检测,Vue则是数据劫持和订阅者模式,今天我们来聊聊vue的双向数据绑定。 双向数据绑定无非就是,...

全端菜鸟小姐 1524

vue路由传递对象数组,打印数据 [object Object] 解决方法

简单的数组 / 单条数据无影响,数组对象无法获取,变为[object Object]。

Cool_so_cool的博客 7223

vue2和vue3原理Object.defineProperty和Proxy原理对比:

<template> <div> <h3>vue2和vue3原理Object.defineProperty和Proxy原理对比:</h3> <h3> Object.defineProperty():defineProperty定义对象不能监听添加额外属性或修改额外添加的属性的变化;defineProperty定义对象不能监听根据自身数组下标修改数组元素的变化 </h3> <h3&g

jieweiwujie的博客 740

vue 插槽

插槽 匿名插槽: 在注册的父组件: <div> //子组件 <child> 插槽显示的内容 </child> </div> 子组件: <div> <slot></slot> </div> 具名插槽 : 需要多个插槽时,可以利用 元素的一个特殊的特性:name来定义具名插槽 在注册的父组件: <div> <child> <tem

weixin_49295874的博客 536

IEC61850实战:从ICD文件解析到模型构建

本文深入解析IEC61850标准中的ICD文件结构,从Header、IED到DataTypeTemplates部分,详细介绍了如何构建电力自动化设备的数据模型。通过实战案例展示ICD文件的创建过程,并分享常见问题的调试技巧,帮助工程师快速掌握IEC61850建模方法,提升电力系统自动化项目的实施效率。

weixin_26841743的博客 497

嵌入式系统启动流程解析:ROM Code、Bootloader与启动代码的协同工作

本文深入解析嵌入式系统从通电到运行的完整启动流程,详细阐述了ROM Code、Bootloader与启动代码三者如何像接力赛般协同工作。ROM Code作为芯片固化的初始引导程序,负责硬件自检并加载Bootloader;Bootloader作为系统总指挥,初始化关键硬件并加载操作系统内核;启动代码则为C语言运行环境铺平道路。理解这三者的分工与协作,是进行系统移植和解决启动问题的关键。

dd012的博客 554

vue路由传参当刷新页面时,参数变成“[object Object]”

如果传参是一个`对象`,点击进入页面路由可以获取对象的值;但是刷新页面会导致获取不到对象值,被强制转换为字符串 `"[object Object]"`,导致数据不能使用。

铁锤妹妹的博客 5942

抗性基因分析避坑指南:从数据库选择到结果解读的全流程经验分享

本文系统分享了抗性基因分析从数据库选择到结果解读的全流程避坑经验。针对宏基因组研究,重点剖析了SARG、BacMet等核心数据库的适用场景与组合策略,并提供了实验设计、序列比对阈值设定、丰度归一化及结果生物学解读的关键优化建议,旨在帮助研究者获得更可靠、深入的分析结果。

weixin_29233333的博客 201

Vue中Object和Array数据变化侦测原理

  在学完Vue.js框架,完成了一个SPA项目后,一直想抽时间找本讲解Vue.js内部实现原理的书来看看,经过多方打听之后,我最后选择了《深入浅出Vue.js》这本书。然而惭愧的是,这本书已经买了将近一个多月了吧,自己中间却因为一些杂七杂八的事情,一直没有静下心来好好看书。今天,终于翻开了这本书,阅读了前三章的内容,目前感觉这本书写得还不错。因为经常看到关于Vue.js中双向数据绑定的...

weixin_30344795的博客 492

通过Jlink和PyLink读取蓝牙mac地址--Nordic&silicon labs

本文介绍在不开机的情况下读取蓝牙的mac地址,这里介绍两个平台,Nordic和Silicon Labs。 1. 通过Jlink Commander工具连接上目标板 选择当前芯片的型号 2. 使用mem命令查看mac地址 首先需要知道mac地址存储在芯片的哪个地址。 Nordic: 寄存器DEVICEADDRTYPE的第一个bit代表mac地址的类型,这里为1。DEVICEADDR[0]和DEVICEADDR[1]的低16bit代表了MAC地址,其中DEVICEADDR[1]的第15位应该或上DE

ching的专栏 1650

数据基础设施建设任务中的技术名词解析

近日,国家数据局确定了18个数据基础设施建设任务(先行先试)承担地区,建设任务内容为:数场、数据空间、数据原件、隐私计算、数联网、区块链。这些概念都有什么样的内涵,他们的相互关系是怎样的?

五角大寨 5307

vue2的 Object.defineProperty 和 vue3的proxy 区别

​特性​Vue 2 (​Vue 3 (Proxy​监听范围只能监听已存在的属性支持新增、删除属性,数组索引修改等​数组监听需要重写数组方法直接监听数组索引变化​性能初始化时递归遍历所有属性,性能较差惰性代理,按需监听,性能更优​兼容性支持 IE9+不支持 IE(依赖 ES6Proxy​代码复杂度需要递归处理对象和数组实现更简洁,逻辑更清晰​动态属性支持需要Vue.setVue.delete直接支持​Vue 2 的。

qq_1401820561的博客 1462

2025数学建模国赛A题1-4问详解(论文+完整代码)

本文介绍了数学建模国赛A题的解题思路,重点分析了三维遮蔽模型的建立和运动学代码实现。相比第一题,第二题增加了未知参数求解,需要采用遗传算法等非线性优化方法。文章强调该模型由专业团队原创开发,代码可运行,并提醒参赛者警惕市场上的保奖班现象。整体内容聚焦于竞赛解题技巧和原创性保证。

Eloveeeee的博客 2801

vue2,vue3中Object.definedProperty和proxy解析,附部分实现代码

definedProperty,proxy

qq_57980861的博客 1990

【Unity-UGUI控件全面解析】| Layout自动布局组件详解

UGUI中有个自动布局组件Auto Layout,主要包含下面几个模块(点击可进入官方文档下查看描述): 自动布局 布局元素 (Layout Element) 水平布局组 (Horizontal Layout Group) 垂直布局组 (Vertical Layout Group) 网格布局组 (Grid Layout Group) 内容大小适配器 (Content Size Fitter) 自动布局系统 基于布局元素和布局控制器的概念。一个布局元素是具有矩形变换以及其他可选组件的游戏对象。布局元素对自身

努力前行,总会成为自己心中的那道光 2万+

9.16华为OD机试真题 新系统 - 矩阵螺旋遍历 (Java/Py/C/C++/Js/Go)

9.16华为OD机试真题 新系统 - 矩阵螺旋遍历 (Java/Py/C/C++/Js/Go)

算法大师! 651

vue2的Object.defineProperty和vue3的Proxy双向绑定

vue2的Object.defineProperty和vue3的Proxy双向绑定这两种都是基于数据劫持实现的双向绑定 什么是数据劫持 当访问或者设置对象的属性的时候,触发相应的函数,并且返回或者设置属性的值。vue通过Object.defineProperty来劫持对象属性的getter和setter操作,当数据发生变化时发出通知。如下代码,实现了一个Observer const data= { name: 'xiaoming', sex: '男' } // 遍历对象,对其属性值进行劫持

weixin_50736511的博客 711

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

Object.defineProperty 和 Proxy 区别,及vue3为什么采用新的Proxy

Vue3.0 中,响应式数据部分弃用了Object.defineProperty,使用Proxy来代替它。本文将主要通过以下三个方面来分析为什么 Vue 选择弃用Object.defineProperty。 1.Object.defineProperty真的无法监测数组下标的变化吗? 2. 分析 Vue2.x 中对数组Observe部分源码。 3. 对比Object.defineProperty和Proxy。 无法监控到数组下标的变化? 在一些技术博客上,我看到过这样一种...

QueerUncle的博客 1638

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

Vue.set() 和 Object.assign() 的区别

是一个用于将所有可枚举属性的值从一个或多个源对象复制到目标对象的 JavaScript 原生方法。它常用于合并对象。

weixin_44064357的博客 707

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

常见的vue面试中的proxy和object.defineProperty的区别

在对于一些属性来说使用object.defineProperty是无法截取到的,比如通过下标的方式修改数组中的数据或给对象新增属性,这都不能触发组件的渲染,因为object.defineProperty不能拦截到这些操作,更精准来说对于数组而言,大部分的操作是无法去拦截到的,只能通过vue的重写函数来去解决。属性描述符的局限性:虽然属性描述符可以控制属性的访问、修改和删除,但它们不能为属性提供默认值或指定属性值的类型。限制访问:代理可以限制对特定资源的访问,例如限制特定网站的访问。

neserAImw的博客 591

vue2.x版本中Object.defineProperty对象属性监听和关联

前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty将声明响应式 property数据的状态转换为getter和setter。 Object.defineProperty基本使用和概念 官方解释的概念是 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects

程序猿布欧的博客 1996

vue2中Object.defineProperty和vue3中Proxy区别

Proxy的优势如下 Proxy可以直接监听整个对象而非属性。 Proxy可以直接监听数组的变化。 Proxy有13中拦截方法,如ownKeys、deleteProperty、has等是Object.defineProperty不具备的。 Proxy返回的是一个新对象,我们可以只操作新的对象达到目的,而Object.defineProperty只能遍历对象属性直接修改; Proxy做为新标准将受到浏览器产商重点持续的性能优化,也就是传说中的新标准的性能红利。 Object.definePro...

fanshuwen_的博客 705

【揭秘Vue核心】深入解析Object.defineProperty和Proxy的区别,让你秒懂!

proxy和Object.defineProperty是用于实现响应式数据的两种不同方式。Object.defineProperty 通过直接修改对象的属性描述符来实现数据的劫持。Vue2.x中就是通过此来实现数据的响应式。但有一些限制,如只能劫持已经存在的属性,无法对新增属性或删除属性进行劫持。这就导致Vue 2.x需要在创建实例之前声明数据属性,否则无法实现响应式。 而Vue 3.0使用了Proxy,它是ES6新增的特性。可以对整个对象进行劫持,包括对新增属性和删除属性的劫持。可以更加灵活地监听和代理。

李刚的学习专栏 701

Object.defineProperty 和 Proxy 响应式原理 vue2 vue3

对比了上面两种语法是不是就懂了,defineProperty只能响应首次渲染时候的属性,Proxy需要的是整体,不需要关心里面有什么属性,而且Proxy的配置项有13种,可以做更细致的事情,这是之前的defineProperty无法达到的。:表示能否通过delete删除属性从而重新定义属性,能否修改属性的特性,或者能否把属性修改为访问器属性,默认值为false。方法允许精确添加一个属性到对象上,或者修改对象的现有属性,并返回这个对象。提供了一种更灵活的方式来定义或修改对象的行为。:表示能否修改属性的值。

CC酱写前端的博客 619

Vue 55 ,Vue2 和 vue3 中双向数据绑定的原理,JavaScript的 Object.defineProperty 和 ES6的 Proxy 对象代理,使用详细

⭐Object.defineProperty大家都知道,是一个强大且常用的方法,用于定义对象属性,允许我们精确地控制属性的行为,包括读取、写入和删除等操作; Proxy是ES6中一种用于创建代理对象的特殊对象,它允许我们拦截并自定义目标对象的操作,例如属性访问、赋值、函数调用等。Proxy提供了一种机制,可以在目标对象上设置拦截器,从而拦截对目标对象的操作。

AI Agent 全栈架构师(AI + GIS + Backend)& 数字芯片系统架构师(FPGA),NorthCity Smile的博客(NcSmile,博主域名:https://ncmile.blog.youkuaiyun.com) 2381

Vue响应式原理————Object.defineProperty()和proxy的用法分享

Object.defineProperty()和proxy的用法分享

YX0711的博客 810
上一篇: 六 uniapp的scroll-view组件 慢慢放大(小)效果
下一篇: 【银河麒麟国产服务器安装mysql、nginx和docker遇到的问题】(回忆篇)
快乐の编程
博客等级 码龄10年 36粉丝 49原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值