vue中数组的变异方法如何影响视图

变异方法有

push() 数组的添加元素 返回数组的长度

pop() 从后面删除一个元素 返回删除的元素

shift() 从前面删除一个元素 返回删除的元素

unshift() 从数组的前面追加元素 返回数组的长度

splice() 数组的剪贴、删除、插入

sort() 数组的排序

reverse() 数组的反转

代码

var obj = {}
    let middel = 100
    Object.defineProperty(obj,"msg",{
        get(){
            //console.log("get方法被执行了哦....")
            return middel
        },
        set(val){
            // console.log("set方法被执行了哦....",val)
            // obj.msg = val
            middel = val
        }
    })

    //console.log(obj.msg)   //获取对象的属性的时候，会调用自身的get方法
    obj.msg = 1111           //设置对象的属性的时候，会调用自身的set方法
    console.log(obj.msg)     

非变异方法的视图同步
用到vue.set()方法

代码如下

       由于 JavaScript 的限制，Vue 不能检测以下数组的变动：
            1.当你利用索引直接设置一个数组项时，例如：   vm.items[indexOfItem] = newValue
            1-1.Vue.set(vm.items, indexOfItem, newValue)
                Vue.set(vm.arr, 2, 30) //如果在实例中可以通过   this.$set(vm.arr, 2, 30)
            1-2 vm.items.splice(indexOfItem, 1, newValue)

            2.当你修改数组的长度时，例如：vm.items.length = newLength
            vm.items.splice(newLength)