vue的$set使用

时间: 2023-11-15 16:00:08 浏览: 132

Vue2.0 $set()的正确使用详解

Vue2.0中的`$set()`方法是用来解决Vue无法检测对象动态添加属性并触发视图更新的问题。在ES5环境中，Vue在初始化实例时，会将`data`对象中的属性转化为getter和setter，以实现数据的响应式。但是，如果在实例创建后，直接给对象动态添加属性，Vue不会检测到这个变化，因此不会更新视图。错误的`$set()`使用示例： ```javascript mounted () { this.$set(this.student.age, 24); } ``` 这种写法是不正确的，因为`$set()`的第一个参数应该是包含待添加属性的对象，第二个参数是属性名，第三个参数是属性值。正确的使用方式是： ```javascript mounted () { this.$set(this.student, "age", 24); } ``` 这样不仅能给`student`对象添加`age`属性，还能确保这个新属性是响应式的，即当`age`值改变时，视图会相应地更新。补充知识中提到了Vue的`Vue.set()`方法，它与`$set()`实际上是等价的，都是用来确保新增属性是响应式的。例如，在数组中，直接使用索引修改元素不会触发视图更新： ```javascript this.items[1] = 'two'; ``` 而使用`Vue.set()`或`$set()`可以确保更新触发视图更新： ```javascript Vue.set(this.items, 1, 'two'); // 或者 this.$set(this.items, 1, 'two'); ``` Vue的响应式原理基于依赖追踪和观察者模式。每个组件实例都有一个watcher对象，它会在组件渲染过程中收集依赖，当依赖项改变时，watcher会接收到通知，进而重新计算，使得关联的组件得以更新。由于JavaScript的限制，Vue无法检测到对象属性的动态添加或删除，因此需要`$set()`或`Vue.set()`来确保新增属性的响应性。在某些情况下，如果方法中既有数组也有对象的更新，直接操作`data`也是可以的，因为Vue能够检测数组的某些变异方法（如`push`、`pop`、`shift`、`unshift`、`splice`、`sort`、`reverse`），但不包括直接通过索引设置元素或改变数组长度。如果需要更新数组中的某个特定位置的元素，依然推荐使用`Vue.set()`或`$set()`。总结起来，Vue2.0中的`$set()`或`Vue.set()`方法是解决动态添加属性并保持响应式的关键工具。在给实例添加新的响应式属性时，应优先考虑使用这两个方法，以确保视图能正确反映数据的变化。理解这一机制对于开发高效且响应式的Vue应用至关重要。

Vue的$set方法是用来解决双向绑定失效的问题的。当我们在Vue实例创建之后，再次给数据赋值时，有时候并不会自动更新到视图上去。这是因为Vue在实例创建之后添加新的属性到实例上，它不会触发视图更新。这时候我们就需要使用$set方法来手动触发视图更新。$set方法可以设置属性对象，可以是Object或者数组，设置的key值可以是string或者number类型，设置的值可以是任意值。例如，在上述代码示例中，我们可以使用this.$set(this.obj.info,'content', 'who is my girlfriend?')来设置obj.info.content的值，从而手动触发视图更新。

阅读全文

vue的$set使用

相关推荐

Vue $set 动态绑定详解：单数据、对象、数组及JSON示例

Vue.js中Vue.set()与this.$set()的使用详解

vue $set使用

vue $set 给数据赋值的实例

vue $set原理

vue $set不生效

vue$set的用法

vue $set修改数组

vue$set的作用

vue $set怎么替换整行

vue $set 函数 怎么用 代码

vue.$set使用

vue.$set和vm.$set有什么区别

vue3使用$set

vue3 $set用法

vue的$set和forEach具体怎么使用

Vue.set this.$set

vue中this.$set和vue.set的区别

Vue源码解析：Vue.set()与$set()的实战与实现原理

最新推荐

实验室管理系统 微信小程序+SSM毕业设计 源码+数据库+论文+启动教程.zip

基于java的苹果网吧计费管理系统设计与实现.docx

俄罗斯RTSD数据集实现交通标志实时检测

管理建模和仿真的文件

预测区间与置信区间：机器学习中的差异与联系

基于KNN通过摄像头实现0-9的识别python代码

易语言开发的文件批量改名工具使用Ex_Dui美化界面

"互动学习：行动中的多样性与论文攻读经历"

【机器学习预测区间入门】：从概念到实现

如何修改QSpinBox的文字颜色？

vue $set 函数怎么用代码

实验室管理系统微信小程序+SSM毕业设计源码+数据库+论文+启动教程.zip