ref et réactif définissent des tableaux dans vue3

Dans vue3, il existe généralement deux manières de définir des données réactives : ref et réactive

De manière générale, nous utilisons ref pour définir des types de données de base et réactif pour définir des types de données complexes.

Mais vous pouvez également utiliser ref pour définir des tableaux

1. Ref définit un tableau

import { ref } from 'vue'

const arr = ref([])

Deux cas : le tableau est initialisé lors de sa définition, et le tableau n'est pas initialisé lors de sa définition

Initialiser le tableau

import { ref,watch } from 'vue'

const arr = ref([1，2，3])

watch(arr.value, () => { //这个时候通过直接修改和利用数组的方法修改都可以监测到
  console.log('数组变化了')
})

const pushArray = () => {
  emptyArray.value.splice(0, 0, 19)
}

const changeArrayItem = () => {
  emptyArray.value[0] = 10
}

tableau non initialisé

import { ref,watch,onMounted } from 'vue'

const arr = ref([])

watch( //这个时候不能用.value且必须是深度监听，这种写法不仅可以监听数组本身的变化，也可以监听 数组元素的变化
  arr,
  () => {
    console.log('空数组变化了')
  },
  {
    deep: true
  }
)
const pushArray = () => {
  arr.value.splice(0, 0, { value: 12 })
}
const changeArrayItem = () => {
  arr.value[0] = { value: 32 }
}
onMounted(() => {
  arr.value = [{ value: 5 }, { value: 2 }, { value: 3 }, { value: 4 }]
})

2. Reactive définit un tableau 

import { reactive } from 'vue';

let arr = reactive([])

function change(){
   let newArr = [1,2,3]
   arr = newArr
}

Mais il y aura des problèmes avec cette définition, arr = newArr Cette étape fait perdre à arr l'effet réactif

Solution : vous pouvez utiliser la définition de référence, utiliser la méthode push et imbriquer un objet en dehors du tableau

import { reactive,ref } from 'vue';

let arr = reactive([])

function change(){
   let newArr = [1,2,3]
   arr = newArr
}


// 方法一：使用 ref
let arr = ref([])

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


// 方法二：使用push 方法
let arr = reactive([])

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

// 方法三：外层嵌套一个对象
let arr = reactive({list:[]})

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