什么时候用ref，什么时候用reactive？

ref

官方文档及尤雨溪提到过 ，ref 一把梭，不建议用 reactive。我说的话不可信，尤雨溪的话百分百可信，用，用，用ref一把梭。

// 什么都能装！
const name = ref('张三')        // ✅ 字符串
const age = ref(18)            // ✅ 数字  
const isLoading = ref(false)   // ✅ 布尔值
const user = ref({name: '李四'}) // ✅ 对象
const list = ref([])           // ✅ 数组

// 用的时候要加 .value
name.value = '王五'
age.value = 20

reactive- 你的"对象专用盒"

// 只能装对象！
const user = reactive({        // ✅ 对象
  name: '张三',
  age: 18
})

const form = reactive({        // ✅ 对象  
  username: '',
  password: ''
})

const list = reactive([])      // ✅ 数组（其实也是对象）

// 用的时候直接点属性
user.name = '李四'
form.username = 'admin'

关键区别：重新赋值问题

场景：从后台请求数据

reactive的错误用法：

// 初始化
let list = reactive(['苹果', '香蕉'])

// 模拟请求数据
setTimeout(() => {
  const newData = ['西瓜', '葡萄', '芒果']
  
  // ❌ 错误！这样会丢失响应式！
  list = newData
  
  // 页面不会更新！因为 list 的"监听器"断了
}, 1000)

ref的正确用法：

// 初始化
const list = ref(['苹果', '香蕉'])

// 模拟请求数据  
setTimeout(() => {
  const newData = ['西瓜', '葡萄', '芒果']
  
  // ✅ 正确！通过 .value 重新赋值
  list.value = newData
  
  // 页面正常更新！
}, 1000)

reactive的正确用法（如果非要用）：

const state = reactive({
  list: ['苹果', '香蕉']
})

setTimeout(() => {
  const newData = ['西瓜', '葡萄', '芒果']
  
  // ✅ 正确！只改属性，不改对象本身
  state.list = newData
}, 1000)

实战选择指南

情况1：基础数据 → 必须用ref

// ✅ 用 ref
const count = ref(0)
const name = ref('')
const isVisible = ref(true)

// ❌ reactive 会报错！
// const count = reactive(0) // 报错！

情况2：需要重新赋值 → 必须用ref

// 从API获取数据
const data = ref(null)
const fetchData = async () => {
  const result = await api.getData()
  data.value = result // ✅ 可以重新赋值
}

// 切换页面数据
const currentPageData = ref([])
const changePage = (page) => {
  currentPageData.value = getDataByPage(page) // ✅ 可以重新赋值
}

情况3：固定对象，只改属性 → 可以用reactive

// 表单数据 - 通常不会整个替换
const form = reactive({
  username: '',
  password: '',
  remember: false
})

// 用户信息 - 通常不会整个替换
const userInfo = reactive({
  name: '张三',
  age: 25,
  avatar: ''
})

情况4：不确定用哪个 → 无脑用ref

// 安全第一！
const something = ref(初始值)

黄金法则

1. 处理数字、字符串、布尔值？ → 用ref
2. 需要xxx = 新数据这样赋值？ → 用ref
3. 只是一个固定对象，只改里面的属性？ → 可以考虑reactive
4. 不确定？ → 直接用ref

记住：ref永远不会错，reactive有时候会坑你！

官方文档及尤雨溪提到过 ，ref 一把梭，不建议用 reactive。我说的话不可信，尤雨溪的话百分百可信，用，用，用ref一把梭。

相关资料