ref是 Vue3 中的一个函数，它可以将一个普通的变量转化为一个响应式变量。使用ref的时候，我们需要传入一个初始值，ref会返回一个包含了这个初始值的对象。
使用ref的语法如下所示：
import { ref } from 'vue'; const count = ref(0);
在上面的代码中，我们创建了一个名为count的变量，它的初始值为 0。通过调用ref函数，我们将count变量转化为了一个ref对象。在组件中使用count的时候，我们需要通过.value来访问它的值,且ref.value =可以修改它的值。但是当ref在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用.value。：
{{ count }}
------------------
注意：在标签中使用无需加.value，在函数中使用必须要加.value
除此之外，ref还可以用来监听 DOM 元素的变化：
这是一个 DOM 元素
在上面的代码中，我们创建了一个名为myDiv的ref对象，并将它赋值给了一个div元素。在组件的setup函数中，我们使用了onMounted钩子函数，在组件渲染完成之后，打印出了myDiv元素的innerHTML。
reactive是 Vue3 中的另一个 API，它可以将一个普通的对象转化为一个响应式对象。与ref不同的是，reactive返回的是一个响应式的对象，而不是一个包含值的对象。我们可以通过访问响应式对象的属性来获取或修改它的值。
使用 reactive 的语法如下所示：
import { reactive } from 'vue'; const state = reactive({ count: 0, });
在上面的代码中，我们创建了一个名为state的响应式对象，它包含了一个名为count的属性，初始值为 0。
在组件中使用state的时候，我们可以像访问普通对象的属性一样访问它的属性：
{{ state.count }}
除了访问属性之外，reactive也可以对普通 JavaScript 对象或数组进行响应式处理，可以通过reactive将一个普通对象转化为响应式对象，从而实现对整个对象的响应式追踪，例如：
const obj = { a: 1, b: 2 }; const reactiveObj = reactive(obj); // 响应式追踪 reactiveObj.a = 3; console.log(obj.a); // 输出 3
reactive 还可以在嵌套对象和数组中创建响应式对象，例如：
const obj = { a: 1, b: { c: 2 }， d: [1, 2, 3] }; const reactiveObj = reactive(obj); // 响应式追踪 reactiveObj.b.c = 3; reactiveObj.d.push(4);
reactive 还支持在嵌套对象中使用 toRefs 将响应式对象的属性转换为响应式引用，方便在模板中使用。例如：
const obj = reactive({ a: 1, b: { c: 2 } }); const { b } = toRefs(obj); // 模板中使用 {{ b.c }}
总之，reactive除了访问属性之外还能处理整个对象或数组的响应式追踪，以及支持在嵌套对象中使用toRefs方便在模板中使用。
ref创建的变量可以通过.value来获取和修改其值。例如：
import { ref } from 'vue' // 创建ref const count = ref(0) // 获取ref的值 console.log(count.value) // 输出 0 // 修改ref的值 count.value = 1 console.log(count.value) // 输出 1
reactive创建的对象需要通过解构赋值的方式获取和修改其属性值。例如：
import { reactive } from 'vue' // 创建reactive对象 const obj = reactive({ count: 0 }) // 获取reactive对象的属性值 console.log(obj.count) // 输出 0 // 修改reactive对象的属性值 obj.count = 1 console.log(obj.count) // 输出 1
Atas ialah kandungan terperinci vue3中的ref与reactive怎么使用. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!