Vue3通透教程Vue3中的响应式数据 reactive函数、ref函数

在Vue3中，响应式数据可以通过reactive函数和ref函数来创建。

reactive函数：用于创建响应式对象。




import { reactive } from 'vue';
 
const state = reactive({
  count: 0,
  message: 'Hello Vue3'
});
 
// 使用state
console.log(state.count); // 0
state.count++;
console.log(state.count); // 1

ref函数：用于创建基本类型的响应式数据。




import { ref } from 'vue';
 
const count = ref(0);
 
// 使用count
console.log(count.value); // 0
count.value++;
console.log(count.value); // 1

ref通常用于基本类型的数据，如数字、字符串和布尔值。而reactive用于创建复杂的响应式对象，对象内部的属性也将是响应式的。

注意：ref可以用于响应式对象内部属性的赋值，而reactive则不能用于基本类型数据的赋值。

Vue3通透教程Vue3中的响应式数据 reactive函数、ref函数

评论已关闭

推荐阅读