Vue3 ref 和 reactive 响应式引用

一、ref

接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value

通过 proxy 对数据进行封装，当数据变化时，触发模板等内容的更新
通过 proxy，"hello world" 变成 proxy({value:'hello world'}) 这样的一个响应式引用。
ref 用于处理基础类型的数据，str 初始页面的值是 hello world，3 秒过后值会变成 world hello

二、reactive

返回对象的响应式副本

通过 proxy，"{ name: 'zhangsan' }" 变成 proxy({ name: 'zhangsan' }) 这样的一个响应式引用。
ref 用于处理非基础类型的数据，nameObj.name 初始页面的值是 zhangsan，3 秒过后值会变成 lisi

三、readonly 和 toRefs

readonly 用于只读数据，不可修改
toRefs 将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

toRefs 当调用 proxy({ name: 'zhangsan' }) 后，会转换成 { name: proxy({value: 'zhangsan'}) }
转换之后去做解构 name 都会变成一个响应式数据。