vue3里面,如果数组是用reactive()声明的,要清空数组得用list.length = 0,如果想要使用list =[],或者直接赋值类型list = [1,2,3,4,5],得把数组用ref([])来声明,然后用list.value = []来修改,然后如果是对象里面的数组,可以直接使用obj.list = []来清空,因为obj已经被响应式了.

<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>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐