首页vue this.$set的作用

vue this.$set的作用

时间: 2023-11-07 19:06:41 浏览: 141

深入理解vue中的$set

深入理解 Vue 中的 $set 概述：在 Vue 开发中，经常会遇到一种情况：当生成 Vue 实例后，再次给数据赋值时，有时候并不会自动更新到视图上去。这是因为 Vue 在实例创建之后添加新的属性到实例上时，它不会触发视图更新。为了解决这个问题，我们需要使用 Vue 的 $set 方法或实例方法 $set 来设置数据属性。什么是 $set？ $set 是 Vue 提供的一个全局方法，用于设置对象的属性值。它可以确保在设置属性值时，触发视图的更新。$set 方法可以用于设置对象的任何属性值，无论是简单的字符串类型还是复杂的对象类型。如何使用 $set？使用 $set 方法非常简单，只需要将要设置的对象和属性值传递给它即可。例如：Vue.set(data, 'sex', '男')。这将设置 data 对象的 sex 属性值为 '男'，并触发视图的更新。实例方法 $set 除了全局方法 $set 之外，Vue 还提供了实例方法 $set。它是全局方法 $set 的别名，可以用于设置实例中的数据属性。例如：this.$set('info.'+key, 'what is this?')。这将设置实例中的 info 对象的某个属性值，并触发视图的更新。为什么需要 $set？在 Vue 中，如果我们直接给数据赋值时，不使用 $set 方法，可能会出现视图不更新的情况。这是因为 Vue 只会在实例创建时遍历对象的属性，并将它们转换为 getter/setter。如果我们在实例创建之后添加新的属性到对象中，Vue 并不会自动将其转换为 getter/setter，导致视图不更新。使用 $set 方法可以确保在设置属性值时，触发视图的更新。结论：在 Vue 开发中，$set 方法是一个非常重要的工具，用于设置对象的属性值并触发视图的更新。通过使用 $set 方法或实例方法 $set，我们可以确保在设置数据属性时，视图总是更新的。

this.$set方法是Vue框架中用于向响应式对象添加新属性并确保其是响应式的，从而触发视图更新的方法。当我们给对象添加一个新属性时，如果直接使用常规的赋值方式（例如this.myObject.newProperty = 'hi'），Vue无法检测到这个新增属性，导致不会触发视图的更新。而使用this.$set方法，可以将新增的属性转变为响应式属性，使其能够被Vue检测到，并通知视图进行更新。

阅读全文