vue中ref与reactive区别与用法

前言

在vue中ref和reactive是用于响应式数据的两种不同方式，ref和reactive是Vue.js框架中的两种关键概念。这两个概念都是用于实现响应式数据绑定的。

ref：

在Vue中，ref是一个用于在模板或实例中获取DOM元素或组件实例的特殊属性。ref属性可以被添加到任何Vue组件或HTML元素上，并且可以在组件或实例中使用$refs属性来访问它。

在Vue中，ref是一个用于在模板或实例中获取DOM元素或组件实例的特殊属性。ref属性可以被添加到任何Vue组件或HTML元素上，并且可以在组件或实例中使用$refs属性来访问它。

以下是一些ref的使用场景：

1. 获取元素的值或属性：可以使用ref来获取表单元素的值或属性，例如获取input中的value。
   
2. 调用子组件的方法：可以使用ref来获取子组件实例，并且可以调用子组件中的方法。
   
3. 动态创建或删除子组件：可以使用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开发者感到不适应。

区别：

1. ref是用于处理基本数据类型的，例如数字、字符串等。而reactive可以处理任何类型的数据，包括对象、数组等。
   
2. ref返回的是一个代理对象，使用时需要访问它的value属性，例如：refData.value。而reactive返回的是一个响应式对象，可以直接访问它的属性。
   
3. ref提供了一些特殊的方法，例如.value属性、.get()方法、.set()方法等。而reactive提供了一些额外的方法，例如.toRaw()方法、.markRaw()方法等。
   
4. ref通常用于处理单一的数据，而reactive常用于处理复杂的数据结构，例如对象和数组。  
   

总结：

      ref适用于处理简单的数据类型，而reactive适用于处理复杂的数据结构。无论是处理简单类型的数据还是复杂类型的数据，Vue 3提供了适用的工具来满足不同的需求。