【vue3.0中ref与reactive的区别及使用】

在Vue 3.0中，ref和reactive是用于响应式状态管理的两种机制。

ref用于创建响应式的引用对象（reactive reference），可以用来创建响应式的数据，比如一个简单的数据类型如数字、字符串、或者布尔值。

reactive用于创建响应式的数据对象（reactive object），可以是嵌套的对象，当其内部属性发生变化时，视图会自动更新。

ref的使用

import { ref } from 'vue';
 
export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  }
};

在模板中使用count时不需要.value，因为模板会自动解包ref。

reactive的使用

import { reactive } from 'vue';
 
export default {
  setup() {
    const state = reactive({
      count: 0
    });
    function increment() {
      state.count++;
    }
    return { state, increment };
  }
};

在模板中使用state.count时同样不需要.value，因为模板会自动跟踪reactive对象的变化。

ref适用于基本类型数据的响应式处理，而reactive适用于对象类型数据的响应式处理。当你需要使用Vue 3的响应式系统时，可以根据数据的类型选择合适的方法来创建响应式状态。