Vue中数据不响应问题如何彻底解决？

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

目录 + Vue数据不响应问题 + Vue数据响应不及时问题 + Vue数据不响应问题 + 将本来要新增的属性提前在data中定义好 + 我可以提前在userInfo中定义好，这样就不是新增属性了，就像下面这样 + data: { + userInfo: { + } + } + dat

目录

• vue数据不响应问题
• vue数据响应不及时问题

vue数据不响应问题

将本来要新增的属性提前在data中定义好

我可以提前在userInfo里面定义好，这样就不是新增属性了，就像下面这样

data() {     return {       userInfo: {         name: '子君',         sex: '男',         // 我先提前定义好         officialAccount: ''       }     }   }

直接替换掉userInfo

虽然无法给userInfo里面添加新的属性，但是因为userInfo已经定义好了，所以我直接修改userInfo的值不就可以了么，所以也可以像下面这样写

this.userInfo = {   // 将原来的userInfo 通过扩展运算法复制到新的对象里面   ...this.userInfo,   // 添加新属性   officialAccount: '前端有的玩' }

使用Vue.set

其实上面两种方法都有点取巧的嫌疑，其实对于新增属性，Vue官方专门提供了一个新的方法Vue.set用来解决新增属性无法触发数据响应。