Vue --this.$set()的用法

最新推荐文章于 2024-07-20 17:18:04 发布
最新推荐文章于 2024-07-20 17:18:04 发布
阅读量210 收藏 2
点赞数
文章标签： vue.js 前端 javascript
原文链接：https://www.cnblogs.com/lixin0705/p/12923295.html
版权
本文探讨了在Vue开发中遇到的数据响应式陷阱，特别是当数据类型复杂时，对象属性的修改可能无法触发视图更新。原因在于Vue无法监听到深层次的数据变化。解决方案是使用`this.$set()`方法来确保数据更新并同步到视图。对象和数组的操作方式有所不同，都需要提供三个参数：对象或数组、属性或下标以及新的值。
摘要由CSDN通过智能技术生成

data中数据，都是响应式。也就是说，如果操作data中的数据，视图会实时更新；

但在实际开发中，遇到过一个坑：若data中数据类型较为复杂，方法methods中改变对象的属性，视图也就是页面并不会改变

原因是vue监听不到数据类型特别复杂的属性。

可以使用this.$set()来进行强制更新，进而解决问题

对象操作：

　三个参数：this.$set("改变的对象"，"改变的对象属性"，"值")

数组操作：

　 三个参数：this.$set("数组"，"下标"，"值")

m0_59324006
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中的$set
qq_45851085的博客
06-06 7143
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述 提示：这里描述项目中遇到的问题： 例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据 APP 中接收数据代码： @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes,
Vue第6篇，Vue中的this.$set()使用教学，详细过程（vue项目中this.$set()的妙用）
热门推荐
weixin_65793170的博客
11-15 4万+
this.$delete 也是一个实例方法，用于从响应式对象中删除属性，并确保该操作也是响应式的。使用this.$delete可以解决Vue响应式系统的另一个限制，即无法检测到通过索引直接删除数组元素的变化。通过this.$delete方法，可以显式地告诉Vue，某个属性已经被删除，从而触发视图的更新。
vue中this.$set()用法
最新发布
wangshuai13383347132的博客
07-20 289
vue中this.$set()用法
vue中this.$set的使用
song_dong_Dong的博客
05-18 266
this.#set(obj, key, value) 我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性、 <template> <div class="hello"> <button @click="setMessage">添加属性</button> {{ student.name }} <input type="text" v-model="student.age"> </di
Vue中的this.$set
05-10 1万+
当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了 官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 调用方法: Vue.set( target , key , value) target: 要更改的数据源（可以是一个对象或者数组） key 要更改的具体数据 （索引） value 重新赋的值 &lt..
vue this.$set
ZoeLinJF的博客
09-04 600
data() { str: '111', arr: [1, 2, 7, 4], obj: { name: 'lin', age: 18 } } this.$set(this, 'str', 'aaa') // aaa this.$set(this.arr, 2, 3) // 1, 2, 3, 4 修改 this.$set(this.arr, this.ar...
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
通过保存Vue实例的引用或使用箭头函数，可以确保`this`正确指向Vue实例，从而正确调用`$set`方法。理解并掌握这些技巧对于避免在Vue应用中遇到此类错误至关重要。在日常开发中，还应养成良好的编码习惯，如使用`...
vue中 this.$set的用法详解
10-16
在Vue.js框架中，`this.$set` 是一个关键的方法，用于处理响应式数据更新的问题。在某些情况下，当你尝试直接修改对象的属性或数组的元素时，Vue可能无法检测到这些变化，进而不会自动更新视图。`this.$set` 方法...
【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx
12-29
Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 开发过程中，有时我们需要修改数据并期望视图能够...了解它们的工作原理和正确使用方法，能够避免出现预期外的视图更新问题，提高Vue应用的健壮性和用户体验。
从vue源码解析Vue.set()和this.$set()
10-18
`Vue.set()` 是全局方法，可以直接在 Vue 构造函数上调用，而 `this.$set()` 是 Vue 实例的方法，可以在组件实例内部使用。 当尝试像这样修改响应式对象的属性时，Vue 无法自动检测到变化： ```javascript const ...
vue中this.$set()
L1147484597的博客
11-30 253
在VUE中，有时候我们改变了data里面的数据，但是改变的数据并没有更新到页面上去，但是当我们打印的时候显示确实是更新了已经，只是没有更新到页面上而已，也就是说我们更新的数据没有触发响应式，如下： <p>{{arr}}-{{obj}}</p> data() { return { arr:[1], obj:{ a:1, b:2, }, } this.arr[1]="a" //当然这种方式很
this.$set的参数和用法
weixin_44706322的博客
09-29 4350
Vue.$set(target,key,value) target：要更改的数据源(可以是对象或者数组) key：要更改的具体数据(可以是字符串和数字) value ：重新赋的值 用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。 注：Vue.set()在methods中也可以写成this.$set() Vue.set()不光能修改数据，还能添加数据 data:{...
vue $set()
^_^
06-11 602
有时候我们发现 操作数组和对象中 发现有时候并不能进行实时响应 一、数组 举个数组栗子 HTML <div> {{ arr }} <br /> <button @click="add">点击增加</button> <button @click="del">点击删除</button> <button @click="edit">点击修改</button> &lt
Vue.$set()
LingXi566的博客
02-12 197
大家好，久违了，好长时间没更新了，‘sorry!’; 值此新春之际，首先祝大家新年快乐，牛年大吉！今天和大家聊聊vue中set兄弟； 在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。 根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性
vue中this.$set的介绍和使用
m0_55857195的博客
04-22 344
在 Vue 2 中，this.$set是一个 Vue 实例的方法，用于在响应式地更新对象的属性时确保其响应性。在 Vue 中，如果你直接给对象添加新属性，Vue 无法检测到这个属性的变化。但是，通过this.$set方法，你可以告诉 Vue 在运行时添加属性，并且使其成为响应式的。
vue中this.$set的用法
qq_38687592的博客
03-14 2万+
从三个方面给大家说一下这个this.$set: 1.this.$set实现什么功能，为什么要用它？ 2.怎么用它？ 3.应用场景 1.this.$set实现什么功能，为什么要用它？ 当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也许这个时候就需要用到this.$set（）这个方法了，简单来说this.$set的功能就是解决这个问题的啦。官方解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue
vue this.$set 方法
servepeople的博客
09-27 1298
方法是 Vue.js 提供的一个用于在响应式数据中添加新属性的工具函数。它的主要作用是在对象或数组上添加属性或元素，确保这些属性或元素也是响应式的，即可以触发视图的重新渲染。方法是一个在Vue.js中用于处理响应式数据的有用工具，特别是当你需要动态添加属性或元素时。数组的指定索引处添加新元素。这样做可以确保新属性和新元素也是响应式的，当它们发生变化时，会触发视图的更新。通常，当你需要在组件的数据对象中动态添加属性时，Vue.js 推荐使用。来确保添加的属性是响应式的。在上述示例中，我们有一个名为。
vue中this.$set()的用法
袁的博客
10-20 1万+
vue中this.$set()的用法
Vue.set 与this.$set的区别
01-25
this.$set()是Vue实例的方法，只能在Vue实例中使用。它的语法是`this.$set(object, key, value)`，其中object是要设置属性的对象，key是属性名，value是属性值。this.$set()也会将属性设置为响应式属性。 总结一下...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值