De Vue2 a Vue3 [3] - API de composição (Capítulo 3)

Diretório de artigos da série

contente	Link
De Vue2 para Vue3 [zero]	Introdução ao Vue3
De Vue2 para Vue3 [1]	API de composição (Capítulo 1)
De Vue2 para Vue3 [2]	API de composição (capítulo 2)
De Vue2 para Vue3 [3]	API de composição (capítulo 3)
De Vue2 para Vue3 [4]	API de composição (capítulo 4)

---

---

prefácio

Com o lançamento do Vue 3, introduzimos uma API de composição poderosa e empolgante, que traz mais flexibilidade e facilidade de manutenção para os desenvolvedores . A API de composição do Vue 3 não apenas mudou a maneira como escrevemos os componentes do Vue, mas também introduziu alguns novos componentes e algumas mudanças pequenas, mas práticas . Neste artigo, vamos nos aprofundar na API de composição do Vue 3 e apresentar alguns novos componentes e mudanças impressionantes . Vamos começar esta emocionante jornada de aprendizado juntos!

1. rasoReativo e rasoRef

• rasoReativo:

  • A função sandyReactive é usada para criar um objeto responsivo raso , que executará apenas o processamento responsivo nas propriedades de primeiro nível do objeto e não executará recursivamente o processamento responsivo de nível profundo nas propriedades aninhadas.
  • Isso pode melhorar o desempenho e reduzir o consumo de memória em alguns casos , especialmente quando os níveis de aninhamento de objetos são profundos ou os objetos são muito grandes .
  • Cenários aplicáveis : quando você precisa executar o processamento responsivo em um objeto grande, mas se preocupa apenas com as alterações nas propriedades de primeiro nível do objeto , pode usar o sandyReactive para evitar o processamento responsivo profundo .

import {
    
    shallowReactive} from 'vue'
export default {
    
    
	name: 'App',
	setup(){
    
    
		let data = ({
    
    
		name: 'John',
		age: 25,
		address: {
    
    
			street: 'Main St',
			city: 'New York'
			}
		})
		let data1 = shallowReactive(data)
		return {
    
    
				data1
		}
	}
}

Como a função rasoReativo cria um objeto responsivo raso , data1.nameele acionará uma resposta quando for alterado, mas não acionará uma resposta quando
for modificado.data1.address.street（shallowReactive：只处理对象最外层属性的响应式）

• superficialRef:

  • A função sandyRef é usada para criar uma referência responsiva rasa , que responde apenas ao primeiro nível do valor e não executa recursivamente processamento responsivo profundo em valores aninhados ===》只处理基本数据类型的响应式, 不进行对象的响应式处理
  • Semelhante ao rasoReativo, isso pode melhorar o desempenho e reduzir o consumo de memória em alguns casos .
  • Cenário aplicável: quando você precisa executar o processamento responsivo em um valor, mas se preocupa apenas com a alteração de primeiro nível do valor , pode usar o sandyRef para evitar o processamento responsivo de nível profundo.

<template>
	{
   
   {name1}} 
	<button @click="name1 = '前端百草阁'">点我修改name</button>
	<br>
	{
   
   { data1.address.street }}
	<button @click="data1.address.street = '前端百草阁'">点我修改stree</button>
</template>

<script>
import {
      
      shallowRef} from 'vue'
export default {
      
      
	name: 'App',
	setup(){
      
      
		let name = 'John'
		let data = ({
      
      
		age: 25,
		address: {
      
      
			street: 'Main St',
			city: 'New York'
			}
		})
		let data1 = shallowRef(data)
		let name1 = shallowRef(name)

		console.log(data1.value,name1.value);  // 在setup中操作数据时 要加.value
		return {
      
      
			data1,
			name1
		}
	}
}
</script>

Aqui, amigos, prestem atenção a um ponto. Seja operando dados ou usando dados, é o mesmo que ref e reativo. Quando ref opera dados, ele deve adicionar .value para obter o valor correspondente.

通过使用shallowReactive和shallowRef，可以根据具体的需求选择性地进行响应式处理，避免不必要的性能开销。在处理大型对象或嵌套层次较深的数据时，这些函数可以提供更好的性能和内存利用率。

Dois, readonly e rasoReadonly

• somente leitura
  • Torne os dados reativos somente leitura ( deep read-only )
  • Defina o objeto inteiro e suas propriedades aninhadas como somente leitura para proteger determinados dados contra modificações .

<script>
import {
      
       ref, reactive, toRefs,readonly } from "vue";
export default {
      
      
  name: "deMO",
  setup() {
      
      
    //数据
    let sum = ref(0);
    let person = reactive({
      
      
      name: "张三",
      age: 18,
      job: {
      
      
        j1: {
      
      
          salary: 20,
        },
      },
    });

    person = readonly(person);
    sum = readonly(sum)

    return {
      
      
      sum,
      ...toRefs(person),
    };
  },
};
</script>

由于这里使用的是readonly深只读，所以sum以及person的每一个属性都无法被修改

• rasoReadonly
  • Torne os dados reativos somente leitura ( somente leitura superficial )
  • Defina a propriedade de primeiro nível dos dados do objeto como somente leitura

<script>
import {
      
       ref, reactive, toRefs,shallowReadonly } from "vue";
export default {
      
      
  name: "deMO",
  setup() {
      
      
    //数据
    let sum = ref(0);
    let person = reactive({
      
      
      name: "张三",
      age: 18,
      job: {
      
      
        j1: {
      
      
          salary: 20,
        },
      },
    });
    
    person = shallowReadonly(person)
    sum = shallowReadonly(sum)
    
    return {
      
      
      sum,
      ...toRefs(person),
    };
  },
};
</script>

由于person设置了浅只读，所以person中的name属性值不能改变，但是person中的j1里的属性是可以修改的

• Se houver um objeto de dados, a estrutura é relativamente profunda, mas apenas o atributo externo muda ===> rasoReativo.
• Se houver um dado de objeto, as funções subseqüentes não modificarão as propriedades desse objeto ===> sandyRef.

通过使用readonly和shallowReadonly，我们可以根据具体的需求选择性地进行保护数据的可写性，从而提高代码的可靠性和安全性。

Observe aqui se é somente leitura profunda ou somente leitura superficial 都不会影响到原先的响应式数据, portanto, é melhor usar os dados somente leitura retornados pelo método para sobrescrever os dados responsivos anteriores, que são mais seguros.
O que isso significa? Após a operação somente leitura, os dados responsivos originais não serão alterados e, quando você modificar os dados responsivos novamente, os dados somente leitura serão alterados de acordo

Por exemplo, preste atenção

  setup() {
    
    
    let car = reactive({
    
     name: "奔驰", price: "40W" });
    let car1 = readonly(car)
    car.name = '宝马'
    // car1.name = '劳斯莱斯'   car1的值为只读不能修改 
    console.log(car1,car);
    
    return {
    
     };
  },
};

Aqui car1 são os dados somente leitura de car. Quando o valor de car muda, o valor de car1 também muda correspondentemente, mas o valor de car1 não pode ser modificado diretamente. A modificação direta do valor de car1 não funcionará e um erro será relatado

.

3. toRaw e markRaw

• função toRaw:

  • Função: converter um objeto responsivo reactivegerado pelo
  • Cenário de uso: É usado para ler o objeto comum correspondente ao objeto responsivo.Todas as operações neste objeto comum não causarão atualizações de página .

<script>
	import {
    
    ref,reactive,toRaw} from 'vue'
	export default {
    
    
		name: 'Demo',
		setup(){
    
    
			//数据
			let person1 = ref({
    
    
				name:'张三',
				age:18,
				job:{
    
    
					j1:{
    
    
						salary:20
					}
				}
			})
			let person = reactive({
    
    
				name:'张三',
				age:18,
				job:{
    
    
					j1:{
    
    
						salary:20
					}
				}
			})

				const p = toRaw(person) // person是reactive生成的响应式对象
				p.age++      // 普通对象的值可以改变 但是不再引起页面更新
				console.log(p)  // 转换完后的p就是一个普通对象

				const p1 = toRaw(person1.value) 
				p1.age++      
				console.log(p)  // 转换完后的p就是一个普通对象
			
			return {
    
    
				sum,
				person
			}
		}
	}
</script>

Aqui, preste atenção porque o autor escreve duas pessoas. Isso não significa que a função de toRaw é converter um objeto responsivo gerado por reativo em um objeto normal?
Por que existe um objeto responsivo gerado por ref aqui?

Isso tem que olhar para a essência através do problema. ref define um objeto reativo internamente para help , então person1.value é na verdade um objeto Proxy , então ao convertê-lo em um objeto normal, você precisatoRaw(person1.value)

Preste atenção em outra pergunta. Você tem alguma pergunta? Eu converti a pessoa em um objeto comum e usei um p para receber o objeto convertido. A própria pessoa muda?

O conhecimento real só pode ser obtido por meio da experimentação. Todo mundo está progredindo continuamente por causa da curiosidade . Depois de experimentar, descobri que 响应式对象转换为普通对象时，并不会影响先前的响应式对象，换句话说就是person依然是响应式对象，修改它，页面依旧会发生变化
ainda há um ponto

  setup() {
    
    
    let car = reactive({
    
     name: "奔驰", price: "40W" });
    let car2 = toRaw(car)
    // car.name = '宝马'
    car2.name = '劳斯莱斯' 
    console.log(car,car2);
    }

Modificar o carro mudará o valor do carro, modificar o valor do carro2 também mudará o valor do carro

• markRaw:
  • Função: Marque um objeto para torná-lo 永远不会再成为响应式对象.
  • Cenário de aplicação:
    1. Alguns valores não devem ser definidos como responsivos, como bibliotecas complexas de terceiros, etc.
    2. Ignorar transformações reativas pode melhorar o desempenho ao renderizar grandes listas com fontes de dados imutáveis.

    Rastreamento e atualização reativo é uma operação relativamente cara. Definir uma biblioteca de classes complexa de terceiros ou um objeto grande como responsivo fará com que seja necessário percorrer profundamente o objeto e acionar a atualização toda vez que ele for atualizado, o que terá um certo impacto no desempenho. Se esses valores não precisam ser exibidos na exibição ou participar de cálculos responsivos, defini-los como não responsivos pode melhorar o desempenho.

<script>
<script>
import {
    
     ref, reactive, toRefs, markRaw } from "vue";
export default {
    
    
  name: "deMo",
  setup() {
    
    
    let person = reactive({
    
    
      name: "张三",
      age: 18,
      job: {
    
    
        j1: {
    
    
          salary: 20,
        },
      },
    });

      let car = {
    
     name: "奔驰", price: 40 };
      person.car = markRaw(car);  // 将一个标记过的对象添加到person的属性中

      person.car.price++;  // 数据会变化  但是页面不再更新（没有响应式）
      console.log(person.car.price);

    return {
    
    
      person,
      ...toRefs(person), // 普通对象被标记过后 再也无法变成响应式的
    };
  },
};
</script>

Observe aqui que se a pessoa já for um objeto responsivo, adicione um atributo comum a ela no tempo, e esse atributo também possui um responsivo

      let car = {
    
     name: "奔驰", price: 40 };
      person.car = car;  // 将一个普通对象添加到person的属性中

      person.car.price++;  // 数据会变化  页面会更新（有响应式）
      console.log(person.car.price);

通过使用toRaw和markRaw，我们可以有更灵活的控制对象的响应式特性。toRaw使我们能够获取响应式对象的非响应式原始值。markRaw则可以将对象标记为非响应式，避免不必要的响应式追踪和更新。这些工具在一些特定场景下提供了更好的性能和控制的选择。

Resumir

Este artigo explica o uso e as precauções de rasoReactive e rasoRef , readonly e rasoReadonly , toRaw e markRaw na API combinada vue3.