ref 与 reactive
组合式 API 中，基本类型用 ref() 包裹（返回带 .value 的对象），对象用 reactive() 包裹（无需 .value，直接读写属性）。两者都可配合 setup() 或 <script setup> 使用。
选择原则：需要「重新赋值整个变量」（如替换数组、清空对象）用 ref，因为 reactive 的代理只对属性级修改响应，整体替换会丢失响应性；只改属性、不换整个对象时 reactive 更顺手。模板里 ref 自动解包，不需要写 .value。
- ref：适合基本类型与需要整体替换的值，JS 中读写要 .value
- reactive：适合对象/数组，直接改属性即响应
- 模板里 ref 自动解包；reactive 整体替换会丢响应性，需换用 ref
HTML
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>ref 与 reactive</title> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div id="app"> <p>计数：{{ count }}（ref）</p> <p>姓名：{{ user.name }}（reactive）</p> <button @click="count++; user.name = '小红'">同时改两个</button> <button @click="replaceList">整体替换用 ref</button> <p>列表：{{ list.join(', ') }}</p> </div> <script> const { createApp, ref, reactive } = Vue; createApp({ setup() { const count = ref(0); // 基本类型用 ref const user = reactive({ name: '小明' }); // 对象用 reactive const list = ref(['a', 'b']); // 要整体替换的数组用 ref const replaceList = () => { list.value = ['x', 'y', 'z']; }; return { count, user, list, replaceList }; } }).mount('#app'); </script> </body> </html>
本节要点基本类型与整体替换用 ref（JS 里 .value），对象属性级修改用 reactive。
