$set()在Vue2.0中正确添加属性并触发视图更新

Vue2.0中的`$set()`方法是为了解决在数据对象上动态添加或修改属性时，无法触发视图更新的问题。在默认情况下，Vue.js通过依赖收集机制跟踪对象属性的变化，但当在已初始化实例后直接给对象添加新属性时，由于JavaScript引擎（如ES5）的限制，Vue可能无法感知这种变化，因此视图不会更新。 `$set()`方法的作用是显式地告诉Vue检测到这个属性的变化，确保视图能正确地响应。正确的使用姿势是向`data`对象的深层路径设置属性，而不是直接设置对象的某个属性。以下是使用`$set()`的示例： ```javascript data() { return { student: { name: '', sex: '' } } } mounted() { // 正确的使用方式 this.$set(this.student, 'age', 24); } ``` 在这个例子中，`this.$set(this.student, "age", 24)`明确地指示Vue应该将`age`属性视为data的一部分，并在视图中反映出来。这样做是因为`$set()`会为新添加的属性创建一个响应式的引用，使得当`age`的值改变时，视图会自动更新。 此外，还提到了`Vue.set()`，这是Vue 1.x版本中提供的方法，但在Vue 2.0中已经被`$set()`所取代，所以推荐使用`$set()`。在实际项目中，除非有兼容性需求，否则应避免使用`Vue.set()`。 对于场景应用，比如在一个列表渲染中，即使在点击事件后修改数组元素，如果没有使用`$set()`，也会出现问题。例如，下面的代码片段中，尽管修改了`items`数组的第1个元素，但由于没有使用`$set()`，视图不会更新： ```javascript methods: { btn() { this.items[1] = 'two'; // 这里直接修改数组元素，视图不会更新 console.log(this.items); } } ``` 为了修复这个问题，应在修改数组元素时使用`$set()`，如下所示： ```javascript methods: { btn() { this.$set(this.items, 1, 'two'); // 使用$set()确保视图更新 console.log(this.items); } } ``` 总结起来，Vue2.0中的`$set()`方法是处理动态添加、删除或更新对象属性，以确保视图响应性的重要工具。正确理解并熟练运用`$set()`可以避免在开发过程中遇到不必要的视图更新问题。