vue3 – Ao usar reativo para definir dados responsivos para atribuição de lista, a visualização não atualiza a solução

1. Problema

No Vue 3.0, reactive()quando usamos os dados responsivos definidos, quando é um array ou objeto, atribuímos diretamente um valor e descobrimos que os dados foram modificados com sucesso, mas a página não é renderizada automaticamente com os dados mais recentes; por que isso ?

Como disse o site oficial, existem alguns reativos 局限性: ( descrição oficial )

2. Razão

A razão é que a função reativa retornará um Proxyobjeto empacotado, então quando atribuirmos um valor diretamente como este: (veja o exemplo abaixo)

import {
    
     reactive } from "vue";

let userInfo = reactive([{
    
    name:'Eula'}]) 
console.log(userInfo) // Proxy(Array) 打印出来是一个Proxy对象 当然具备响应式

// 直接后端数据进行赋值
userInfo = [{
    
    name:'优菈'}]
console.log(userInfo)  // [{name:'优菈'}] 可以看出 就是打印出了一个普通的数组 所以不具备响应式

Se o valor for atribuído desta forma, o objeto Proxy será sobrescrito, de modo que o conjunto e o get correspondentes não possam ser acionados e, eventualmente, a capacidade de resposta será perdida;

O código acima reactive([{name:'Eula'}]) cria um array responsivo e retorna um objeto encapsulado em proxy userInfopara ser armazenado por uma variável, mas depois atribuo a ele um array comum (ou seja, os dados retornados pelo backend). userInfoObserve que userInfoesta variável já foi armazenado É um array comum e, claro, não responde;

Portanto : para reactiveos dados responsivos criados, você deve evitar usar =números diretamente para atribuição; isso substituirá o tipo responsivo;

---

3. Solução

1. Encapsular outra camada de dados, ou seja, definir o nome do atributo e atribuir esse atributo diretamente ao atribuir um valor posteriormente

Encapsular outra camada de dados. Observe que myRenderListeste atributo é um novo atributo usado para armazenar dados de lista, mas é um pouco mais problemático.

<script setup>
import {
    
     reactive, ref } from "vue";
// 定义响应式 
let list1 = reactive({
    
    myRenderList:[]});

// 请求的数据
let newList1 = [
  {
    
     name: "Eula", age: "18", isActive: false },
  {
    
     name: "Umbra", age: "17", isActive: false },
]

// 更改数据
const setList1 = () => {
    
    
  list1.myRenderList = newList1
}
</script>

3. Use arrays splicepara alterar diretamente o array original

Ainda é reactiveusado para definir dados responsivos, mas a forma de alterar os dados mudou.Usar o método nativo do array splice()para alterar o array original não é sobrescrito diretamente, portanto não afetará o estilo responsivo;

spliceQuando há três parâmetros, a matriz pode ser modificada, o primeiro item é o índice inicial, o segundo item é o comprimento e o terceiro item é o elemento recém-inserido, pode haver vários;

O código a seguir consiste em excluir cada item da matriz anterior, inserir novos dados e expandir cada item newList1usando o caractere de extensão;...

 list1.splice(0,list1.length,...newList1)

Claro, push()o método também pode acionar a resposta, mas só pode adicionar dados posteriormente. Existem também métodos pop, shift, unshift e outros (não muito usados)

<script setup>
import {
    
     reactive, ref } from "vue";
// 定义响应式 
let list1 = reactive([]);

// 请求的数据
let newList1 = [
  {
    
     name: "Eula", age: "18", isActive: false },
  {
    
     name: "Umbra", age: "17", isActive: false },
]

// 更改数据
const setList1 = () => {
    
    
  // splice三个参数时 第一项是起始索引  第二项是长度  第三项是新插入的元素,可以有多个
  list1.splice(0,list1.length,...newList1)
}
</script>

3. Use ref para definir dados

Tipos de dados complexos também podem ser refdefinidos, e os dados são responsivos; o princípio é um pouco como o primeiro método, que reembala uma camada de valor; deve ser escrito toda vez que for usado .value;

ref é na verdade uma camada de empacotamento para um valor comum, empacotado em um objeto, e realiza a coleta e atualização de dependências por meio de seu get e set, e seu princípio de implementação é semelhante ao computado;

<script setup>
import {
    
     reactive, ref } from "vue";
// 定义响应式
let list1 = ref([]);

// 请求的数据
let newList1 = [
  {
    
     name: "Eula", age: "18", isActive: false },
  {
    
     name: "Umbra", age: "17", isActive: false },
]

// 更改数据
const setList1 = () => {
    
    
  list1.value = newList1;
}
</script>