前言
在vue中ref和reactive是用于响应式数据的两种不同方式，ref和reactive是Vue.js框架中的两种关键概念。这两个概念都是用于实现响应式数据绑定的。
ref：
在Vue中，ref是一个用于在模板或实例中获取DOM元素或组件实例的特殊属性。ref属性可以被添加到任何Vue组件或HTML元素上，并且可以在组件或实例中使用$refs属性来访问它。
在Vue中，ref是一个用于在模板或实例中获取DOM元素或组件实例的特殊属性。ref属性可以被添加到任何Vue组件或HTML元素上，并且可以在组件或实例中使用$refs属性来访问它。
以下是一些ref的使用场景：
- 获取元素的值或属性：可以使用ref来获取表单元素的值或属性，例如获取input中的value。
- 调用子组件的方法：可以使用ref来获取子组件实例，并且可以调用子组件中的方法。
- 动态创建或删除子组件：可以使用ref来动态创建或删除子组件，并且可以在父组件中访问子组件实例。
下面是一个使用ref的例子：
在模板中：
<template> <div> <input type="text" ref="input"> <button @click="getValue">获取值</button> <custom-component ref="custom"></custom-component> </div> </template>
在脚本中：
<script> export default { methods: { getValue() { const value = this.$refs.input.value; console.log(value); }, callChildMethod() { this.$refs.custom.someMethod(); }, createComponent() { const component = new CustomComponent(); this.$refs.custom.appendChild(component.$el); }, deleteComponent() { this.$refs.custom.removeChild(component.$el); } } } </script>
在上面的例子中，我们可以使用ref属性来获取组件或元素并对其进行操作。可以通过使用$refs属性来访问它们。
reactive:
在Vue中，reactive是用于创建响应式数据的函数。它接收一个普通对象作为参数，并返回一个被代理的响应式对象。
当响应式对象中的属性被修改时，Vue会自动检测到这些变化并更新相关的视图。这种响应式的能力使得Vue的数据驱动视图更新非常方便。
例如：
import { reactive } from 'vue'; const state = reactive({ count: 0 }); state.count++; // 视图会自动更新
在React中也有类似的功能，使用的是useState或useReducer等Hook函数。但是需要注意的是，Vue对响应式的实现和React的实现有所不同，可能会导致一些React开发者感到不适应。
区别：
- ref是用于处理基本数据类型的，例如数字、字符串等。而reactive可以处理任何类型的数据，包括对象、数组等。
- ref返回的是一个代理对象，使用时需要访问它的value属性，例如：refData.value。而reactive返回的是一个响应式对象，可以直接访问它的属性。
- ref提供了一些特殊的方法，例如.value属性、.get()方法、.set()方法等。而reactive提供了一些额外的方法，例如.toRaw()方法、.markRaw()方法等。
- ref通常用于处理单一的数据，而reactive常用于处理复杂的数据结构，例如对象和数组。
总结：
ref适用于处理简单的数据类型，而reactive适用于处理复杂的数据结构。无论是处理简单类型的数据还是复杂类型的数据，Vue 3提供了适用的工具来满足不同的需求。
