Analysis on the use and difference of ref and reactive in Vue3

Vue3 Reactive API - ref

ref 是Vue3中最常用一个响应式 API，可以用来定义所有类型的数据
Note: This article is written in TypeScript. If you haven’t understood it, you need to understand TypeScript first. TypeScript
document reading

type declaration

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

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

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

Variable definitions

/*
*基本类型
*/
字符串
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'
  }
]);

Variable reading and assignment

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

• Reading the value of any ref object must pass xxx.value
• Ordinary variables use let to modify the value. The ref object is a reference type, which can be modified directly through .value when const is defined.
• When modifying data, you can use forEach, map, filter and other traversal functions to operate your ref array, or reset it directly

// 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 - reactive

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

Type declarations and definitions

reactive object:

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

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

reactive 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'
  }
]);

Variable reading and assignment

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

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

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

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

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

For reactive arrays, there are some differences from ordinary arrays:

• In vue3, if you use reactive to define an array, you must only use those operations that will not change the reference address
• Do not destructure the object defined by reactive, the variable obtained after deconstruction will lose responsiveness.

Unresponsive:

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

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

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

Correct way:

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

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

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

Application Scenario

ref

• Used when the numeric type is a JS primitive type (eg: string, number)
• When an object is assigned and needs to be reassigned later (such as an array)

reactive

• Used when the value type is an object and does not need to be reassigned, ref() also calls reactive() internally

References: link address