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

"Vue.js开发过程中，Vue.set()和this.$set()是用于解决数据绑定时新增属性无法响应化的问题。当在Vue实例创建后动态添加属性到对象上，Vue无法检测这些变化，因此视图不会更新。例如，在data中定义的student对象默认没有age属性，直接赋值不会生效。正确的做法是使用Vue.set()或this.$set()来添加响应式属性。这两个方法的实现原理相同，都引用了observer模块中的set函数，确保添加的属性能够触发视图更新。" Vue.js是一个流行的前端框架，它基于MVVM（Model-View-ViewModel）模式，实现了数据驱动视图。在Vue实例中，data对象内的属性是响应式的，这意味着当这些属性的值发生变化时，视图会自动更新以反映这些变化。然而，如果在实例创建后尝试添加新的属性，Vue不会自动将其变为响应式的。 例如，以下代码展示了在Vue实例中尝试添加新的属性`age`到`student`对象上： ```javascript data () { return { student: { name: '', sex: '' } } }, mounted () { this.student.age = 24 } ``` 这段代码中的`this.student.age = 24`不会触发视图更新，因为`age`属性在初始data对象中未定义，Vue没有对其进行响应式处理。为了解决这个问题，可以使用`Vue.set()`或`this.$set()`方法： ```javascript mounted () { this.$set(this.student, 'age', 24) } ``` `Vue.set()`和`this.$set()`的用法非常相似，都是用来向响应式对象添加新的响应式属性。它们都调用了同一个内部函数`set`，这个函数位于`../observer/index`模块中，负责将新属性转换为响应式的。这样，即使在实例创建后，添加的属性也能正确地同步到视图。 对于更深层次的对象嵌套，如`vm.info`已经存在，但需要添加新的属性`sex`，可以使用`Vue.set()`或`this.$set()`来添加响应式属性： ```javascript Vue.set(vm.info, 'sex', '男'); ``` Vue.set()和this.$set()是Vue.js中重要的工具，确保在运行时添加的属性能保持与视图的同步，是处理动态数据绑定时不可或缺的方法。在开发过程中，如果遇到添加新属性后视图不更新的情况，应当考虑使用这两个方法。