import { ref } from 'vue'

// 計(jì)數(shù)器（數(shù)字）
const count = ref(0)
const increment = () => {
  count.value++ // 修改值必須用 .value
}

// 開(kāi)關(guān)狀態(tài)（布爾值）
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() // 訪問(wèn) DOM 元素
})
</script>

const user = ref({ name: 'Alice', age: 25 })
// 替換整個(gè)對(duì)象
user.value = { name: 'Bob', age: 30 }

const list = ref(['apple', 'banana'])
// 替換整個(gè)數(shù)組
list.value = ['orange', 'grape']

import { reactive } from 'vue'

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

// 直接修改屬性（無(wú)需 .value）
form.username = 'John'

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

// 深層嵌套修改仍保持響應(yīng)性
nestedData.user.profile.address.city = 'Beijing'

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

// 直接修改元素
items[0] = 'z' // 響應(yīng)式更新
items.push('d') // 使用數(shù)組方法

const count = ref(0)

// ? 正確修改
count.value = 10

// ? 錯(cuò)誤！直接賦值會(huì)覆蓋 ref 對(duì)象
count = 10

const state = reactive({ count: 0 })

// ? 正確修改屬性
state.count = 10

// ? 錯(cuò)誤！直接替換對(duì)象會(huì)失去響應(yīng)性
state = { count: 20 } 

// ? 保持響應(yīng)性的對(duì)象替換方式
Object.assign(state, { count: 20 })

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

// ? 解構(gòu)后失去響應(yīng)性
const { x, y } = state 

// ? 使用 toRefs 保持響應(yīng)性
const { x, y } = toRefs(state)
x.value = 10 // 現(xiàn)在修改有效

// ? 傳遞整個(gè) reactive 對(duì)象
const user = reactive({ name: 'Alice' })
updateUser(user)

function updateUser(userObj) {
  userObj.name = 'Bob' // 修改仍響應(yīng)
}

// ? 傳遞 ref 對(duì)象
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 管理用戶詳情（對(duì)象）
const userDetail = reactive({
  name: 'Alice',
  permissions: ['read', 'write']
})

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

// 替換整個(gè)對(duì)象的最佳實(shí)踐
const resetUser = () => {
  // ref 可以直接替換
  userId.value = 0
  
  // reactive 應(yīng)該合并屬性而非直接賦值
  Object.assign(userDetail, {
    name: 'Guest',
    permissions: []
  })
}
</script>