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

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐