vue3中的reactive函数声明数组

最新推荐文章于 2025-04-17 18:33:55 发布

DanceDonkey

最新推荐文章于 2025-04-17 18:33:55 发布

阅读量3.4w

点赞数 26

分类专栏：前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_43750656/article/details/113987010

版权

前端专栏收录该内容

44 篇文章

订阅专栏

本文探讨了在 Vue3 中使用 `reactive` 函数声明响应式数组时遇到的问题，当直接赋值给 `arr` 会导致失去响应性。解决方案包括使用 `ref` 函数或者利用数组的 `push` 方法，以及创建一个响应式对象并将数组作为其属性。通过这些方法，可以确保数组在变更时正确更新视图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>