第18节:Vue3 数组和集合的注意事项

在UniApp中使用Vue3框架时，处理数组和集合需要注意以下几点：

1. 数组和集合的初始化：在Vue3中，可以使用ref()函数来创建一个响应式引用对象，然后使用该引用来初始化数组或集合。例如：

    import { ref } from 'vue';  
    const array = ref([]); // 创建一个空数组的响应式引用  
    const set = ref(new Set()); // 创建一个空的响应式集合

1. 数组和集合的更新：对于数组和集合的更新，需要使用Vue3提供的push()、pop()、splice()、shift()等方法，这样可以触发视图的更新。例如：

    // 向数组中添加元素  
    array.value.push('new element');  
      
    // 从数组中移除元素  
    array.value.splice(array.value.indexOf('element to remove'), 1);  
      
    // 修改集合中的元素  
    set.value.add('new element');  
    set.value.delete('element to remove');

1. 使用computed()函数：对于需要计算属性的情况，可以使用computed()函数来创建一个响应式计算属性。例如：

    import { computed } from 'vue';  
      
    const filteredArray = computed(() => {  
      return array.value.filter(item => item.includes('filter text'));  
    });

1. 使用watch()函数：对于需要在数组或集合发生变化时执行某些操作的情况，可以使用watch()函数来监听变化。例如：

    watch(array, (newVal, oldVal) => {  
      // 在数组发生变化时执行某些操作  
    });

1. 使用nextTick()函数：在某些情况下，需要在DOM更新完成后执行某些操作，可以使用nextTick()函数来等待DOM更新完成。例如：

    array.value.push('new element');  
    nextTick(() => {  
      // 在DOM更新完成后执行某些操作  
    });

订阅专栏，每日更新

第17节：Vue3 反应式代理与原始代理