vue中监听数组的原理是什么

Vue 中监听数组的原理是基于 JavaScript 的 Object.defineProperty 方法来实现的。

当我们在 Vue 的 data 中定义了一个数组，并对它进行修改时，Vue 会劫持数组的所有变化，包括添加、删除和修改元素等操作。实现这一功能的核心原理就是通过对数组的原生方法进行重写，使之能够触发响应式更新。

具体步骤如下：

1. Vue 在初始化实例时，会通过 Object.defineProperty 方法遍历 data 对象中的每个属性，将其转化为 getter 和 setter，在这个过程中，如果 data 中的某个属性是数组，则会对数组进行特殊处理。

2. Vue 会对数组的原生方法进行重写，例如 push、pop、shift、unshift、splice、sort、reverse 等，重写后的方法会在执行时触发更新操作。

3. 在对数组进行修改时，Vue 会先调用原生方法将数组的变化进行更新，然后再通过 Vue 的响应式系统调用依赖收集和派发更新来通知依赖的组件进行重新渲染。

4. 在重写数组方法时，Vue 使用了一种称为“截获”的方式，即在执行原生方法前先截获这些方法，然后执行对应的响应式方法，最后再执行原生方法。这样就能够保证数组的操作同时触发数据更新。

需要注意的是，Vue 的数组监听只会监听数组的变化操作，例如 push、pop、shift、unshift、splice 等，而不会监听数组索引的变化和直接通过索引进行赋值的操作。如果需要监听数组索引的变化，可以借助 Vue 提供的 $set 方法或者直接通过修改数组的引用来实现。

在Vue中，监听数组的原理是通过使用"劫持"(Hijacking)和"响应式"(Reactivity)机制来实现的。

1. "劫持"机制：Vue通过重写数组的原型方法，如push、pop、shift、unshift等来劫持数组的操作。在数组的操作之前，Vue会先监听这些操作，并执行相应的操作。

2. "响应式"机制：在Vue中，数据对象都是被包装在一个Observer类的实例中。Observer对象会递归地将每个属性转换为getter和setter来实现监听。当数组进行操作时，Vue会调用数组的原型方法，触发对应的监听器。

3. 数组变异方法的处理：Vue对数组的变异方法进行了重写，以便在调用这些方法时能够触发监听器。当调用这些方法时，Vue会执行以下操作：

   • 改变数组自身：Vue会调用数组原型方法来改变数组本身，比如push、pop等。
   • 调用数组修改触发器：Vue会调用数组对象上的触发器，将变动的信息通知到观察者。
   • 触发依赖更新：当触发器被调用时，Vue会通知所有依赖于该数组的地方进行更新。

4. 非变异方法的处理：对于非变异方法（例如filter、slice等），Vue会创建一个新的数组，并对新数组进行劫持和监听，然后返回新数组，以确保数组的响应式。

5. 数组的索引和长度监听：对于数组的索引和长度，Vue也会进行监听。当我们修改数组的索引值或者修改数组的长度时，Vue会触发对应的监听器，通知依赖进行更新。

通过劫持和响应式机制，Vue能够实现监听数组的变化，并及时更新视图，从而实现数据的响应式更新。这使得我们能够方便地使用数组，并在数据改变时自动更新UI。

在Vue中，监听数组的原理主要是通过劫持数组的内部方法，实现对数组的变化进行监听和响应。Vue利用了JavaScript的特性，在对象中使用了 Object.defineProperty方法，这个方法能够设置一个属性的get和set方法来监听属性的变化。对于数组来说，Vue利用了该特性对数组的诸多方法进行了代理。

具体来说，监听数组的原理分为以下几个步骤：

1. 创建一个Observer观察者对象，用来监听数组的变化。这个观察者对象是由 Vue 内部创建的，它会通过递归的方式将数组中的所有元素都转换为响应式对象。

2. 在Observer对象的构造函数中，会通过 Object.defineProperty()方法对数组的一些方法进行改写，使其能触发数组的更新。

   • push() / pop()：在数组末尾添加或删除元素时，会对新加入或删除的元素进行监听，从而触发更新；

   • unshift() / shift()：在数组头部添加或删除元素时，同样会触发更新；

   • splice()：通过改写 splice()方法，可以监听数组的内部元素的变化，从而触发更新；

   • sort() / reverse()：对数组进行排序时，会触发更新；

   • toLocaleString() / toString() / join()：调用这些方法时，也会触发更新。

3. 当触发数组的变化时，会通过notify()方法通知依赖更新。notify()方法内部会遍历依赖列表，即对数组进行操作的时候，会触发更新所有依赖这个数组的地方。

通过以上的劫持和代理，Vue可以在数组发生变化时，自动进行更新操作，使页面按照最新的数据进行渲染。

尽管Vue已经实现了对数组的监听，但是Vue并不能监听到数组索引的变化和使用length来改变数组长度的变化，因为必须在使用Vue提供的API来操作数组才能正常触发更新。