修改数据页面不更新的原因和解决方案

修改数据页面不更新的原因

当vue中data里声明或者已经赋值过的对象、数组时，向对象中添加新的属性，如果更新此属性的值，页面不会更新视图。

举个例子：当我点击按钮想要改变message中的值时

此时当我点击按钮，页面并不会发生改变。

官方定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。　
Vue官方文档给我们提供了两种方法：Vue.set()和this.$set()

两种方法作用一样，参数也是一致的。

区别：Vue.set 可以设置实例创建之后添加的属性，而this.$set只能设置实例创建后存在的属性

修改数据页面不更新的解决方案

1.数组数据改变时，使用某些方法操作数组，数据变了，但是视图并没改变。（页面没有监测到数据改变）
解决办法：

使用下面这些方法操作数组，其数据会被vue监测
push()、pop()、shift()、unshift()、splice()、sort()、reverse()可被vue监测到。