const vm = new Vue({
                 el:'#app',
                 data:{
                     message:'aaaaaa',
                     user:{
                         name:'zhang-san'
                     },
                     list:['aaaa','bbbb','cccc']
                 },
                 methods:{
                     show(){
                         // 这些操作都是无效的
                         
                         //1.往根实例添加属性
                         this.text='mao dou mei you'
                         //2.往对象上新增属性
                         this.user.age=Math.random() * 100
                         //3.更改数组某一项
                         this.list[0]='111111111'
                         //4.更改数组长度
                         this.list.length=1
                     }
                 }
             })

对象

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式 property

Vue.set(vm.someObject, 'b', 2)


this.$set(this.someObject,'b',2)

数组

//可以这样解决

//修改数组某个元素

Vue.set(vm.items, indexOfItem, newValue)

vm.items.splice(indexOfItem, 1, newValue)


//修改数组长度

vm.items.splice(newLength)