vue3 数组清空与重新赋值的操作代码

<template>
  <div>
    {{list}}
    <button @click="add">增加</button>
    <button @click="clearAll">清空</button>
    {{newList}}
  </div>
</template>
<script>
import { ref, watch, toRefs,computed,reactive,onBeforeUpdate,onUpdated,onBeforeMount,onMounted,onBeforeUnmount,onUnmounted ,onRenderTracked,onRenderTriggered  } from 'vue'
export default {
  name: '',
  components: {
  },
  setup(){
    let list = ref([])
    function add(){
      list.value.push(123)
      state.newList.push(123)
    }
    let state = reactive({
      newList:[]
    })
    function clearAll(){
      list.value = [1,2,3,4,5]
      // list.length = 0
      state.newList = []
      console.log(list)
    } 
    return {
      list,
      add,
      clearAll,
      ...toRefs(state)
    }
  },
}
</script>

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

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

    const array = ref([1,2,3]);
    watch(array,()=>{
      console.log(array.value);
    },)
    array.value = [];

    const array = ref([1,2,3]);
    watch(array,()=>{
      console.log(array.value);
    },)
    array.value = array.value.slice(0,0);

    const array = ref([1,2,3]);
    watch(array,()=>{
      console.log(array.value);
    },{
      deep:true
    })
   array.value.length = 0;

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

    const array = reactive([1,2,3]);
    watch(()=>[...array],()=>{
      console.log(array);
    },)
    array.splice(0,array.length)

    const array = ref([1,2,3]);
    watch(array,()=>{
      console.log(array.value);
    },{
      deep:true
    })
    array.value.splice(0,array.value.length)