Analyse der Verwendung und des Unterschieds von Ref und Reactive in Vue3

Vue3 Reactive API – ref

ref 是Vue3中最常用一个响应式 API，可以用来定义所有类型的数据
Hinweis: Dieser Artikel ist in TypeScript geschrieben. Wenn Sie ihn nicht verstanden haben, müssen Sie zuerst TypeScript verstehen.
Lesen von TypeScript-Dokumenten

Typdeklaration

在开始使用 API 之前，要先了解一下在 TypeScript 中，ref 需要如何进行类型声明 声明方式：使用 <> 来包裹类型定义，紧跟在 ref API 之后：

//基本数据类型
const name=ref<number>(1)

//引用数据类型
const foods1=ref<Array<string>>(['苹果','香蕉'])

Variablendefinitionen

/*
*基本类型
*/
字符串
const str = ref<string>('前端');

数值
const nums= ref<number>(1);

布尔值
const isbool= ref<boolean>(true);
......
/*
*引用类型
*/
数组
const ids=ref<Array<number>>([1,2,3])

对象数组
1.声明对象的格式
interface Person{
    
    
  id: number,
  name: string
};
 - 定义一个成员组
const Students= ref<Person[]>([
  {
    
    
    id: 1,
    name: 'Tom'
  },
  {
    
    
    id: 2,
    name: 'Jack'
  }
]);

Variables Lesen und Zuordnen

被 ref 包裹的变量会全部变成对象，不管你定义的是什么类型的值，都会转化为一个 ref 对象，其中 ref 对象具有指向内部值的单个 property .value。
Beachten:

• Beim Lesen des Werts eines Referenzobjekts muss xxx.value übergeben werden
• Gewöhnliche Variablen verwenden let, um den Wert zu ändern. Das Ref-Objekt ist ein Referenztyp, der direkt über .value geändert werden kann , wenn const definiert ist.
• Beim Ändern von Daten können Sie forEach-, Map-, Filter- und andere Durchlauffunktionen verwenden, um Ihr Ref-Array zu bedienen oder es direkt zurückzusetzen

// 1.读取一个字符串没有使用ref
const msg: string = 'Hello World!';
console.log('msg的值', msg);

// 2.读取一个字符串使用ref
const str = ref<string>('Hello World!');
console.log('str的值', str.value);

// 3.读取一个数组使用ref
const ids = ref<number[]>([ 1, 2, 3 ]);
console.log('第二个id', ids.value[1]);

// 4.修改数据
const data = ref<string[]>([]);
data.value = api.data.map( (item: any) => item.text );

Vue3 responsive API – reaktiv

reactive 是继 ref 之后最常用的一个响应式 API 了，相对于 ref，它的局限性在于只适合对象、数组

Typdeklarationen und -definitionen

reaktives Objekt:

// 声明对象的格式
interface Member {
    
    
  id: number,
  name: string
};

// 定义一个成员对象
const userInfo: Member = reactive({
    
    
  id: 1,
  name: 'Tom'
});

reaktives Array:

// 普通数组
const uids: number[] = [ 1, 2, 3];

// 对象数组
interface Member {
    
    
  id: number,
  name: string
};

// 定义一个成员对象数组
const userList: Member[] = reactive([
  {
    
    
    id: 1,
    name: 'Tom'
  },
  {
    
    
    id: 2,
    name: 'Petter'
  },
  {
    
    
    id: 3,
    name: 'Andy'
  }
]);

Variables Lesen und Zuordnen

reactive 对象在读取字段的值，或者修改值的时候，与普通对象是一样的

// 声明对象的格式
interface Member {
    
    
  id: number,
  name: string
};

// 定义一个成员对象
const userInfo: Member = reactive({
    
    
  id: 1,
  name: 'Tom'
});

// 读取用户名
console.log(userInfo.name);

// 修改用户名
userInfo.name = 'Petter';

Bei reaktiven Arrays gibt es einige Unterschiede zu gewöhnlichen Arrays:

• Wenn Sie in vue3 reaktiv zum Definieren eines Arrays verwenden, dürfen Sie nur die Vorgänge verwenden, die die Referenzadresse nicht ändern
• Zerstören Sie das durch Reaktivität definierte Objekt nicht. Die nach der Dekonstruktion erhaltene Variable verliert ihre Reaktionsfähigkeit.

Nicht reagierend:

let uids: number[] = reactive([ 1, 2, 3 ]);

// 丢失响应性的步骤
uids = [];

// 异步获取数据后，模板依然是空数组
setTimeout( () => {
    
    
  uids.push(1);
}, 1000);

Der richtige Weg:

let uids: number[] = reactive([ 1, 2, 3 ]);

// 不会破坏响应性
uids.length = 0;

// 异步获取数据后，模板可以正确的展示
setTimeout( () => {
    
    
  uids.push(1);
}, 1000);

Anwendungsszenario

ref

• Wird verwendet, wenn der numerische Typ ein primitiver JS-Typ ist (z. B. Zeichenfolge, Zahl).
• Wenn ein Objekt zugewiesen wird und später neu zugewiesen werden muss (z. B. ein Array)

reaktiv

• Wird verwendet, wenn der Werttyp ein Objekt ist und nicht neu zugewiesen werden muss, ruft ref() auch intern reactive() auf

Referenzen: Linkadresse