Vue2.0中如何正确使用$set方法实现响应式更新？

本文共计1724个文字，预计阅读时间需要7分钟。

在Vue2.0中，给data对象新增属性并触发视图更新，可以直接在对象上添加新属性。以下是一个示例代码，展示如何给`student`对象新增`age`属性：

javascriptdata () { return { student: { name: '', sex: '' } }},methods: { addAge() { this.student.age=20; // 直接赋值 }}

这种方式简单直接，无需繁琐的赋值操作，但要注意，如果直接修改对象属性，Vue不会自动追踪到新添加的属性，因此可能不会触发视图更新。如果需要确保视图更新，可以使用Vue.set方法或Vue.set的别名`this.$set`：

javascriptmethods: { addAge() { this.$set(this.student, 'age', 20); // 使用Vue.set确保触发更新 }}

vue2.0 给data对象新增属性，并触发视图更新

如下代码，给 student对象新增 age 属性

data () { return { student: { name: '', sex: '' } } }

众所周知，直接给student赋值操作，虽然可以新增属性，但是不会触发视图更新

mounted () { this.student.age = 24 }

原因是：受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。