1. Введение

Я столкнулся с проблемой на работе два дня назад,vue3используется вreactiveКак очистить сгенерированный адаптивный массив, я конечно обычно пишу так:

  let array = [1,2,3];
  array = [];

Но он используется вreactiveЕсть еще некоторые проблемы с прокси, например:

    let array = reactive([1,2,3]);
    watch(()=>[...array],()=>{
      console.log(array);
    },)
    array = reactive([]);

Видимо, с момента утраты оригинала响应式Ссылка на объект, поэтому он напрямую теряется监听.

2. Несколько способов пустых данных

Конечно, как десятилетний опыт работы с кодомРыбалка круглый годЯ сразу дал несколько решений.

2.1 Использование ref()

использоватьref, это самый простой способ:

    const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },)

    array.value = [];

2.2 Использование слайсов

sliceКак следует из названия, это массив切片, затем возвращает новый数组, чувство иgoлингвистический切片Вроде похоже. Конечно используетсяreactдрузья должны часто использоватьslice, чтобы очистить массив, просто напишите:

    const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },)

    array.value = array.value.slice(0,0);

Но будьте осторожны при использованииref.

2.3 длина присвоена 0

Лично я предпочитаю такиеlengthназначить как0:

    const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },{
      deep:true
    })

   array.value.length = 0;

Более того, это сработает только один раз, но вам нужно обратить вниманиеwatchвключатьdeep:

Однако таким образом, используяreactiveТак будет удобнее, и не надо будет включатьdeep:

    const array = reactive([1,2,3]);

    watch(()=>[...array],()=>{
      console.log(array);
    })

    array.length = 0;

2.4 Использование сварки

副作用функцияspliceтакже является решением, в этом случае также можно использоватьreactive:

    const array = reactive([1,2,3]);

    watch(()=>[...array],()=>{
      console.log(array);
    },)

    array.splice(0,array.length)

Но будь осторожен,watchсработает несколько раз:

Конечно, вы также можете использоватьref, но обратите внимание, что в этом случае вам нужно открытьdeep:

    const array = ref([1,2,3]);

    watch(array,()=>{
      console.log(array.value);
    },{
      deep:true
    })

    array.value.splice(0,array.value.length)

Но вы можете видетьrefтакже иreactiveТо же самое, сработает несколько раз.

3. Резюме

выше это я工作中Для清空数组Резюме, но вы можете видетьspliceЭто все еще немного странно, срабатывает несколько раз, но еще предстоит выяснить, почему возникает эта разница.