使用ref声明一个响应式对象并使用
<script lang="ts" setup> import { ref } from 'vue'; const message = ref("HelloWorld") message.value="被修改了啊~~" </script> <template> {{ message }} </template>
ref() 接收参数，并将其包裹在一个带有 .value 属性的 ref 对象中返回,如果在js中使用需要XX.value来操作其内容，在模板中可以直接使用，因为已经自动解包了
为什么ref可以变成响应式
vue会在首次渲染的时候追踪所有的ref，将ref对象进行一次封装，如果是普通对象我们是没办法检测他的修改和访问的，所以我们将他封装成对象，然后通过getter和 setter方法拦截对象属性的get和set操作。
.value属性就是用来检测ref合适被访问和修改的，可以参考如下伪代码：
// 伪代码，不是真正的实现 const myRef = { _value: 0, get value() { track() return this._value }, set value(newValue) { this._value = newValue trigger() //用来做一些通知， } }
使用reactive声明一个响应式对象并使用
// 伪代码，不是真正的实现 const myRef = { _value: 0, get value() { track() return this._value }, set value(newValue) { this._value = newValue trigger() //用来做一些通知， } }
reactive()将对象本身变的具有响应性，所以他只能用于对象类型，不支持stringnumberboolean等原始类型。reactive()返回的是一个原始对象的 Proxy，它和原始对象是不相等的.- reactive对结构操作不友好，如果我们对reactive进行结构，那他将失去响应性链接
const raw = {} const proxy = reactive(raw) // 代理对象和原始对象不是全等的 console.log(proxy === raw) // false
在TS中如何使用 ref 和reactive
<script lang="ts" setup> import { ref, reactive } from 'vue'; const message = ref<string>("HelloWorld") interface User { name: string, age: number } const user = reactive<User>({ name: "三千", age: 18 }) user.name = "八百" </script> <template> {{ message }} {{ user.name }} </template>
怎么选择
虽然没有严格的规则，但在某些情况下，使用一些特定的内容才是最佳实践，当然你也能够 ref 一把梭哈
如果你需要一个响应式原始值，那么使用 ref() 是正确的选择，要注意是原始值
如果你需要一个响应式对象，层级不深，那么使用 ref也可以
如果您需要一个响应式可变对象，并且对象层级较深，需要深度跟踪，那么使用 reactive
你可以把 reactive 看成 ref 的子集，ref 可以解决一切烦恼
