关于vue2的响应式丢失的情况

let arr=[1,2,3] arr[0]=10

没有效果

这种情况,是因为Object.definePropoty监视不了数组的索引

let arr2 = [{name:"张三"}] arr2[0].name = "李四"

有效果

这种情况是因为这里arr2[0]拿到的是{name:"张三"}这个对象,Object.defineProperty本身只能监视「已存在的属性」的「读取 / 修改」行为,这里对象的name属性已经存在,对name属性修改可以

let arr3 = [{name:"张三"}] arr3[0] = {name:"李四"}

没有效果[视图不更新]

这个操作的本质是修改数组的索引 0 对应的「值」(把原来的对象替换成新对象),而非修改原有对象的属性。

就像arr[0]=10一样,数组索引的修改无法被Object.defineProperty监听,因此不会触发视图更新。

总结:vue2的响应式实现就是通过Object.definePropoty,Object.definePropoty监视不了对象属性的新增和删除,也处理不了数组索引,所以为啥对象新增和删除属性不会触发视图更新,数组通过索引修改,也不会触发视图更新

2关于$set解决Vue2响应式丢失

// 给对象添加属性 this.$set(目标对象, 要新增/修改的属性名, 属性值) // 给数组修改元素 this.$set(目标数组, 数组索引, 新值)

$set里,它的作用就是给原本没有监听的新属性(如age)补上这两个开关,让 Vue 能 “看到” 这个属性的读写操作。

2. dep.notify ():触发 “更新通知”

dep是依赖收集器(Dep 实例),里面存着所有用到这个属性的视图 /watch 对应的 Watcher 实例;dep.notify()就是dep的 “通知方法”:

$set里,它的作用有两个:

  • 补全响应式劫持:Vue2 初始化时只给data里已有的属性加getter/setter(用来监听读写),新增的属性 / 数组索引修改不会自动加。$set会手动调用Object.defineProperty(对象场景)或重写的splice方法(数组场景),给新内容补上这个 “监听开关”。

  • 关联依赖更新:光有监听还不够,$set会把新内容的监听逻辑,挂靠到目标对象 / 数组的__ob__.dep(依赖收集器)上。这样修改新内容时,能触发dep.notify()通知视图更新,相当于把新内容 “拉进” 了 Vue 的响应式体系里。

  • 主动触发一次更新:最后$set会主动调用dep.notify(),确保新增的内容能立刻在视图上显示,不用等下一次更新周期。

  • 1. Object.defineProperty:给属性装 “监听开关”

    它是 Vue2 实现响应式的底层核心 API,作用就是手动给对象的属性绑定getter(读监听)和setter(写监听):

  • getter(读开关):当页面读取这个属性(比如<p>{{user.age}}</p>)时触发,核心是把 “当前用到这个属性的视图 /watch” 加入dep(依赖收集);
  • setter(写开关):当你修改这个属性(比如user.age = 25)时触发,核心是调用dep.notify()通知依赖更新。
  • 调用它时,dep会遍历自己存储的所有 Watcher 实例,挨个告诉它们 “你依赖的属性变了,赶紧更新”;
  • 新属性的setter里调用:属性修改时自动触发更新;
  • $set最后主动调用一次:确保新增属性能立刻显示在视图上。
    • 收到通知的 Watcher 会执行对应的逻辑:比如视图 Watcher 会刷新页面,watch Watcher 会执行你写的回调函数。

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

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

相关文章

springboot基于Java的停车场管理系统设计实现

背景与需求分析 随着城市化进程加快&#xff0c;机动车保有量激增&#xff0c;传统停车场管理方式&#xff08;如人工记录、纸质收费&#xff09;效率低下&#xff0c;存在车位利用率低、缴费混乱、安全隐患等问题。基于SpringBoot的停车场管理系统通过信息化手段解决以下痛点…

Systemd 使用指南

1. Systemd 基础概念 什么是 Systemd&#xff1f; Systemd 是 Linux 系统的现代初始化系统和服务管理器&#xff0c;取代了传统的 SysVinit。它提供&#xff1a; 更快的启动时间 更好的并行处理 高级服务管理功能 依赖关系管理 2. Systemd 核心组件 单元&#xff08;Un…

文档翻译在电力建设中常见的场景应用

唐帕文档翻译在电力建设&#xff08;尤其是国际项目&#xff09;中扮演着至关重要的角色&#xff0c;贯穿于项目全生命周期。以下是其常见的场景应用及重要性分析&#xff1a; 一、核心应用场景 1. 项目前期与招投标阶段 可行性研究报告与招标文件&#xff1a; 文档翻译将东道…

2025年新中式女装选购避坑指南与品牌推荐,市场上新中式女装品牌排行榜色麦新中式专注产品质量

新中式女装市场正以年均25%的增速扩容,但行业痛点同样显著:设计同质化、面料掺假、工艺粗糙等问题频发,消费者与加盟商常陷入“高价低质”陷阱。如何在文化表达与商业价值间找到平衡点,成为品牌破局的关键。本文基…

金融产品推广,为何总在左右为难?选对媒体是关键破局点

你是否也有这样的困惑&#xff1a;精心准备的金融产品推广文案&#xff0c;合规上挑不出毛病&#xff0c;内容也足够专业&#xff0c;但一发出去就石沉大海&#xff1f;或者更糟&#xff0c;引来一堆不相干的咨询&#xff0c;真正的目标客户却无动于衷&#xff1f; 问题可能不…

2026主管护师护理学备考攻略与资源选择

前言:在主管护师护理学备考过程中,优质的备考资源是提升备考效率的关键支撑,但面对海量的教材、课程、题库等资源,很多考生陷入“选择困难”或“资源滥用”的误区。其实,备考资源无需追求“多”,而在于“精”和“…

实用指南:12. AOP(记录日志)

pre { white-space: pre !important; word-wrap: normal !important; overflow-x: auto !important; display: block !important; font-family: "Consolas", "Monaco", "Courier New", …

springboot基于Java的外卖管理系统设计开发实现

背景与意义 外卖行业的快速发展促使餐饮企业需要高效的管理系统来应对订单处理、配送调度、用户反馈等复杂需求。传统人工管理方式效率低下&#xff0c;难以满足现代外卖业务的高并发、实时性要求。SpringBoot框架因其简化配置、快速开发的特点&#xff0c;成为构建外卖管理系…

2026主管护师护理学怎么备考,全流程指南稳步通关不跑偏

前言:主管护师护理学考试考点繁杂,多数考生为在职人员,时间碎片化问题突出,易陷入备考盲目、效率低下的困境。想要高效通关,需搭建科学的备考框架,遵循循序渐进的流程,准确匹配备考各阶段需求。本文梳理主管护师…

ai做PPT正确打开方式:选对工具+用对方法,3分钟搞定专业演示

市面上现在也是涌现出太多AIPPT产品&#xff0c;大家往往陷入选择困难&#xff0c;究竟哪款真正适配需求&#xff1f;本文选取了3款AI PPT工具进行讲解。1、AI PPT国内主流的AI演示文稿工具&#xff0c;提供“主题生成、文档导入、PPT美化”三种核心模式&#xff0c;支持标题和…

谷歌发布AI广告与分析顾问:是SEO革命性产品,还是未来可期?

谷歌正在向其广告和分析生态系统中&#xff0c;注入一股前所未有的AI力量。其即将推出两款基于其最新Gemini模型构建的、全新的AI助手——广告顾问和分析顾问。从12月初开始&#xff0c;这两款工具将陆续向所有英语地区的Google Ads和Google Analytics账户开放。谷歌的愿景是&a…

深圳昊客/百度竞价开户推广代运营服务商:推荐排名前5的公司

深圳企业做百度推广,如何选择靠谱的代运营服务商? 在竞争激烈的数字营销环境中,越来越多深圳中小企业开始借助百度竞价(SEM)获取精准客户。但不少企业主发现:广告费花了不少,有效咨询却寥寥无几。问题往往不在平…

git使用--depth参数参数快速拉取分支代码后无法切换到其他分支解决办法

我们经常有被催得比较急的项目&#xff0c;早上到我们手&#xff0c;晚上就要求要的&#xff0c;如果我们本地没有代码那就要克隆一份完整代码过来做需求&#xff0c;但是完整克隆一份好几百G的代码下来是相当耗时的&#xff0c;那么我们有没有一种方法能快速拉取一份代码做客制…

springboot基于java的网吧管理系统设计实现

网吧管理系统设计的背景随着互联网的普及和网络娱乐需求的增长&#xff0c;网吧作为提供上网服务的场所&#xff0c;其管理复杂度日益增加。传统的手工记录和简单的电子表格管理方式已无法满足现代网吧运营的需求。会员管理、设备维护、计费统计等环节需要更高效、自动化的解决…

金华宠物医院优选推荐,2026年宠主好评TOP榜单,猫咪体检/宠物神经外科/宠物眼科/母猫绝育,宠物医生排名前十

随着宠物经济持续升温,宠物医疗行业迎来快速发展期。据《2025年中国宠物行业白皮书》显示,我国宠物医疗市场规模已突破800亿元,年复合增长率达18%,但行业仍存在设备参差不齐、专科细分不足、服务透明度低等痛点。在…

Mysql优化笔记 - 倾听

1. 全文索引 当字段的值存在 A,B,C 时,参数是个集合,要进行多个值匹配时,如果使用 like or 的方式,直接会变成全表扫描,这个时候可以使用 全文索引 a. 添加索引ALTER TABLE table_name ADD FULLTEXT INDEX index_…

springboot基于Java的诊所管理系统设计实现

背景分析 医疗行业信息化需求日益增长&#xff0c;传统纸质记录和手工管理方式效率低下&#xff0c;易出错。诊所作为基层医疗机构&#xff0c;亟需通过数字化系统优化患者管理、药品库存、财务统计等核心业务流程。Java技术栈凭借稳定性、跨平台性及丰富的生态&#xff0c;成…

为应对“差评勒索”,谷歌上月推出的负面评论敲诈举报表单似乎非常有效

在本地商业的数字战场上&#xff0c;谷歌商业资料的评论区&#xff0c;早已成为兵家必争之地。 它被视为用户口碑最真实的映照&#xff0c;是商家信誉的晴雨表。 当然&#xff0c;有利益的地方就会有不为人知的阴暗面。 一种新型的、有组织的恶意行为——负面评论敲诈&#…

2024年提示工程热点:生命周期管理的4个关键进化方向

2024年提示工程热点:生命周期管理的4个关键进化方向 一、引入与连接 引人入胜的开场 想象一下,在科技的浩瀚宇宙中,有一颗闪耀的星星叫做提示工程。它就像是一位神奇的魔法师,能够让计算机理解我们人类的语言,并按照我们的要求完成各种任务。从智能客服与我们流畅对话,…

挑战Sora!以色列独角兽Lightricks发布LTX-2

首个非对称双流架构,1秒极速有声生成!在多模态生成领域, 打破视觉与听觉模态的物理壁垒、实现跨感官信息的有机融合与“感官统一” ,是当前学界与工业界亟待解决的核心挑战。长期以来,有声视频生成(Sounding Vid…