有的时候我们变化data内的内容，console.log打印的时候是显示已经变化了的，但并没有渲染到界面上去。受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

具体请戳 深入响应原理： https://cn.vuejs.org/v2/guide/reactivity.html

我个人的简单理解是，js中，没有在对象中定义该字段，所以需要初始化，才能及时响应。

尝试过后，的确解决了这个问题。

多样解决办法可以参考 https://blog.csdn.net/weixin_42213951/article/details/83385186