【前端基础知识】Vue中的变量不是响应式的吗？属性赋值后视图不变化的原因是什么？

🤔问题

Vue是一款在国内非常流行的框架，采用MVVM架构，它提供了一种响应式的数据双向绑定机制，使得开发者可以更方便地管理模型和视图。但是在Vue2中，由于使用了Object.defineProperty来追踪属性变化，但是它只能追踪已经存在的属性，无法追踪动态添加的属性，导致我们动态添加了属性后视图也无法更新。这个时候就需要$set的帮助了。

注：Vue3使用的是Proxy去监听属性变化，所以不会有这个问题。但是为了保持向后兼容性，Vue3仍然保留了这个方法，可以使用，但已经不是必需的！

📝回答

$set是Vue提供的一个全局方法，它的作用是在响应式对象上添加一个属性，并确保这个属性是响应式的。这意味着，当这个属性的值发生变化时，Vue会自动更新视图。

$set方法的语法如下：

/**object*/

//this
this.$set(object, propertyName, value)

//vue
Vue.set(object, propertyName, value)

/**Array*/

//this
this.$set(array, index, value)

//vue
Vue.set(array, index, value)

其中，object是要添加属性的对象，propertyName是要添加的属性名，value是要添加的属性值。

举个🌰栗子，假设我们有一个data对象：

data: {
  user: {
    name: '张三',
    age: 18
  }
}

如果我们想要添加一个新的属性gender，我们可以使用$set方法：

Vue.set(this.user, 'gender', '男')

这样，我们就成功地向user对象中添加了一个gender属性，Vue也会自动更新视图。

🎨使用场景

需要注意的是，$set方法不仅可以用于添加或修改对象属性，而且可以用于数组，并且数组可以使用Vue提供的变异方法，如push、pop、splice等。

动态添加属性

在Vue中，如果我们想要动态地添加一个属性，我们通常会使用以下方式：

this.obj.newProp = 'new value';

但是，这种方式会导致新添加的属性不是响应式的，也就是说，当这个属性的值发生变化时，视图不会自动更新。这时，我们就需要使用$set方法来确保新添加的属性是响应式的：

this.$set(this.obj, 'newProp', 'new value');

这样，当newProp的值发生变化时，视图会自动更新。

动态添加数组元素

在Vue中，如果我们想要动态地添加一个数组元素，我们通常会使用以下方式：

this.arr.push('new item');

我们也可以使用$set方法来确保新添加的元素是响应式的：

this.$set(this.arr, this.arr.length, 'new item');

这样，当新元素被添加到数组中时，视图会自动更新。

❌注意事项

虽然$set方法可以解决动态添加属性和数组元素的问题，但是我们需要注意以下几点：

$set只能在响应式对象上使用

$set方法只能在响应式对象上使用，如果我们在非响应式对象上使用$set方法，它将不起作用。

$set不能用于根级别的属性

$set方法不能用于根级别的属性，也就是说，我们不能使用$set方法来添加或修改组件的根级别属性。如果我们需要修改根级别属性，我们应该在组件的data选项中声明这些属性。

$set的性能问题

$set方法会对性能产生一定的影响，因为它需要遍历整个对象来确保新添加的属性是响应式的。因此，我们应该尽量避免频繁地使用$set方法。

📄总结

$set方法是Vue提供的一个全局方法，它的作用是在响应式对象上添加一个属性，并确保这个属性是响应式的。$set方法的使用场景包括动态添加属性和数组元素。但是，我们需要注意$set方法只能在响应式对象上使用，不能用于根级别的属性，并且会对性能产生一定的影响。