vue3 数组如何监听长度变化

2024-01-26 10:14:28





## 在 Vue.js 3 中监听数组长度变化的两种方法

在 Vue.js 3 中，有两种方法可以监听数组长度的变化：

1. 使用数据劫持
2. 使用 watch API

### 使用数据劫持

数据劫持是 Vue.js 3 用于跟踪和响应数据更改的核心机制。当您在 Vue 实例中声明一个数组时，Vue 会自动劫持该数组。这意味着 Vue 会监听数组的所有更改，包括长度更改。

要使用数据劫持来监听数组长度的变化，您只需执行以下操作：

```javascript
const app = Vue.createApp({
  data() {
    return {
      array: [1, 2, 3]
    }
  }
})

app.mount('#app')

然后，您可以在组件模板中使用 v-for 指令来遍历数组：

<ul>
  <li v-for="item in array">{{ item }}</li>
</ul>

当您向数组添加或删除元素时，Vue 会自动更新模板中的列表。

使用 watch API

您也可以使用 watch API 来监听数组长度的变化。watch API 允许您在数据更改时执行回调函数。

要使用 watch API 来监听数组长度的变化，您只需执行以下操作：

const app = Vue.createApp({
  data() {
    return {
      array: [1, 2, 3]
    }
  },
  watch: {
    array(newVal, oldVal) {
      console.log(`Array length changed from ${oldVal.length} to ${newVal.length}`)
    }
  }
})

app.mount('#app')