JavaScript 的什么限制,导致Vue 不能检测到数组的变动

是这样的,你console.log一下跟vue绑在一起的data里面属性,你会发现那些打印出来多了两个东西:
setter
getter
没错,vue检测数组变动靠的就是这两个属性

而这两个属性,根据vue文档的说法,它是使用了js原生的Object.defineProperty()(其实准确来讲应该是es的东西)
简单地讲,就是描述Array或者Json等Object类型里面的值的属性。
比如一个arr=[1,2,3,4],属性的属性就是里面的1具有的属性。。。其中有两个:数据属性和访问器属性。
比如数据属性中的 Enumberable,如果它为false,那么即使它描述的那个属性存在于json里面,也不会被for-in遍历到。

好,回到正题,也就是vue对数组的检测方法
它使用是Object类型底层的访问器属性来检测数组变动的。
访问器属性存在两个方法(姑且叫做方法吧,原文是叫attribute)

Get :在读取时调用的函数。默认值为undefined

Set :在写入时调用的函数,默认值为undefined

Vue的数组检测变动就基于上面这两个方法。
然而,都说了是es底层定义的东西,js是不可能直接就修改访问上面的Get和Set,必须通过Object.defineProperty这个方法进行修改:

    var json={ a:1 };    /*当json.a变动时打印修改信息*/
    
    Object.defineProperty(json,'a',{
    
        set:function(newValue){    
            console.log(this.value+'->'+newValue)
        }, 
        
        get:function(){  
            console.log(this.value)
        }
        
    })
据说,第一个实现Object.defineProperty方法的浏览器是IE8,想不到吧,这也是为什么vuejs不支持ie8以下的垃圾ie了的原因了。

而且,vue为了检测push这些操作造成的数组变动,都是将这些Api重新封装了一遍的。
所以当你直接 vm.items[0]={}这样的时候,vue根本没法给你做一个Object.defineProperty处理,
自然也搞不出setter和getter,自然无法检测数组变动。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值