Vue 3中监听数组变几种方式oldVal级秘指招
Vue 3中监听数组变化的几种方式
一、使用`watch`监听器
在Vue 3里，你可以通过`watch`来监控数组的变化。就像给数组装了个小眼睛，它一发现数组有变动，就会执行你指定的回调函数。
示例：
``` // 示例代码 const reactiveArray = ref([1, 2, 3]); watch(reactiveArray, (newVal, oldVal) => { console.log('New array:', newVal); console.log('Old array:', oldVal); }); ```二、使用`ref`和`reactive`
除了`watch`，你还可以用`ref`和`reactive`来监听数组的变化，它们更适合处理简单的响应式数据。
示例：
``` // 示例代码 const reactiveObject = reactive({ array: [1, 2, 3] }); watch(reactiveObject.array, (newVal, oldVal) => { console.log('New array:', newVal); console.log('Old array:', oldVal); }); ```三、使用`computed`属性
有时候，通过`computed`属性来监听数组的变化也是个不错的选择。`computed`属性会根据依赖的响应式数据自动更新，所以可以用它来监控数组的变化。
示例：
``` // 示例代码 const reactiveArray = ref([1, 2, 3]); const arrayLength = computed(() => reactiveArray.value.length); watch(arrayLength, (newVal, oldVal) => { console.log('New length:', newVal); console.log('Old length:', oldVal); }); ```四、实例说明
让我们来看一个实际的应用场景，比如一个待办事项应用，你需要实时更新界面并保存数据。
示例：
``` // 示例代码 const reactiveArray = ref([]); const todos = reactive({ items: reactiveArray }); watch(todos.items, (newVal, oldVal) => { // 保存数据到数据库或其他地方 console.log('New todos:', newVal); console.log('Old todos:', oldVal); }); ```在Vue 3中，监听数组变化有多种方法，包括使用`watch`监听器、`ref`和`reactive`，以及`computed`属性。根据你的需求选择合适的方法，可以让你的Vue应用更加灵活和高效。