何时使用`ref()`和何时使用`reactive()

Vue3摒弃了上一代版本的函数式API-Options API ,采用了组合式API- Composition API。Composition API允许用户像编写函数一样自由地组合逻辑和代码。组合式API提供了两个重要的函数ref和reactive。ref主要用于布尔值，数值，字符串等，reactive主要用在对象，但是实际使用中并没有这么简单单，我们该选择合适何时使用ref()，何时使用reactive()？

何时使用ref()和何时使用reactive()？

最基础的，我们最好（必须）使用ref()来创建响应式原始值。

// Boolean ref
const isVisible = ref(true);

// String ref
const name = ref('搞前端的半夏');

reactive()，只用于创建响应式对象类型数据，这和vue2 的data类似，你可以将它看成是vue2中Option API 的data选项的替代品。

const state = reactive({
  isVisible: true,
  name: '搞前端的半夏',
});

但你也可以使用ref()它。在下面的示例中，我们使用ref()来创建一个响应式对象。

const state = ref({
  isVisible: true,
  name: '搞前端的半夏',
});

使用ref()创建对象，在使用过程中主要有两点不同。

1. ref创建的变量必须使用.value

   reactiv()创建的变量则不需要。

   const state = ref({
     isVisible: true,
     name: '搞前端的半夏',
   });
   
   state.value.isVisible = false;
   
   const state = reactive({
     isVisible: true,
     name: '搞前端的半夏',
   });
   state.isVisible = false
   2.
   

2. ref创建的对象，可以整体修改，但是reactive并不支持。

state.value = {
  isVisible: false,
  name: '搞前端的半夏',
};

ref()的缺点

在使用.valuerefs 时不断地使用是一件很糟糕的事情。但至少它非常清楚地表明您正在使用响应式数据。

一种可能的解决方法是使用unref().

因为在使用ref创建的变量，必须使用.value才能获取到具体的值。有一种情况：我们定义了一个函数接收了一个参数，并且在函数中使用，但是如果你传递一个ref定义的变量的话，可能就会出错。因为.value才能获取到具体的值。一个比较简单的办法就是使用unref()函数，来将ref创建的变量转成普通变量。

import { unref } from 'vue';

// `number` might or might not be a ref.
function addOne(number) {
  return unref(number) + 1;
}