vue3中的reactive函数声明数组

一时失言乱红尘 2023-10-11 15:22 79阅读 0赞

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>