在Vue项目中，动态添加数据并实现动态绑定是前端开发中非常常见的需求，很多新手会遇到新增数据后视图不更新的问题，这其实和Vue的响应式系统设计有关。我们需要先理解Vue是如何追踪数据变化的，才能找到正确的动态添加和绑定思路。
Vue响应式系统的基本逻辑
Vue2的响应式系统是基于Object.defineProperty实现的，在实例初始化的时候，会对data中的所有属性进行遍历，给每个属性添加getter和setter，当属性被读取时触发getter，被修改时触发setter，进而通知依赖更新视图。但是如果在初始化之后直接给对象添加新属性，这个新属性是没有被添加getter和setter的，所以修改它的时候不会触发视图更新。
对于数组来说，Vue重写了数组的变异方法，比如push、pop、splice等，调用这些方法修改数组可以触发视图更新，但是如果直接通过索引修改数组元素或者修改数组长度，同样不会触发响应式更新。
对象动态添加数据的实现思路
使用Vue.set方法
如果需要在已经初始化的对象上动态添加新属性，并且让新属性具备响应式能力，最推荐的方式是使用Vue.set方法，它的作用是给响应式对象添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
Vue.set接收三个参数，第一个是目标对象，第二个是要添加的属性名，第三个是要添加的属性值。如果是Vue组件实例内部使用，也可以用实例上的$set方法，两者的作用完全一致。
// 定义Vue实例
new Vue({
el: '#app',
data() {
return {
userInfo: {
name: '张三',
age: 20
}
}
},
methods: {
addUserGender() {
// 给userInfo动态添加gender属性，值为男
this.$set(this.userInfo, 'gender', '男')
// 等价于 Vue.set(this.userInfo, 'gender', '男')
}
}
})
替换整个对象
如果不想使用Vue.set方法，也可以直接替换整个对象，因为Vue会对新赋值的对象重新进行响应式处理。这种方式适合需要添加多个属性的场景，代码会更简洁。
new Vue({
el: '#app',
data() {
return {
userInfo: {
name: '张三',
age: 20
}
}
},
methods: {
addUserProps() {
// 替换整个userInfo对象，添加address和phone属性
this.userInfo = {
...this.userInfo,
address: '北京市朝阳区',
phone: '13800138000'
}
}
}
})
数组动态添加数据的实现思路
使用数组变异方法
Vue重写了数组的以下变异方法，调用这些方法修改数组会触发视图更新：push、pop、shift、unshift、splice、sort、reverse。所以动态给数组添加元素的时候，优先使用这些方法。
new Vue({
el: '#app',
data() {
return {
list: ['苹果', '香蕉']
}
},
methods: {
addFruit() {
// 使用push方法动态添加元素，会触发视图更新
this.list.push('橙子')
// 使用unshift方法在开头添加元素也可以
// this.list.unshift('葡萄')
}
}
})
使用Vue.set修改数组元素
如果需要修改数组的某一个索引位置的元素，或者需要给数组动态添加索引位置的元素，不能直接通过this.list[index] = value的方式，需要使用Vue.set方法，第一个参数是数组，第二个是索引，第三个是新值。
new Vue({
el: '#app',
data() {
return {
list: ['苹果', '香蕉']
}
},
methods: {
updateFruit() {
// 修改索引1的元素为草莓，触发视图更新
this.$set(this.list, 1, '草莓')
// 动态在索引2的位置添加元素芒果
this.$set(this.list, 2, '芒果')
}
}
})
动态绑定的注意事项
动态添加数据之后，绑定到模板中就可以自动实现动态更新，不需要额外的操作。比如上面的userInfo添加了gender属性之后，直接在模板中使用<p>{{ userInfo.gender }}</p>就可以展示新属性，并且当gender属性被修改时，视图会自动更新。
需要注意的是，如果是动态添加的嵌套对象属性，同样需要遵循上面的规则，比如给userInfo添加一个detail对象，再给detail添加新属性，也需要用Vue.set或者替换对象的方式。
new Vue({
el: '#app',
data() {
return {
userInfo: {
name: '张三'
}
}
},
methods: {
addNestedProp() {
// 先给userInfo添加detail对象
this.$set(this.userInfo, 'detail', {})
// 再给detail对象添加height属性
this.$set(this.userInfo.detail, 'height', 180)
}
}
})
总结来说，Vue中动态添加数据并实现动态绑定的核心就是确保新增的数据被Vue的响应式系统追踪到，对象优先用Vue.set或者替换对象的方式，数组优先用变异方法或者Vue.set修改索引，这样就能保证新增数据修改时视图同步更新。