Vue3中ref和reactive的区别及说明

import { ref } from 'vue'

// 基本类型
const count = ref(0)
console.log(count.value) // 0

// 对象类型
const user = ref({
  name: 'Tom',
  age: 18
})
console.log(user.value.name) // 'Tom'

import { reactive } from 'vue'

const state = reactive({
  name: 'Tom',
  age: 18,
  hobbies: ['reading', 'swimming']
})
console.log(state.name) // 'Tom'

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

const count = ref(0)
// setup 中需要 .value
const increment = () => {
  count.value++
}
</script>

<template>
  <!-- 模板中直接使用，不需要 .value -->
  <div>{{ count }}</div>
</template>

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

const state = reactive({
  count: 0
})
// 直接访问
const increment = () => {
  state.count++
}
</script>

<template>
  <!-- 直接访问 -->
  <div>{{ state.count }}</div>
</template>

import { ref, toRefs } from 'vue'

const user = reactive({
  name: ref('Tom'),
  age: ref(18)
})

// ref 解构后保持响应性
const { name, age } = toRefs(user)
name.value = 'Jerry' // 仍然是响应式的

import { reactive } from 'vue'

const state = reactive({
  name: 'Tom',
  age: 18
})

// 直接解构会失去响应性
const { name, age } = state
name = 'Jerry' // 不再是响应式的

// 使用 toRefs 保持响应性
const { name, age } = toRefs(state)
name.value = 'Jerry' // 仍然是响应式的

const count = ref(0)
const message = ref('hello')
const isVisible = ref(true)

const state = reactive({
  user: {
    name: 'Tom',
    age: 18
  },
  settings: {
    theme: 'dark',
    notifications: true
  }
})

const state = reactive({
  count: ref(0),
  user: {
    name: ref('Tom'),
    age: ref(18)
  }
})

// 转换为 ref
const { count, user } = toRefs(state)