尤雨溪说：为什么Vue3 中应该使用 Ref 而不是 Reactive？

Hello，大家好，我是 winty。

每次有同学学习到 vue3 的时候，总会问我：“ ref 和 reactive 我们应该用哪个呢？” 我告诉他：“我们应该使用 ref ，而不是 reactive ”。那么此时同学就会有疑惑：“为什么呢？ ref 还需要 .value 处理， reactive 看起来会更加简单呢？”

嗯....每当这个时候，我都需要进行一次长篇大论来解释这个问题。不过以后应该不需要了，因为这篇文章将会把这个事情解释的非常清楚......

为什么推荐使用ref而不是reactive

reactive 在使用过程中存在一些局限性，如果不额外注意这些问题，可能会给开发带来一些不便。与此不同， ref 更像是Vue2时代的 option API 中的 data 的替代品，可以存放任何数据类型，而 reactive 声明的数据类型则仅限于对象。

总体来说，非必要的情况下最好避免使用 reactive 。官方文档也强烈推荐使用 ref() 作为声明响应式状态的主要API。以下是详细原因：

1. 局限性问题： reactive 本身存在一些局限性，可能会在开发过程中引发一些问题。这需要额外的注意力和处理，否则可能对开发造成麻烦。
2. 数据类型限制： reactive 声明的数据类型仅限于对象，而 ref 则更加灵活，可以容纳任何数据类型。这使得 ref 更适合一般的响应式状态的声明。
3. 官方推荐： 官方文档强烈建议使用 ref() 作为声明响应式状态的首选。这是因为 ref 更简单、更直观，同时避免了 reactive 可能引发的一些问题。

总的来说：除非有特定的需求需要使用 reactive ，否则在大多数情况下更推荐使用 ref() 。

最懂Vue的人都这么说了:推荐ref!!!!!!

reactive 和 ref 对比

即：

• ref 用于将基本类型的数据和引用数据类型（对象）转换为响应式数据，通过 .value 访问和修改。
• reactive 用于将对象转换为响应式数据，可以直接访问和修改属性，适用于复杂的嵌套对象和数组。

01: reactive 有限的值类型

reactive 只能声明引用数据类型（对象）

let obj = reactive({
  name: '小明',
  age: 18

// 对象
const state = ref({})
// 数组
const state2 = ref([])

let state = reactive({ count: 0 })
// 这个赋值将导致 state 失去响应
state = { count: 1 }

<template>
  {{ state }}
</template>    
<script setup>
const state = reactive({ count: 0 })
// 在 nextTick 异步方法中修改 state 的值
nextTick(() => {
  // 并不会触发修改 DOM ，说明失去响应了
  state = reactive({ count: 11 });
</script>

let state = reactive({ count: 0 })
// state = { count: 1 }
state.count = 1

let state = reactive({ count: 0 })
// state = { count: 1 }，state 不会失去响应
state = Object.assign(state, { count: 1 })

let state = ref({ count: 0 })
state.value = { count: 1 }

let state = reactive({ count: 0 })
// 赋值给 n，n 和 state.count 不再共享响应性连接
let n = state.count
// 不影响原始的 state
console.log(state.count) // 0

let state = reactive({ count: 0 })
// 普通解构，count 和 state.count 失去了响应性连接
let { count } = state
count++ // state.count 值依旧是 0

const state = reactive({ count: 0 })
// 使用 toRefs 解构，后的属性为 ref 的响应式变量
let { count } = toRefs(state)
count.value++ // state.count 值改变为 1

<template>
  {{ state.a }}
  {{ state.b }}
  {{ state.c }}
</template>
<script>
let state = reactive({ a: 1, b: 2, c: 3 })
onMounted(() => {
  // 通过 AJAX 请求获取的数据，回显到 reactive，如果处理不好将导致变量失去响应
  // 回显失败，给响应式数据赋值一个普通对象
  state = { a: 11, b: 22, c: 333 }
  // 回显成功，一个个属性赋值
  state.a = 11
  state.b = 22
  state.c = 33
</script>

<template>
  {{ state.a }}
  {{ state.b }}
  {{ state.c }}
</template>
<script>
let state = ref({ a: 1, b: 2, c: 3 })
onMounted(() => {
  // 回显成功
  state.value = { a: 11, b: 22, c: 333 }