news 2026/9/3 6:15:36

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

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
关于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 会执行你写的回调函数。
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/9/2 23:56:26

【github】学生认证Azure免费云服务器

文章目录概述配置安装ssh连接修改root密码问题虚拟机创建后磁盘选择免费盘概述 前提&#xff1a;已经github认证大学生并领取大礼包绑定Azure 学生免费资源全览&#xff1a;https://portal.azure.com/#view/Microsoft_Azure_Billing/FreeServicesBlade 文字版参考&#xff1a;…

作者头像 李华
网站建设 2026/9/3 2:32:12

导师严选8个AI论文工具,助你轻松搞定本科生论文!

导师严选8个AI论文工具&#xff0c;助你轻松搞定本科生论文&#xff01; AI 工具如何改变论文写作的未来 在当今这个信息爆炸的时代&#xff0c;本科生面对的学术任务越来越繁重&#xff0c;尤其是在撰写论文的过程中&#xff0c;从选题、资料收集到内容撰写、格式调整&#xf…

作者头像 李华
网站建设 2026/9/3 2:31:22

专著参编证明怎么开?

专著参编证明怎么开&#xff1f;专著主编、副主编的参编证明模版是怎样的&#xff1f;下面淘淘学术来给大家讲解这个疑问。一、什么情况下需要提供参编证明在评职称的时候&#xff0c;如果出版了专著&#xff0c;那么一般会要求提供相关的证明材料。1如果是独著或者合著的专著&…

作者头像 李华
网站建设 2026/9/3 0:03:33

专著和著作的区别有哪些?

专著和著作的区别有哪些&#xff1f;专著和著作是一回事吗&#xff1f;下面淘淘学术来回答作者的这个疑问。一、专著和著作的定义著作独立的完整性的作品&#xff0c;称之为著作。著作包括&#xff1a;1文字作品&#xff1a;比如小说、散文、随笔、回忆录、人物传记、剧本、学术…

作者头像 李华
网站建设 2026/9/3 4:28:54

怎么提高专著的含金量?

怎么提高专著的含金量&#xff1f;怎么出版高质量的学术专著&#xff1f;下面淘淘学术来回答作者的这个疑问。淘淘学术经常会遇到一些作者&#xff0c;他们是完美主义者&#xff0c;或者说是卷王&#xff0c;干什么都要比别人高一档才行。别人发SCI二区论文&#xff0c;他就非得…

作者头像 李华
网站建设 2026/9/2 23:56:01

金融/互联网行业SCA工具POC测评维度大公开

摘要&#xff1a;对于金融科技与互联网大厂而言&#xff0c;软件成分分析&#xff08;SCA&#xff09;工具的选型已从单纯的“过合规”转向了“提效率”和“降风险”。在POC&#xff08;概念验证&#xff09;阶段&#xff0c;如何识别厂商PPT中的水分&#xff1f;本文将公开一套…

作者头像 李华