Vue 怎么用 vm.$set() 解决对象新增属性不能响应的问题 ？

最新推荐文章于 2023-05-03 14:57:14 发布
最新推荐文章于 2023-05-03 14:57:14 发布
阅读量885 收藏 1
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LuckXinXin/article/details/104960224
版权

答：
首先，因为Vue 无法检测到对象属性的添加或删除，所以Vue 提供了 Vue.set (object, propertyName, value)来实现为对象添加响应式属性
其次，我认为vm.$set 的实现原理针对目标的种类不同分为两个方面：
第一方面：如果目标是数组，直接使用数组的 splice 方法触发响应式；
第二方面：如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用 defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

LuckXinXin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue.set()和vm.$set()方法及不足
weixin_54307456的博客
03-20 2699
什么时候要使用？ 官方文档解释： Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如： var vm = new Vue({ data:{ a:1 } }) // `vm.a` 是响应式的 vm.b = 2 // `vm.b` 是非响应式的 对于已经创建的实例，Vue 不允许动态添加根级别的响应式
Vue03指令、set监视原理等
m0_46691255的博客
11-01 486
条件渲染： 1.v-if 写法： （1）v-if="表达式" （2）v-else-if=“表达式 （3）v-else="表达式" 2.v-show 写法：v-show="表达式" 适用于：切换频率比较高的场景 特点：不展示的DOM元素被移除，仅仅是使用样式隐藏掉 3.备注：（1）使用...
Vue如何用vm.$set()解决对象新增属性不能响应的问题 ?
zy1992As的博客
05-03 701
为了解决这个问题，Vue提供了一个特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法。如果你需要动态地添加属性到对象的数组中，可以使用数组的push()方法或splice()方法，因为Vue能够检测到这些数组方法的调用并更新视图。总结起来，通过使用push()方法或splice()方法向数组中添加新元素，Vue能够检测到数组的变化并更新视图。
vue 已绑定的对象数据新增属性无法响应的问题
icecreamgaga的博客
10-30 949
比如obj={a:1,b:2} obj.c = 3 js中的obj为{a:1,b:2,c:3} 页面中为{a:1,b:2} 页面中要响应方法 1.this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …= false this.nextTick(()=>{ this.flag = true }) } } ...
Vue - 给对象新增属性（使用Vue.$set()）------解决vue数据已经改变，视图不刷新问题
juvenile_的博客
06-01 1781
文章目录1、Vue 的数据不是响应式吗？2、如何解决上述的问题3、一些自己的见解 今天做项目的过程中遇到一个问题，百思不得其解，询问大佬后恍然大悟，踩坑的主要原因是知识盲区，上网搜到一篇比较好的简书博客，转载过来，并加上自己的一些见解，希望能帮到大家，原文链接：Vue - 给对象新增属性（使用Vue.$set()）。 1、Vue 的数据不是响应式吗？ 在开发过程中，我们可能会遇到这样一种情况：当 vue 的 data 里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更
关于vue中的及时响应问题Vue.set()
beichen3997的博客
06-19 873
在我们使用vue的过程中，有时会遇到这么一种情况，<html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="./js/vue.min.js">&amp
Vue--给data数据中对象新增属性/响应式数据（使用Vue.$set()），并触发视图更新
热门推荐
muzidigbig的博客
10-17 1万+
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向数组对象中添加新的属性，如果直接更新此属性的值，是不会更新视图的。 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由...
【JavaScript源代码】vue 中this.$set 动态绑定数据的案例讲解.docx
12-29
使用 `this.$set` 可以确保 Vue 能够追踪这些新增的属性，并在属性改变时正确地更新视图。 补充一点，Vue 中的 `this.$set` 实际上是 `Vue.set` 的别名。在处理动态添加的属性时，比如在表单中根据后台数据动态生成...
【vue源码】$set实现原理
小陈的博客
09-21 4874
整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。有需要的小伙伴，可以点击下方卡片领取，无偿分享) 下图是对新增属性处理的代码执。
解决vue中对象属性改变视图不更新的问题
11-27
在Vue.js中，数据绑定是...理解并熟练运用这些方法，可以有效避免在Vue项目中遇到对象属性改变时视图不更新的问题，确保数据和视图的同步。在开发过程中，遵循最佳实践，合理设计数据结构，可以减少这类问题的出现。
Vue中this.$nextTick的作用及用法
10-15
然而，Vue不能检测到对象属性的添加和删除，因此新增的属性不会是响应式的。为了解决这个问题，Vue提供了`Vue.set`方法，用于向响应式对象中添加属性。 ### Vue的异步更新队列 Vue使用了一种特殊的异步更新队列来...
vue给对象添加属性没有响应式的问题
weixin_47190975的博客
07-30 2553
vue给对象添加属性没有响应式的问题
vue给对象添加属性，无法与视图响应（已解决）
大前端
10-11 1588
问题：vue中，给data中的某个对象添加属性，无法与页面响应 解决方法： 方法一：直接在对象中写上属性 data() { return { //错误写法 //handle_form: {}, //正确写法 handle_form: { ruleName: '' }, } } 方法二：通过$set赋值 //错误写法 this.handle_form.rule
Vue使用总结（三）
m0_49799219的博客
03-17 123
什么档次跟我学一样的Vue
快速理解Vue 使用 vm.$set 解决对象新增属性不能响应的问题
xiaoxiaofly的博客
08-16 1458
Vue 无法检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化，所以属性必须在 data 对象上存在才能让 Vue 将它转换为响应式的。但是 Vue 提供了 Vue.set (object, propertyName, value) / vm.$set (object, propertyName, value) 来实现为对象添加响应式属性，那框架本身是如何实现的呢？ Vue 源码 export function set (target: Array&l
vue给已经存在的对象添加新属性及对应属性值
qq_42243957的博客
09-18 1591
Vue-给对象新增响应式属性（使用Vue.$set()）
aliven1的博客
11-02 1417
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。 受现代 JavaScript
Vue-给对象新增属性（使用Vue.$set()）转载
huangmin113659的专栏
06-13 2569
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 受现代 JavaScript 的限制 (以及废弃 Object.observe)，Vue 不能检测到对象属性的添加或删除。由于 Vu...
在vue中，数组的方法，数据会响应式
zoepriselife316的博客
10-28 283
直接上代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数组方法中，数据会响应式</title> <script src="https://cdn.
vue.$set和vm.$set有什么区别
最新发布
11-16
根据提供的引用内容，可以得知`Vue.set()`和`vm.$set()`都可以用来向Vue实例中的响应式对象添加属性并触发视图更新。它们的区别在于`Vue.set()`可以用于全局对象，而`vm.$set()`只能用于当前实例。具体来说，`Vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值