vue.js set方法

Vue.js 中的 set 方法主要用于向响应式对象添加新属性，并确保这个新属性同样是响应式的，以便触发视图的更新。这在 Vue 2.x 版本中尤为重要，因为直接添加属性到对象上并不会使其成为响应式的。

基础概念

在 Vue.js 中，如果你尝试给一个已经存在的对象添加一个新的属性，这个属性默认情况下不会触发视图的更新。这是因为 Vue 在初始化实例时会对 data 对象中的属性进行递归遍历，使用 Object.defineProperty 来劫持这些属性的 getter 和 setter，从而实现响应式。但是，对于之后动态添加的属性，Vue 无法自动将其转换为响应式。

为了解决这个问题，Vue 提供了一个全局 API 方法 Vue.set(target, propertyName/index, value) 或者在组件内部使用 this.$set(target, propertyName/index, value)。

示例代码

// Vue 2.x 示例
new Vue({
el: '#app',
data: {
user: {
name: 'John'
}
},
methods: {
addAge() {
// 使用 Vue.set 或 this.$set 添加 age 属性
this.$set(this.user, 'age', 30);
}
}
});

在 Vue 3 中，由于使用了 Proxy 作为其响应式系统的基础，这个问题已经被解决，因此不再需要 set 方法来添加新的响应式属性。

应用场景

• 当你需要在对象上添加一个新的属性，并且希望这个属性能够触发视图更新时。
• 在处理数组时，如果你需要修改数组的长度或者通过索引直接设置一个项的值，也可以使用 set 方法。

类型

• Vue.set 是一个全局方法。
• this.$set 是一个实例方法，可以在组件的方法中使用。

优势

• 确保新添加的属性是响应式的，能够触发视图的自动更新。
• 简化了向响应式对象添加属性的过程。

遇到的问题及解决方法

如果你在使用 set 方法时遇到问题，可能是因为：

1. 错误地使用了 set 方法的参数。
2. 在 Vue 3 中仍然尝试使用 set 方法，而实际上在 Vue 3 中已经不再需要这样做。

解决方法：

• 确保你传递给 set 方法的参数是正确的，即目标对象、属性名和属性值。
• 如果你在使用 Vue 3，检查是否真的需要使用 set 方法，因为在 Vue 3 中，大多数情况下直接设置属性即可。

// Vue 3 示例
const app = Vue.createApp({
data() {
return {
user: {
name: 'John'
}
};
},
methods: {
addAge() {
// 在 Vue 3 中，直接设置属性即可
this.user.age = 30;
}
}
});

app.mount('#app');

在 Vue 3 中，由于 Proxy 的使用，直接设置属性会自动使其成为响应式的，因此 set 方法不再是必需的。