Vue2 的数据响应式缺陷

vue的响应式原理 - 掘金

const vm = new Vue({
                 el:'#app',
                 data:{
                     message:'aaaaaa',
                     user:{
                         name:'zhang-san'
                     },
                     list:['aaaa','bbbb','cccc'],

                     mylist:[
                         {name:'zhangsan',age:12},
                         {name:'lisi',age:33},
                     ]
                 },
                 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

                         // 这个是有效的，因为数组每一项是对象
                         this.mylist[0].name=new Date().getTime()
                     }
                 }
             })

对象

当你把一个普通的 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)

数组

1、vue对于数组项是简单数据类型的情况没有劫持,这也导致了vue数组使用的一个问题，当数组项是简单数据类型时，修改数据项时视图并不会更新。

对于每项为简单数据类型的数组，可以这样去操作

//可以这样解决

//修改数组某个元素

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

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


//修改数组长度

vm.items.splice(newLength)

2、对于数组每一项为对象，Vue是遍历所有项，然后去劫持

function observeArr(arr){
    for(let i=0; i<arr.length; i++){   
        observe(arr[i])  //伪代码，对每一项进行劫持
    }
}

3、重写了7个可以改变原数组长度的方法（push, pop, shift, unshift, splice, sort, reverse），这样当我们调用push 等方法修改数组的时候，视图才会更新