vue3中的ref和reactive定义数据的方式有那些区别

在Vue 3中，ref和reactive是用来定义响应式数据的两种不同方式。

1. ref:
   • ref是一个函数，它接收一个初始值作为参数，并返回一个包含一个.value属性的响应式对象。
   • ref适用于定义简单的基本类型数据，如数字、字符串等。
   • 获取ref定义的数据时，需要通过.value属性来访问。

import { ref } from 'vue';

const count = ref(0);
console.log(count.value); // 输出: 0
count.value++; // 修改值
console.log(count.value); // 输出: 1

1. reactive:
   • reactive是一个函数，它接收一个普通对象作为参数，并返回一个代理对象。
   • reactive适用于定义复杂的对象或数组。
   • 获取reactive定义的数据时，可以直接访问对象的属性。

 

import { reactive } from 'vue';

const state = reactive({ count: 0 });
console.log(state.count); // 输出: 0
state.count++; // 修改值
console.log(state.count); // 输出: 1

• ref是用来定义简单基本类型数据的响应式对象，需要通过.value来访问和修改值。
• reactive是用来定义复杂对象或数组的响应式代理对象，可以直接访问和修改属性。