关于 vue ref reactive

ref是打包盒，什么都能装，取出来要多一步（.value）点出下面的值，推荐使用使用ref,

reactive可能丢失响应性

reactive存在两个问题

1.不能解构,要结合toRefs解构

 

//使用reactive定义1个对象
const user = reactive({name:'张三'，age:18}})

//无效，不能提取user
//ES6语法 等价于 let name = user.name
let {name} = user

name = '李四'

 

正确用法，使用toRefs 将reactive对象解构成ref对象,

import { reactive, toRefs } from 'vue'

const user = reactive({ name: '张三', age: 18 })

// ✅ 使用 toRefs 解构
let { name, age } = toRefs(user) 

// 此时 name 和 age 不再是普通字符串/数字，它们变成了 ref 对象！
// 所以修改时必须加上 .value
name.value = '李四' // ✅ 有效！页面会更新！

 

2.不能直接替换整个对象，要结合Object.assign使用

//使用reactive定义1个对象
let user = reactive({name:'张三'}})

//无效
user = {name:'李四'}

//只能使用 Object.asign，一个个属性覆盖
Object.assign(user,{name:'李四'})

 

 

ref

 

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

// 1. 基础类型
const count = ref(0)
const changeCount = () => {
  count.value++ // ⚠️ 注意：在 JS 中必须加 .value
}

// 2. 对象类型
const user = ref({ name: '张三', age: 18 })
const changeName = () => {
  user.value.name = '李四' // ⚠️ 修改对象内部属性，需要 .value
}
const replaceUser = () => {
  // ✅ 终极优势：可以直接把整个对象替换掉！
  user.value = { name: '王五', age: 20 } 
}
</script>

<template>
  <!-- ✅ 注意：在 template 中不用写 .value，Vue 自动解包了 -->
  <div>{{ count }}</div>
  <div>{{ user.name }}</div>
</template>