vue中data值改变但页面视图不刷新问题

问题的说明与解决

说明

• 问题就在于vue页面视图的不更新
• 在这里要注意一点，根据官方描述所得：当vue的data里面声明或者已经赋值过的对象或数组（包含对象值），向对象里面添加新的属性和更新这个新属性的值，页面视图是不会更新的。

解决

• 要想更新数据的时候视图也更新，可以使用 $set 或者 Object.assign 来解决
  添加新属性的时候，使用下面的方法

export default {
      data() {
            return {
                  obj: {
                        a: 1,
                        b: 2
                  }
            }
      }
}
// 给obj添加新属性
// 1
this.$set(this.obj1, 'c', 3)
// 2
Object.assign({}, this.obj, { c: 3 })

• 此处简单做个介绍，欲了解更多请移步下方官方文档⇣⇣⇣，点击下方链接即可

官方深入响应式原理