vue3中的reactive函数声明数组

vue3中reacitve函数如何声明一个响应式数组，如以下案例

<template>
  <div>

      <div v-for="item in arr" :key="item"> 
          {
          
   {
          
   item}}
      </div>

        <button @click="change">change</button>
  </div>
</template>

<script>

  import {
          
    defineComponent, reactive,ref } from vue;
  export default defineComponent({
          
   
    setup(props,context) {
          
   
      let arr = reactive([])

      function change(){
          
   
        console.log("change...");
        let newArr = [1,2,3]
        arr = newArr
      }
      

      return{
          
   
        arr,
        change
      }

    },
  });
</script>

<style scope></style>

点击change按钮，发现并没有什么变化，这是因为arr = newArr这行代码让arr失去了响应式。

解决办法

使用ref函数

setup(props,context) {
          
   
      let arr = ref([])

      function change(){
          
   
        console.log("change...");
        let newArr = [1,2,3]
        arr.value = newArr
      }
      

      return{
          
   
        arr,
        change
      }

    },

使用数组的push方法

setup(props,context) {
          
   
      let arr = reactive([])

      function change(){
          
   
        console.log("change...");
        let newArr = [1,2,3]
        arr.push(...newArr)
      }
      

      return{
          
   
        arr,
        change
      }

    },

创建一个响应式对象，对象的属性是数组

<template>
  <div>

      <div v-for="item in arr.list" :key="item"> 
          {
          
   {
          
   item}}
      </div>

        <button @click="change">change</button>
  </div>
</template>

<script>

  import {
          
    defineComponent, reactive,ref } from vue;

  export default defineComponent({
          
   
    setup(props,context) {
          
   
      let arr = reactive({
          
   
        list:[]
      })

      function change(){
          
   
        console.log("change...");
        let newArr = [1,2,3]
        arr.list = newArr
      }
      

      return{
          
   
        arr,
        change
      }

    },
  });
</script>