大家应该知道如果用 Vue3 的 Composition API 定义一个响应式变量通常有两种形式，一种是用ref，另一种是reactive：

<script setup>
import { ref, reactive } from 'vue'

const isLoading = ref(true)

const user = reactive({
  name: '令狐冲',
  age: 22,
  gender: '男'
})
</script>
复制代码

一般来说定义一个基本数据类型会用ref，而引用类型则会采用reactive，那么问题来了，ref虽然定义了一个基本数据类型，但实际上它却是一个引用类型，取值和赋值时必须要带上.value属性：

<script setup>
import { ref } from 'vue'

const isLoading = ref(true)

if (isLoading.value) {
  isLoading.value = false
}
</script>
复制代码

这就有点不太符合直觉了，很有可能一不小心就被写成了这样：

<script setup>
import { ref } from 'vue'

let isLoading = ref(true)

if (isLoading) {
  isLoading = false
}
</script>
复制代码

这要是有TS和ESLint的加持还好，要是没有的话可就不好找错误了，也不会产生什么有用的报错信息，而且每次都要带上这个.value实在是不好看，而且写起来也麻烦呀！

reactive的弊端是不能解构，解构就会失去响应性：

<script setup>
import { reactive } from 'vue'

const user = reactive({
  name: '令狐冲',
  age: 22,
  gender: '男'
})

// 这种写法通常达不到预期的效果
let { age } = user
age = 18
</script>
复制代码

可能有人会说，不是有toRefs吗？用了toRefs，就又会回到那个.value的问题上了：

<script setup>
import { reactive, toRefs } from 'vue'

const user = reactive({
  name: '令狐冲',
  age: 22,
  gender: '男'
})

let { age } = toRefs(user)
age.value = 18
</script>
复制代码

其实我个人觉得还好啦，因为已经写习惯了，再加上一直用TS有提示和自动补全，所以感觉没什么问题。