vue 未定义属性解决数据不响应问题

vue 未定义属性解决数据不响应问题

我们知道vue是响应式的展示，只要在data里面定义好属性，然后引用即可。但是有一些属性是未知的，根据后台返回的格式来定，这个时候发现在输入框显示获取的内容无法修改，无法实现响应式。Vue专门有提供了一个新的方法 Vue.set来解决新增属性无法触发数据响应。

一、使用vue.set来解决新增属性无法触发数据响应

例如：userInfo: { name:'test'} 我们新增一个 sex 

this.$set(this.userInfo, 'sex', '男')  也可以使用 Vue.$set(this.userInfo, 'sex', '男')

当添加多个属性方法时可以用

this.userInfo = Object.assign({}, this.userInfo, {
  age:55,
  sex: '男'
})

二、使用$forceUpdate

$forceUpdate的存在让许多前端开发者不会再去注意数据双向绑定的原理，因为不论什么时候，反正我修改了data之后，调用一下$forceUpdate就会让Vue组件重新渲染，bug是不会存在的。但是实际上这个方法并不建议使用，因为它会引起许多不必要的性能消耗。

对于数组的添加也是同样的道理，Vue针对数组提供了变异方法。如push,pop,splice等等，在Vue中调用数组上面提供的这些方法修改数组的值是可以触发数据响应的。