vue3.0为什么监听到数组 • Worktile社区

不及物动词

这个人很懒，什么都没有留下～

Vue 3.0可以监听到数组的变化，这是因为Vue在设计上采用了响应式的原理。在Vue 2.0之前，Vue是通过劫持对象的getter和setter来监听数据的变化，并触发相应的更新。但是对于数组来说，Vue只能拦截数组的push、pop、shift、unshift、splice、sort、reverse这七个方法，而不能对数组的索引进行劫持。这就导致了在Vue 2.0中对数组进行直接赋值或者通过索引修改数组元素是无法触发视图更新的。

为了解决这个问题，Vue 3.0采用了Proxy来重写了响应式系统。Proxy是ES6中新增的一个特性，它可以拦截并定义对象的底层操作，包括属性的读取、设置、删除等操作。借助Proxy，Vue 3.0可以实现对数组的监听。

Proxy可以监听对象的所有属性，包括数组的索引。当使用Proxy监听数组时，任何对数组的修改都会被捕获到，并且可以触发相应的更新。这意味着我们可以对Vue 3.0中的数组进行直接赋值或者通过索引修改数组元素，都能够自动更新视图。

这种对数组的监听使得Vue 3.0在处理数组方面具有更强大的能力。而且采用Proxy的方式实现响应式系统，也使得Vue的性能得到了提升。因为Proxy只会在访问时才会触发监听，而不是像Vue 2.0那样对整个对象进行劫持。这意味着在Vue 3.0中，对数组的操作比Vue 2.0更加高效。

综上所述，Vue 3.0之所以能够监听到数组的变化，是因为它采用了Proxy来重写了响应式系统，通过拦截数组的操作实现了对数组的监听，并且提供了更高效的性能。这使得开发者可以更方便地操作和管理数组，同时也提升了应用的性能。

1年前 0条评论

fiy

Worktile&PingCode市场小伙伴

Vue3.0 引入了一种新的响应式系统，它使用了 Proxy 代理对象来监听数据的变化。在 Vue2.x 中，由于 JavaScript 的限制，无法直接监听到数组的变化，只能通过一些特殊的方法来实现数组的响应式。

那么，为什么 Vue3.0 能够直接监听数组呢？下面是一些关键原因：

使用 Proxy：在 Vue3.0 中，底层使用了 Proxy 对象来代理数据对象，使得可以直接监听对象和数组的变化。Proxy 是 ES6 引入的一个新功能，它可以拦截并改变 JavaScript 对象的操作。因此，Vue3.0 可以通过 Proxy 实现对数组的监听。
数组方法被改写：Vue3.0 改写了数组的一些方法，比如 push、pop、shift、unshift 等，使得这些方法能够触发依赖的更新。通过改写这些方法，Vue3.0 可以监听到数组的变化，并通知相关的组件进行更新。
基于索引的观察：Vue3.0 利用 Proxy，对数组的索引进行观察。这意味着当修改数组的某个索引位置的值时，Vue3.0 可以轻松地检测到变化，并触发更新。而在 Vue2.x 中，需要通过 $set 方法来修改数组的某个索引位置的值，并手动通知 Vue 去更新。
更高的性能：相比于 Vue2.x 的响应式系统，Vue3.0 的响应式系统在性能上有了显著的提升。通过使用 Proxy 和改写数组方法的方式，Vue3.0 可以更高效地进行依赖追踪和更新，减少了不必要的操作和性能损耗。
更好的类型推断：由于 Vue3.0 使用了新的响应式系统，它可以更好地支持 TypeScript 的类型推断。Vue3.0 对于数组的监听和更新是基于具体的类型定义的，可以更准确地推断和检查代码中的类型错误。

综上所述，Vue3.0 之所以能够直接监听到数组，是因为它使用了 Proxy 对象来拦截并改变数组的操作，并通过改写数组的方法和基于索引的观察来实现对数组的监听。这使得 Vue3.0 的响应式系统在性能、类型推断等方面都有了显著的提升。

1年前 0条评论

worktile

Worktile官方账号

Vue3.0引入的响应式系统相比于Vue2.0有了一些重大改进，其中之一就是能够监听数组的变化。在Vue2.0中，Vue只能监听到对象的属性变化，而无法监听数组的变化，需要通过一些特定的方法来触发更新。而在Vue3.0中，通过Proxy代理对象来实现对数组的监听。下面我们来具体介绍Vue3.0如何监听数组。

Proxy代理对象

在Vue3.0中，通过Proxy代理对象来监听数组的变化。Proxy是ES6中的一个新特性，提供了拦截并重写JavaScript对象操作的能力。通过Proxy，我们可以在目标对象的访问和修改时添加一些自定义逻辑。

可以通过以下方式来创建一个Proxy代理对象：

const proxy = new Proxy(target, handler);

其中，target是要代理的目标对象，handler是一个对象，对象的属性中定义了各种钩子函数，用来拦截并处理对目标对象的操作。

监听数组的变化

在Vue3.0中，可以通过使用Proxy代理数组，监听到数组的变化。在监听数组时，我们可以使用以下几个钩子函数来拦截对数组的操作：

get(target, key)：当访问数组的某个值时被触发；
set(target, key, value)：当设置数组的某个值时被触发；
deleteProperty(target, key)：当删除数组的某个值时被触发；
defineProperty(target, key, descriptor)：当在数组上定义一个新属性时被触发；
has(target, key)：当使用in操作符检查数组的某个索引或属性是否存在时被触发。

通过在以上钩子函数中加入监听逻辑，我们可以实现对数组的监听。具体的操作流程如下：

创建一个空数组，并将其代理为Proxy对象：

const array = [];  // 原始数组
const proxyArray = new Proxy(array, {});

在handler对象中定义对数组的操作拦截逻辑：

const handler = {
  get(target, key) {
    // 在访问数组时触发的逻辑
    // ...
  },
  set(target, key, value) {
    // 在设置数组的值时触发的逻辑
    // ...
  },
  deleteProperty(target, key) {
    // 在删除数组的值时触发的逻辑
    // ...
  },
  // 其他钩子函数
};

将handler对象传入Proxy构造函数，创建一个Proxy代理数组：

const proxyArray = new Proxy(array, handler);

通过以上操作，我们就可以在handler的对应钩子函数中加入自定义的逻辑，实现对数组的监听。

示例

下面我们通过一个示例来具体演示如何使用Vue3.0监听数组的变化。假设我们有一个购物车的数组，我们希望能够在数组有变化时动态更新页面的显示。

const cart = [];

const handler = {
  get(target, key) {
    // 在访问数组时触发的逻辑
    console.log(`Getting ${key}`);
    return target[key];
  },
  set(target, key, value) {
    // 在设置数组的值时触发的逻辑
    console.log(`Setting ${key} to ${value}`);
    target[key] = value;
    // 更新页面的显示
    updateView();
    return true;
  },
  deleteProperty(target, key) {
    // 在删除数组的值时触发的逻辑
    console.log(`Deleting ${key}`);
    delete target[key];
    // 更新页面的显示
    updateView();
    return true;
  },
  // 其他钩子函数
};

const proxyCart = new Proxy(cart, handler);

// 修改数组的操作
proxyCart.push("apple");
proxyCart.push("banana");
proxyCart[1] = "orange";
proxyCart.pop();

// 更新页面的逻辑
function updateView() {
  // ...
}

在以上示例中，我们创建了一个名为cart的空数组，将其通过Proxy代理成proxyCart。在handler对应的钩子函数中，我们加入了自定义的逻辑，并在修改数组时触发更新页面的操作。

通过以上的操作，就可以实现对数组的监听，以及在数组发生变化时动态更新页面的显示。

综上所述，Vue3.0可以通过使用Proxy代理对象来监听数组的变化，通过在代理对象上定义相应的钩子函数来拦截对数组的操作，从而实现对数组的监听。

1年前 0条评论