記個(gè)踩坑筆記
<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>
vue3.0里面茵汰，如果數(shù)組是用reactive()聲明的，要清空數(shù)組得用list.length = 0,如果想要使用list =[],或者直接賦值類型list = [1,2,3,4,5],得把數(shù)組用ref([])來(lái)聲明缀匕，然后用list.value = []來(lái)修改,然后如果是對(duì)象里面的數(shù)組，可以直接使用obj.list = []來(lái)清空，因?yàn)閛bj已經(jīng)被響應(yīng)式了.
