vue3 ref 和 reactive 声明的数组类型如何修改

在Vue 3中，您可以使用`ref`和`reactive`来声明变量和对象。对于数组类型的变量和对象，您可以使用JavaScript提供的`Array`和`Object`方法来修改它们的值。

对于`ref`声明的数组类型，您可以使用`value`属性来获取或修改它的值。例如：

<template>
  <div>
    <h1>{{ myArray }}</h1>
    <button @click="updateArray">Update Array</button>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myArray = ref([1, 2, 3]);

    const updateArray = () => {
      myArray.value.push(4);
    };

    return {
      myArray,
      updateArray
    };
  }
};
</script>

在这个例子中，我们使用`ref`声明了一个数组类型的变量`myArray`，并初始化它为`[1, 2, 3]`。我们还定义了一个`updateArray()`函数，用于将数字4添加到`myArray`中。在`updateArray()`函数中，我们使用`myArray.value`来访问`myArray`的值，并使用`push()`方法将数字4添加到数组末尾。

对于`reactive`声明的数组类型，您可以使用`Array`方法来修改它的值。例如：

<template>
  <div>
    <h1>{{ myArray }}</h1>
    <button @click="updateArray">Update Array</button>
  </div>
</template>

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const myArray = reactive({ numbers: [1, 2, 3] });

    const updateArray = () => {
      myArray.numbers.push(4);
    };

    return {
      myArray,
      updateArray
    };
  }
};
</script>

在这个例子中，我们使用`reactive`声明了一个对象`myArray`，其中包括一个数组属性`numbers`，初始化为`[1, 2, 3]`。我们还定义了一个`updateArray()`函数，用于将数字4添加到`numbers`数组中。在`updateArray()`函数中，我们使用`myArray.numbers`来访问`numbers`数组，并使用`push()`方法将数字4添加到数组末尾。

总之，无论是`ref`还是`reactive`声明的数组类型，您都可以使用JavaScript提供的`Array`方法来修改它们的值。