Vue 3 中怎样监听数组的厘革

在 Vue 3 中监听数组的厘革

在 Vue 3 中，监听数组的厘革是一个常见的需求，尤其是在构建数据驱动的应用时。Vue 3 提供了强盛的功能来处理这种情况，包括 Composition API 和 Options API。这篇文章将详细介绍这两种方法，并通过示例代码演示怎样实现。
使用 Composition API

Vue 3 引入了 Composition API，这是一个更加灵活和模块化的 API 计划方式。它答应你在一个函数中构造逻辑，从而进步了代码的可读性和复用性。
1. 创建响应式数组

要使用 Composition API 监听数组的厘革，首先必要使用 ref 创建一个响应式数组。ref 是 Vue 3 提供的一个函数，用于将普通数据转变为响应式数据。

1. <template>
2.   <div>
3.     <button @click="addItem">Add Item</button>
4.     <ul>
5.       <li v-for="item in items" :key="item">{{ item }}</li>
6.     </ul>
7.   </div>
8. </template>
10. <script setup>
11. import { ref, watch } from 'vue';
13. // 创建响应式数组
14. const items = ref(['Item 1', 'Item 2', 'Item 3']);
16. // 向数组中添加新项
17. function addItem() {
18.   items.value.push(`Item ${items.value.length + 1}`);
19. }
20. </script>

复制代码

在这个示例中，items 是一个响应式数组。点击按钮会调用 addItem 函数，向数组中添加新项。
2. 监听数组的厘革

使用 watch 函数可以监控数组的厘革。watch 函数接受两个参数：要观察的数据源和一个回调函数。回调函数会在数据厘革时执行。

1. <script setup>
2. import { ref, watch } from 'vue';
4. const items = ref(['Item 1', 'Item 2', 'Item 3']);
6. function addItem() {
7.   items.value.push(`Item ${items.value.length + 1}`);
8. }
10. // 监听数组的变化
11. watch(items, (newItems, oldItems) => {
12.   console.log('Items changed from', oldItems, 'to', newItems);
13. }, { deep: true });
14. </script>

复制代码

在这里，watch 被用来观察 items 数组。deep: true 选项确保即使数组内部的元素发生厘革，也能被捕捉到。
使用 Options API

Vue 3 仍旧支持传统的 Options API。这种方式对于很多开发者来说更加熟悉，特殊是那些从 Vue 2 迁移过来的开发者。
1. 创建响应式数组

在 Options API 中，响应式数组可以通过 data 选项界说。

1. <template>
2.   <div>
3.     <button @click="addItem">Add Item</button>
4.     <ul>
5.       <li v-for="item in items" :key="item">{{ item }}</li>
6.     </ul>
7.   </div>
8. </template>
10. <script>
11. export default {
12.   data() {
13.     return {
14.       items: ['Item 1', 'Item 2', 'Item 3']
15.     };
16.   },
17.   methods: {
18.     addItem() {
19.       this.items.push(`Item ${this.items.length + 1}`);
20.     }
21.   }
22. };
23. </script>

复制代码

在这个示例中，items 数组被界说在 data 选项中。addItem 方法用于向数组中添加新项。
2. 监听数组的厘革

使用 watch 选项可以观察数组的厘革。watch 选项支持深度观察，通过设置 deep: true 可以确保对数组内部厘革的监听。

1. <script>
2. export default {
3.   data() {
4.     return {
5.       items: ['Item 1', 'Item 2', 'Item 3']
6.     };
7.   },
8.   methods: {
9.     addItem() {
10.       this.items.push(`Item ${this.items.length + 1}`);
11.     }
12.   },
13.   watch: {
14.     items: {
15.       handler(newItems, oldItems) {
16.         console.log('Items changed from', oldItems, 'to', newItems);
17.       },
18.       deep: true
19.     }
20.   }
21. };
22. </script>

复制代码

在这里，watch 选项用于观察 items 数组的厘革。deep: true 确保对数组内部的厘革也能进行深度观察。
在 Vue 3 中监听数组厘革时，有几个关键点必要留意，以确保你的代码高效且正确地响应数据的厘革：

1. 深度监听（Deep Watch）

当你必要监听数组内部的厘革（例如，修改数组中的对象属性），必须使用 deep: true 选项来确保 Vue 进行深度观察。否则，只有数组本身的引用厘革会被捕捉到，而内部元素的厘革则不会。
示例：

1. watch(items, (newItems, oldItems) => {
2.   console.log('Items changed from', oldItems, 'to', newItems);
3. }, { deep: true });

复制代码

2. 监听数组长度

有时你可能只对数组长度厘革感爱好，而不是对数组的每个元素的厘革。这时可以直接监听 items.length，以淘汰不必要的性能开销。
示例：

1. watch(() => items.value.length, (newLength, oldLength) => {
2.   if (newLength > oldLength) {
3.     console.log('Item added');
4.   } else {
5.     console.log('Item removed');
6.   }
7. });

复制代码

4. 使用响应式数据

确保使用 Vue 的响应式数据来管理数组，避免直接修改非响应式数据。直接操作非响应式数据不会触发 Vue 的反应性系统，也无法反映在视图中。
示例：

1. const items = ref(['Item 1', 'Item 2']);
2. items.value.push('Item 3'); // 正确的做法

复制代码

5. 避免不必要的重渲染

在某些情况下，频仍的数组更新可能导致不必要的组件重渲染。优化数据更新逻辑，确保仅在真正必要时才触发更新。
总结

在 Vue 3 中，无论是使用 Composition API 还是 Options API，监听数组的厘革都是处理数据的关键。Composition API 提供了更灵活的方式，通过 ref 和 watch 组合实现响应式数据的管理。而 Options API 则通过 data 和 watch 选项提供了传统的响应式数据管理方式。了解和掌握这些方法将资助你在开发中更有效地管理和响应数据的厘革。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。