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>