vue3中获取ref和r的方法

在Vue 3的开发过程中，掌握获取ref和reactive（文中“r”推测为reactive，以下以reactive阐述）的正确方法至关重要，这能极大提升开发效率与代码质量。

先来看获取ref的方法。Ref是Vue 3响应式系统中的一个重要概念，用于创建一个响应式的引用。在模板中获取ref的值非常简单，直接使用其名称即可。比如我们定义了一个ref：const count = ref(0)，在模板里可以这样访问：<div>{{ count }}</div>。而在JavaScript代码中获取ref的值，需要通过.value属性。例如，当我们想要在某个函数中更新count的值时，代码可以这样写：function increment() { count.value++; }。

另外，如果在组合式函数（setup函数等）外部获取ref，我们可以通过定义一个全局的ref变量，然后在需要的地方引入。比如在一个名为globalRef.js的文件中定义export const globalCount = ref(0)，在其他组件中引入使用：import { globalCount } from './globalRef.js'; console.log(globalCount.value);。

再说说获取reactive的方法。Reactive用于创建一个响应式的对象或数组。在模板中访问reactive对象的属性和普通对象一样。例如定义const state = reactive({ name: '张三', age: 25 });，在模板里可以这样展示：<div>{{ state.name }} - {{ state.age }}</div>。在JavaScript代码中获取reactive对象的属性，直接通过对象名和属性名访问，如console.log(state.name)。

需要注意的是，reactive对象是通过Proxy代理实现的响应式，不能使用ES6解构的方式获取属性，否则会失去响应式。正确做法是使用计算属性或者通过toRefs函数将reactive对象转换为包含多个ref的对象。例如const { name, age } = toRefs(state);，这样解构出来的name和age就保持了响应式。

Vue 3中获取ref和reactive的方法各有特点，开发者需要根据实际场景合理运用，熟练掌握这些方法，能更好地驾驭Vue 3项目的开发，为用户带来更优质的应用体验。