学习笔记:vue为什么不能监听数组属性的变化

2,356 阅读2分钟

首先,我们得明白对象是如何监听属性的的变化的,vue的实现方法主要是通过Object.defineProperties方法对注册的数据进行劫持,并结合观察者模式,设置它们的setget方法,在get方法中注册观察者,然后在set方法中触发观察者即可,具体的实现,可以看看这篇文章:Vue.js双向绑定的实现原理。接下来我们了解下数组。

js中的数组其实就是一个对象,它的数据结构和对象的键值对结构是一模一样的,但是它模拟了数组的数据结构进行遍历,因此可以有序的获取保存的数据,比如数组的a[1]其实就转换成了a['1']进行数据保存。遍历的时候,就得对属性进行排序,获取有序的数据。并且数组对象提供很多与属性相关的操作,比如spliteslice等方法。详情可以看看这个:js数组详解

既然知道了数组也是对象,那为什么不可以监听属性的变动呢,如a[1]='a',其实这里还涉及到一个问题,那就是vue不能监听动态添加的属性,这是数据劫持的一个缺陷,动态添加的属性只能手动调用Vue.set方法进行注册监听,而数组要实现属性监听的话,就得不断得调用Vue.set方法了,也就说,要想实现数组的属性监听,得我们手动去实现。

而数组的作用就是不断的增删数据,这就得不断的调用set方法,这必然是成本高于回报的事情,所以说数组可以实现属性的监听,但监听的需求不强和成本太高了,因此对此,数组只需对其属性的个数变化进行监听即可。

而如何监听呢,无非就是重写本数组对象的相关方法。这些方法得是影响数组本身属性个数的方法,也叫变异方法,具体的实现可以参考这篇文章:如何监听数组的变化