vue中$set，解决数据双向绑定

最新推荐文章于 2023-08-10 09:36:59 发布
最新推荐文章于 2023-08-10 09:36:59 发布
阅读量270 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wodecc_u/article/details/125371358

由于 JavaScript 的限制，Vue 不能检测以下变动的数组：
当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
解决：用$set方法
当你修改数组的长度时，例如：vm.items.length = newLength
解决：vm.items.splice(newLength)

this.$set(Object, key, value)
//this.$set(this.list[i],"flag",true)
$set:使用$set方法修改数组内容，解决修改表格，for循环修改数组内容以后不生效问题
jieweiwujie的博客
01-03 930
就需要使用$set方法修改
Vue中$set的用法
qq_33475629的博客
01-11 1171
Vue双向绑定原理，属性必须在data对象上存在时才能进行双向绑定，如果要给对象添加新的属性，此时需要用到$set。 1、由于 JavaScript 的限制，Vue 不能检测以下变动的数组： 当你利用索引直接设置一个项时，例如：array.items[indexOfItem] = newValue，解决：用$set方法 this.$set(Array, index, newValue) 2、有时你想向已有对象上添加一些属性，例如使用 Object.assign() 或 _.extend()
Vue.set() 响应式新增与修改数据
qq_095的博客
08-12 2335
vue中不能检测到数组和对象的两种变化： 数组长度的变化 vm.arr.length = 4 数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vue.$set(target,key,value)： 可以动态的给数组、对象添加和修改数据，并更新视图中数据的显示。 vue在构造函数new Vue()时， 就通过Object.defineProperty中的getter和se...
Vue.set()动态的新增与修改数据，触发视图更新
xiasohuai的博客
06-11 1万+
参数：target：要更改的数据源(可以是对象或者数组)key：要更改的具体数据(可以是字符串和数字)value ：重新赋的值用法：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。例：data:{ namelist:[ {message:"叶落森",id:"1"}, {message:"姜艳霞",id:"2"}, ...
vue数组双向绑定问题及$set用法
weixin_47013351的博客
05-16 2416
在vue开发中，我们有时会遇到数据更新视图不更新问题，地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。 以下这几种情况,Vue都会检测不到数据的变化 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 由于 JavaScript 的限制，Vue不能检测对象属性的添加或删除 数组实现响应式的七个方法 push() 可向数组的末尾添加.
vue数据双向绑定原理解析（get & set)
11-29
这就是Vue中数据双向绑定的基础。 在Vue中，当初始化一个Vue实例时，所有声明在data对象中的属性都会被观察（Observed）。Vue通过创建一个名为Observer的类来实现这个过程。Observer会遍历data中的每一个属性，如果...
详解Vue双向数据绑定原理解析
08-29
Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty...
解决vue项目input输入框双向绑定数据不实时生效问题
11-20
这样的输入框，绑定的是data中的form对象上的phone字段。 在mounted钩子函数里边写： this.form.phone = ‘1888888888’; 这样在页面上时候不会随着输入框值改变而改变。 解决方法如下： this.$set(this.form,”...
浅谈vue,angular,react数据双向绑定原理分析
08-28
浅谈vue,angular,react数据双向绑定原理分析 在前端开发中，数据双向绑定是指视图和模型之间的同步更新机制。当模型数据改变时，视图会自动更新；反之，当视图发生变化时，模型数据也会同步更新。本文将对Vue、...
常见的几种实现数据双向绑定的做法
卷尾巴
04-21 889
常见的几种双向绑定的做法 * 发布者-订阅者模式（backbone.js） * 脏值检查 （angular.js） * 数据劫持（vue.js） 发布者-订阅者模式 一般通过sub,pub的方式实现数据和视图的绑定监听，更新数据方式通常做法是 vm.set('property',value) 脏值检查 angular.js 是通过脏值检测的方式对比数据是否有变更，来决定是...
♥ vue中$set用法详细讲解
林太白
08-10 8848
♥ vue中$set用法详细讲解
vue数组双向绑定问题及$set用法详解
Free雅轩的博客
11-15 2926
替换：先删除再添加，三个参数：起始位置、删除的项数、要添加的项数。arr.splice(1,2,"or","ue")添加：三个参数，插入起始位置、删除的项数（为0）、插入的项，向指定位置插入任意数量的项。arr.splice(1,0,"or","ue")删除：两个参数，splice(index,num) 删除的第一项的位置以及要删除的项数。当你修改数组的长度时，例如：vm.items.length = newLength。当你修改数组的长度时，例如：vm.items.length = newLength。
Vue之 $set的使用
weixin_44684357的博客
04-21 1万+
1，什么时候使用$set set为解决双向绑定失效而生，只需要关注什么时候双向绑定失效就可以了。 2，Vue.set 和 this.$set this.$set 实例方法，该方法是全局方法 Vue.set 的一个别名 3，$set 用法 数组： this.$set(Array, index, newValue) 对象： this.$set(Object, key, value) 4，实例 data中未定义，手动给form添加age属性，并且点击按钮进行自增。 如果使用 this.form.age
vue中this.$set 动态绑定数据运用示例
qq_42027690的博客
01-29 2963
感觉网上对this.$set的讲解乱糟糟的，我来总结一下对它单个数据、对象、数组、json数据的绑定. 话不多说直接上代码： <template> <div> <!-- 单个数据 --> <button @click="text0a">text0</button> <p&g
vue的$set方法给对象动态添加属性
qq_45560350的博客
05-17 943
1
Vue使用this.$set动态添加属性值
yh_zeng2的博客
04-07 4540
如果不是使用this.$set动态添加属性值，这个属性值是可以添加上，但是不会作为响应式数据，也就是不会重新解析模板。
Vue的属性和方法以及双向绑定
thwr1881的博客
08-03 766
Vue的属性和方法以及双向绑定
vue中$set用法详细讲解
热门推荐
Oralinge
12-16 16万+
地址没有改变，vue就监测不到数据变化。这个时候，双向绑定就失效了。
vue $set
qq_45429539的博客
12-30 143
@vue $set vue $set 如果在创建实例以后，再在实例上绑定新属性，vue是无法进行双向绑定的 此时如果使用this.$set的话，vue就会对它进行双向绑定了。 this.$set(‘变量’,‘属性’,‘值’) this.$set(_this.jbxxData, ‘spzzlx’, ‘1’); ...
$set用法
最新发布
04-02
<think>好的，我现在需要仔细分析用户的问题，并给出合适的回答。用户之前询问了关于导航栏五个Tab的动态数据加载问题，我给出了使用Vue.js的实现方案，其中提到了使用`this.$set`来确保响应式更新。现在用户的新问题是询问`$set`的用法，所以需要详细解释这个方法。 首先，我要确定用户对Vue的响应式原理了解多少。用户可能在使用Vue时遇到了数据更新但视图不更新的问题，因此想了解`$set`的作用和使用场景。需要明确为什么需要`$set`，以及它在什么情况下使用。 接下来，我要回顾Vue的响应式系统。Vue无法检测到对象属性的添加或删除，以及数组索引的直接设置。这是因为Vue在初始化实例时对属性执行getter/setter转换，所以属性必须在data对象中存在才能是响应式的。如果用户动态添加新属性，或者直接通过索引修改数组，Vue无法自动更新视图。这时就需要`$set`方法。 然后，整理`$set`的用法。包括对象和数组两种情况。对于对象，添加新属性时需要`Vue.set(target, key, value)`；对于数组，直接设置索引时也需要`Vue.set(array, index, value)`。同时，实例方法`this.$set`的用法也需要说明。 需要给出具体的示例代码，帮助用户理解在不同情况下如何正确使用`$set`。例如，当向对象添加新属性时，直接赋值不会触发更新，而使用`$set`则可以。同样，修改数组元素时，直接设置索引无法触发更新，必须使用`$set`或者数组的变异方法。 另外，用户可能关心在组件中如何正确使用`$set`，特别是在处理数组和对象时的注意事项。需要强调何时必须使用`$set`，而何时可以使用其他方法（如数组的push、splice等变异方法）。 还要注意提醒用户常见的错误场景，比如在循环中动态添加属性，或者在异步操作中修改数据，这时候如果没有正确使用`$set`，可能导致视图不更新。给出解决方案和替代方法，比如使用`Object.assign()`创建新对象，或者使用扩展运算符返回新数组。 最后，总结`$set`的核心作用，并强调其在保持响应式数据更新中的重要性。确保用户理解为什么需要这个方法，以及如何正确应用在实际项目中。</think>### **Vue中$set方法详解** `$set`是Vue提供的 **响应式数据更新核心方法**，用于解决因JavaScript限制导致的视图不更新问题。以下是完整用法指南： --- ### **一、核心作用** #### 1. **问题根源** ```javascript // ❌ 直接添加新属性不会触发视图更新 this.obj.newKey = 'value' // ❌ 直接修改数组元素不触发更新 this.arr[0] = newValue ``` Vue无法检测到： - 对象属性的添加/删除 - 数组索引的直接赋值 - 数组长度的修改 #### 2. **解决方案** ```javascript // ✅ 正确方式 this.$set(target, key, value) ``` 强制触发视图更新，保持数据响应性 --- ### **二、使用场景与语法** #### 1. **对象属性动态添加** ```javascript // 初始数据 data() { return { user: { name: '张三' } } } // ❌ 错误方式（视图不更新） this.user.age = 25 // ✅ 正确方式 this.$set(this.user, 'age', 25) ``` #### 2. **数组元素修改** ```javascript // 初始数据 data() { return { list: ['A', 'B', 'C'] } } // ❌ 错误方式 this.list[1] = 'X' // ✅ 正确方式 this.$set(this.list, 1, 'X') ``` #### 3. **深层嵌套结构** ```javascript // 多层对象结构 data() { return { tree: { branch: { leaf: '绿色' } } } } // ✅ 修改嵌套属性 this.$set(this.tree.branch, 'flower', '红色') ``` --- ### **三、等效写法对比** | 场景 | 传统方式 | Vue响应式方式 | |----------------------|---------------------|-----------------------| | 添加对象属性 | `obj.key = value` | `this.$set(obj, 'key', value)` | | 修改数组元素 | `arr[index] = val` | `this.$set(arr, index, val)` | | 删除对象属性 | `delete obj.key` | `this.$delete(obj, 'key')` | --- ### **四、原理剖析** 1. **响应式系统限制** - Vue2使用`Object.defineProperty`实现数据劫持 - 初始化阶段未声明的属性无法被追踪 2. **$set内部流程** ```mermaid graph TD A[调用$set方法] --> B{目标类型} B -->|Object| C[定义新属性getter/setter] B -->|Array| D[调用splice方法] C --> E[触发依赖通知] D --> E E --> F[视图更新] ``` --- ### **五、最佳实践** #### 1. **数组操作推荐方式** ```javascript // 优先使用变异方法 this.list.splice(index, 1, newValue) // 等价于 this.$set(this.list, index, newValue) ``` #### 2. **对象操作替代方案** ```javascript // 创建新对象实现响应式更新 this.obj = Object.assign({}, this.obj, { newKey: 'value' }) ``` #### 3. **Vue3升级说明** ```javascript // 使用Proxy后无需$set // Vue3中可直接操作： this.obj.newKey = 'value' this.arr[0] = newValue ``` --- ### **六、常见问题处理** **问题：修改数组长度无效** ```javascript // ❌ 无效操作 this.arr.length = 2 // ✅ 正确方式 this.arr.splice(2) // 保留前两个元素 ``` **问题：动态添加多个属性** ```javascript // ❌ 多次$set this.$set(obj, 'key1', 1) this.$set(obj, 'key2', 2) // ✅ 合并操作 this.obj = { ...this.obj, key1: 1, key2: 2 } ``` --- ### **七、调试技巧** 1. **强制更新视图** ```javascript this.$forceUpdate() // 应急方案，慎用 ``` 2. **检查响应式属性** ```javascript console.log(this.$data) // 查看已响应式化的数据 ``` 通过合理使用`$set`，可有效解决90%的Vue数据更新不渲染问题。建议结合Vue Devtools观察数据变化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜冬眠。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值