使用 ref 的语法如下所示：
import { ref } from 'vue';const count = ref(0);
在上面的代码中，我们创建了一个名为 count 的变量，它的初始值为 0。通过调用 ref 函数，我们将 count 变量转化为了一个 ref 对象。在组件中使用 count 的时候，我们需要通过 .value 来访问它的值,且ref.value = 可以修改它的值。但是当 ref 在模板中作为顶层属性被访问时，它们会被自动“解包”，所以不需要使用 .value。：
<template> <div>{{ count }}</div></template>------------------<script setup>import { ref } from 'vue';const count = ref(0);console.log(count)//refimpl {...}console.log(count.value)//0//使用.value改变countcount.value = 3;console.log(count.value)//3</script>
注意：在标签中使用无需加.value，在函数中使用必须要加.value
除此之外，ref 还可以用来监听 dom 元素的变化：
<template> <div ref="mydiv">这是一个 dom 元素</div></template><script> import { ref, onmounted } from 'vue'; export default { setup() { const mydiv = ref(null); onmounted(() => { console.log(mydiv.value.innerhtml); }); return { mydiv, }; }, };</script>
在上面的代码中，我们创建了一个名为 mydiv 的 ref 对象，并将它赋值给了一个 div 元素。在组件的 setup 函数中，我们使用了 onmounted 钩子函数，在组件渲染完成之后，打印出了 mydiv 元素的 innerhtml。
二、reactivereactive 是 vue3 中的另一个 api，它可以将一个普通的对象转化为一个响应式对象。与 ref 不同的是，reactive 返回的是一个响应式的对象，而不是一个包含值的对象。我们可以通过访问响应式对象的属性来获取或修改它的值。
使用 reactive 的语法如下所示：
import { reactive } from 'vue';const state = reactive({ count: 0,});
在上面的代码中，我们创建了一个名为 state 的响应式对象，它包含了一个名为 count 的属性，初始值为 0。
在组件中使用 state 的时候，我们可以像访问普通对象的属性一样访问它的属性：
<template> <div>{{ state.count }}</div></template>
除了访问属性之外，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);// 模板中使用<template> <div>{{ b.c }}</div></template>
总之，reactive 除了访问属性之外还能处理整个对象或数组的响应式追踪，以及支持在嵌套对象中使用 torefs 方便在模板中使用。
三、ref和reactive的使用对比1.ref的使用方法ref创建的变量可以通过.value来获取和修改其值。例如：
import { ref } from 'vue'// 创建refconst count = ref(0)// 获取ref的值console.log(count.value) // 输出 0// 修改ref的值count.value = 1console.log(count.value) // 输出 1
2. reactive的使用方法reactive创建的对象需要通过解构赋值的方式获取和修改其属性值。例如：
import { reactive } from 'vue'// 创建reactive对象const obj = reactive({ count: 0})// 获取reactive对象的属性值console.log(obj.count) // 输出 0// 修改reactive对象的属性值obj.count = 1console.log(obj.count) // 输出 1
以上就是vue3中的ref与reactive怎么使用的详细内容。