Vue中this.$set更改值

本文详细讲解了在Vue.js中使用$set进行对象和数组数据更新的方法,包括如何在对象中改变特定属性值,以及在数组中插入、替换元素。同时涵盖了JavaScript中对象字面量和数组操作的基础知识。

具体使用

1、对象中

let obj = {
		id:'1',name:"张三",
		id:'2',name:"李四"
}

this.$set('更改的数据源',‘需要更改的值的下标’,‘更改的内容’)
this.$set('obj',2,{id:'3',name:'王五'})

2、数组中

let arr = [1,2,3,4,5]
this.$set'arr',1,6)
### Vue 中 `this.$set` 方法的作用 `this.$set` 是 Vue 提供的一个实例方法,用于向响应式对象中添加新的属性并触发视图更新。它本质上是对全局 API `Vue.set` 的封装[^1]。 #### 作用 当需要动态地向已存在的响应式对象(如数组或对象)添加新属性时,直接修改可能不会被 Vue 的响应式系统检测到。此时可以使用 `this.$set` 来显式通知 Vue 更新数据绑定和 DOM 渲染[^3]。 - **对于对象**:如果尝试给一个未初始化的对象属性赋,则该变化无法被侦测到。通过调用 `this.$set(target, key, value)` 可以解决这个问题。 - **对于数组**:某些原生方法(如 `push`, `splice` 等)会自动触发视图更新,而其他一些操作(如直接设置索引或者长度)则不会触发更新。在这种情况下,可以通过 `this.$set(array, index, newValue)` 手动触发更新[^2]。 #### 使用场景 以下是常见的几种适用场景: 1. 动态新增对象的键对: ```javascript this.$set(this.someObject, 'newKey', 'newValue'); ``` 2. 修改数组中的某个特定位置元素: ```javascript this.$set(this.itemsArray, indexOfItem, newItem); ``` 3. 初始化阶段遗漏的数据项补充: 如果在组件创建初期未能完全定义所有的数据结构,在运行过程中发现有额外需求时可用此方式扩展原有模型而不破坏其反应特性[^1]。 #### 官方文档说明 官方文档指出,为了确保所有数据变动都能得到妥善处理从而引起界面相应改变,建议开发者遵循最佳实践——即利用专门提供的工具函数来完成复杂状态管理任务而不是单纯依赖 JavaScript 原语操作[^2]。 ```javascript // 示例代码展示如何正确应用 $set 方法 const vm = new Vue({ el: '#example', data: { obj: {} } }); vm.$set(vm.obj, 'a', 1); // 添加了一个名为'a'的新属性,并将其设为1 console.log(vm.obj.a); // 输出应该是1 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值