Vue3中Ref函数和Reactive函数的响应式原理揭秘

2023-10-12 07:46:41

Vue3中的Ref函数和Reactive函数是两个强大的工具，可用于管理和更新组件中的数据。它们使您可以轻松地创建响应式数据，以便当数据更改时，UI可以自动更新。

1. Ref函数

Ref函数的作用是定义一个响应式的数据。它返回一个包含响应式数据的引用对象（ref），该对象具有.value属性，可用于访问和更新响应式数据。

const count = ref(0);

// 访问响应式数据
console.log(count.value); // 0

// 更新响应式数据
count.value = 1;

// 响应式数据发生变化，UI自动更新
console.log(count.value); // 1

2. Reactive函数

Reactive函数的作用是将一个普通的JavaScript对象转换为响应式对象。它返回一个代理对象，该对象可以像普通对象一样使用，但当对象中的属性发生更改时，UI会自动更新。

const person = reactive({
  name: 'John Doe',
  age: 30
});

// 访问响应式数据
console.log(person.name); // John Doe

// 更新响应式数据
person.name = 'Jane Doe';

// 响应式数据发生变化，UI自动更新
console.log(person.name); // Jane Doe