关于对象新增的属性需要$set原因

最新推荐文章于 2023-07-13 22:27:36 发布
最新推荐文章于 2023-07-13 22:27:36 发布
阅读量420 收藏
点赞数
原文链接：https://juejin.cn/post/6940454764421316644
版权

其实在 Vue3.x 还没有发布 bate 的时候， 很火的一个话题就是Vue3.x 将使用 Proxy 取代 Vue2.x 版本的 Object.defineProperty。
没有无缘无故的爱，也没有无缘无故的恨。为何要将Object.defineProperty换掉呢，咋们可以简单聊一下。
我刚上手 Vue2.x 的时候就经常遇到一个问题，数据更新了啊，为何页面不更新呢？什么时候用 s e t 更 新 ， 什 么 时 候 用 set更新，什么时候用 set更新，什么时候用forceUpdate强制更新，你是否也一度陷入困境。后来的学习过程中开始接触源码，才知道一切的根源都是 Object.defineProperty。
对这块想要深入了解的小伙伴可以看这篇文章 为什么 Vue3.0 不再使用 defineProperty 实现数据监听？要详细解释又是一篇文章，这里就简单对比一下Object.defineProperty 与 Proxy

Object.defineProperty只能劫持对象的属性， 而 Proxy 是直接代理对象

由于Object.defineProperty只能劫持对象属性，需要遍历对象的每一个属性，如果属性值也是对象，就需要递归进行深度遍历。但是 Proxy 直接代理对象， 不需要遍历操作

Object.defineProperty对新增属性需要手动进行Observe

因为Object.defineProperty劫持的是对象的属性，所以新增属性时，需要重新遍历对象， 对其新增属性再次使用Object.defineProperty进行劫持。也就是 Vue2.x 中给数组和对象新增属性时，需要使用$set才能保证新增的属性也是响应式的, $set内部也是通过调用Object.defineProperty去处理的。

作者：SandySY
链接：https://juejin.cn/post/6940454764421316644
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

一个写bug的人
关注
在Vue中为什么有$set这个api？
kazuki99的博客
04-30 720
在Vue中，如果想实现数据的双向绑定有几种方式： 最常见的就是把数据放在data中，然后template去绑定这个数据，这样就实现了双向绑定。 有的时候我们会发现，明明在template中绑定了这个属性 console.log 出来也是有的，但页面上就是显示不出来。 例如： 点我运行下面代码 <template> <div class="hello"&gt...
Vue-为对象和数组新增属性 this.$set()
World_Mei的博客
05-06 7603
问题描述：vue的data里边是已经声明或者赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性或者操作数组元素，如果更新此属性的值，是不会更新视图的。 如下列代码： <template> <div> <ul> <template v-for="item in userInfo"> ...
为什么要使用Vue.$set(target,key,value)
weixin_30954607的博客
05-14 358
vue中不能检测到数组和对象的两种变化： 1.数组长度的变化 vm.arr.length = 4 2,数组通过索引值修改内容 vm.arr[1] = 'aa' Vue.$set(target,key,value)可以动态的给数组、对象添加修改数据，并更新视图中数据的显示。 vue在构造函数new Vue()时，就通过Object.defineProperty中的g...
Vue中$set的用法
蘅潇嗜玉
08-23 558
什么情况下使用$set？ 受现代 JavaScript 的限制，Vue 不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性遍历执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。 <!--先看一个例子--> <!DOCTYPE html> <html> &lt...
在vue中新增对象或数组的值的时候为什么要用this.$set
weixin_44709363的博客
05-16 317
2.在vue中对象实现视图更新的机制是：通过遍历datas里的值，监听'getter'和'setter'方法，当这些值更新的时候，就会触发视图更新。二，当对象datas的属性sex不存在，对其新增属性sex，通过图中方式视图sex不会即时更新成"男"，但27行打印结果是男。一，当对象datas的属性sex存在，仅进行修改，通过图中方式视图sex会即时更新成"男"，并且27行打印结果也是男。总结：1.若想第二种情况视图即时渲染更新成男，就需要用到this.$set进行处理。
Vue2.0 $set()
LiLi_code的博客
07-29 276
最近工作中遇到了这种我额外往对象中添加了属性的情况，导致页面效果一直无法实现。困惑中突然明白了原因，做一下整理总结。 vue2.0 给data对象新增属性，并触发视图更新 如下代码，给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } 直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新 .
Vue之Vue.set动态新增对象属性方法
11-30
Vue.set方法用来新增对象的属性。如果要增加属性的对象是响应式的，那该方法可以确保属性被创建后也是响应式的，同时触发视图更新 这里本来food对象是没有count属性的，我们要给其添加count属性就必须使用Vue.set...
vue this.$set 为对象新增属性，并触发视图更新
weixin_44040486的博客
11-08 4668
vue this.$set 为对象新增属性，并触发视图更新 详情：使用以下代码为data赋值，出现界面不刷新时，无法对文本框进行编辑，输入框只保留操作的最后一步。 this.ruleForm.roleName=this.$store.state.roleSetting.roleinfo.roleinstacename; this.ruleForm.content=this.$store.state...
Vue中的$set的使用实例代码
10-17
但是，如果在实例创建后才新增属性，Vue就无法为这些属性创建响应式的getter和setter，因此视图不会自动更新。 这时，`$set`方法就派上用场了。`$set`接受三个参数：`target`、`key`和`value`。`target`通常是Vue...
Vue双向数据绑定：v-model、Object.defineProperty()、$set
11-03 736
v-model详解 v-model本质上是一个语法糖，当绑定在input上后，实际被解析为绑定了value同时绑定了input事件： <input v-model="name"> //实际解析为 <input :value="name" @input="name=$event.target.value"> Object.defineProperty()详解 用四个字概括为：数据劫持 即劫持一个对象的访问（get）和修改（set）对其进行拦截 Object.definePrope
Vue进阶之路之$set的理解
marko_zheng的博客
05-21 8391
$set 的深入理解 众所周知，Vue 双向数据绑定的原理是通过遍历data属性，利用Object.definePrototype将其转化成setter/getter,但是由于现代js的限制以及object.observe的限制，vue无法检测到对象属性的添加或删除。具体场景如下 <template> <ul> <li v-for='(item,key) in ...
你知道“$set”是什么吗？
最新发布
qq_50260510的博客
07-13 1665
本文介绍了“$set”的原理和应用场景哦
学习笔记（23):零基础掌握 Python 入门到实战-class定义对象，self指向自身（二）
weixin_44614551的博客
09-18 164
【为什么学Python】 Python 是当今非常热门的语言之一，2020年的 TIOBE 编程语言排行榜中 ，Python名列第一，并且其流行度依然处在上升势头。 在2015年的时候，在网上还经常看到学Python还是学R的讨论，那时候老齐就选择了Python，并...
Vue 中 $set的使用
xiaoma19941027的博客
09-24 203
<style> .home{ border:1px solid red; } </style> <template> <div class="home"> <div v-for='(v,k) in person1'> {{k}}---{{v}} </div> <b...
Vue——04-01用$set给对象添加属性
NanChen的博客
10-21 774
由于 Vue 会在初始化实例时进行双向数据绑定，使用Object.defineProperty()对属性遍历添加 getter/setter 方法，所以属性必须在 data 对象上存在时才能进行上述过程 ，这样才能让它是响应的。如果要给对象添加新的属性，此时新属性没有进行过上述过程，不是响应式的，所以会出想数据变化，页面不变的情况。此时需要用到$set。 由于 JavaScript 的限制，Vue不能检测数组和对象的变化。 例：这里想点击按钮时添加一个新元素，用JavaScript新增元素 &.
Vue中$set使用
smouns_的博客
02-15 2016
Vue中$set使用
vue中$set的实现方法
忧郁的蛋的专栏
12-16 1402
vue中$set方法对数组和对象的处理本质上的一样的，对新增的值添加响应然后手动触发派发更新。
完全掌握 Vue 中的 $set 方法
lazy_tomato的博客
02-07 9929
vue3中由于响应式实现原理发生了变化，所以不需要 $set 了，所以不做探究。一知半解，是我最讨厌的状态，今天就带着问题，再阅读一下对应的源码，了解问题的本质。今天在使用 $set 的时候，发现如果 被赋值的数据 层级较深会出现报错的情况。简单说明一下我遇到的问题，明确探究问题的目标。3.通过数组索引修改数据。上述的演示，源码查看的是。
Vue.$set的用法
janyxh的博客
05-31 6891
官方资料： Vue.set( target, propertyName/index, value ) 参数： {Object | Array} target {string | number} propertyName/index {any} value 返回值：设置的值。 用法： 向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值