Vue3中ref和reactive的使用场景详解

import { ref } from 'vue'

// 计数器（数字）
const count = ref(0)
const increment = () => {
  count.value++ // 修改值必须用 .value
}

// 开关状态（布尔值）
const isOpen = ref(false)
const toggle = () => {
  isOpen.value = !isOpen.value
}

<template>
  <input ref="inputRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue'
const inputRef = ref(null)

onMounted(() => {
  inputRef.value.focus() // 访问 DOM 元素
})
</script>

const user = ref({ name: 'Alice', age: 25 })
// 替换整个对象
user.value = { name: 'Bob', age: 30 }

const list = ref(['apple', 'banana'])
// 替换整个数组
list.value = ['orange', 'grape']

import { reactive } from 'vue'

const form = reactive({
  username: '',
  password: '',
  rememberMe: false
})

// 直接修改属性（无需 .value）
form.username = 'John'

const nestedData = reactive({
  user: {
    profile: {
      name: 'Alice',
      address: {
        city: 'Shanghai'
      }
    }
  }
})

// 深层嵌套修改仍保持响应性
nestedData.user.profile.address.city = 'Beijing'

const items = reactive(['a', 'b', 'c'])

// 直接修改元素
items[0] = 'z' // 响应式更新
items.push('d') // 使用数组方法

const count = ref(0)

// ✅ 正确修改
count.value = 10

// ❌ 错误！直接赋值会覆盖 ref 对象
count = 10

const state = reactive({ count: 0 })

// ✅ 正确修改属性
state.count = 10

// ❌ 错误！直接替换对象会失去响应性
state = { count: 20 } 

// ✅ 保持响应性的对象替换方式
Object.assign(state, { count: 20 })

const state = reactive({ x: 1, y: 2 })

// ❌ 解构后失去响应性
const { x, y } = state 

// ✅ 使用 toRefs 保持响应性
const { x, y } = toRefs(state)
x.value = 10 // 现在修改有效

// ✅ 传递整个 reactive 对象
const user = reactive({ name: 'Alice' })
updateUser(user)

function updateUser(userObj) {
  userObj.name = 'Bob' // 修改仍响应
}

// ✅ 传递 ref 对象
const count = ref(0)
increment(count)

function increment(numRef) {
  numRef.value++
}

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

// ref 管理用户ID（基本类型）
const userId = ref(123)

// reactive 管理用户详情（对象）
const userDetail = reactive({
  name: 'Alice',
  permissions: ['read', 'write']
})

// 修改操作示例
const updateUser = () => {
  // 修改 ref
  userId.value = 456
  
  // 修改 reactive 对象
  userDetail.name = 'Bob'
  userDetail.permissions.push('delete')
}

// 替换整个对象的最佳实践
const resetUser = () => {
  // ref 可以直接替换
  userId.value = 0
  
  // reactive 应该合并属性而非直接赋值
  Object.assign(userDetail, {
    name: 'Guest',
    permissions: []
  })
}
</script>