前言
原始值指的是 Boolean、Number、BigInt、String、Symbol、undefined、null 等类型的值，在 JavaScript 中，原始值是按值传递的，引用类型是按引用传递的，这意味着，如果一个函数接收了一个原始值作为参数，那么形参和实参之间是没有引用关系的，它们是完全独立的两个值。在 JavaScript 中 proxy 无法对原始值提供代理，因此想要将原始值变成响应式数据，就必须要对原始值做一层包裹，这也就是 ref 要做的事。
为什么要引入 ref
用户自定义包裹对象的问题
根据上面提到的，如果要对原始值实现响应式数据，就必须要使用一个非原始值对象去 "包裹" 原始值，如：
// 原始值 let name = 'hello vue3' // 包裹对象 const nameWrapper = { value: 'hello vue3' } // 响应式数据 const name = reactive(nameWrapper) // 触发响应式数据修改 name.value = 'hello vue3 reactive' 复制代码
创建包裹对象的工作 看起来没有问题，但其实是有问题的：
- 用户为了创建一个响应式的原始值，不得不创建一个包裹对象
- 包裹对象的内容由用户自己定义，意味着不规范，即可以被随意命名，如
wrapper.value和wrapper.val都可以
引入 ref 解决问题
封装 ref 函数
为了解决上述的问题，可以 将创建包裹对象的工作 都封装到 ref 函数中，如：
// 封装 ref 函数 function ref(val){ // 创建包裹对象 const wrapper = { value: val } // 创建响应式数据 return reactive(wrapper) } // 使用 ref const name = ref('hello vue3') effect(() => { // 在副作用函数中通过 value 属性读取原始值 console.log(name.value) }) // 修改 name.value 的值，触发 effect 副作用函数重新执行 nam.value = 'hello world' 复制代码
优化 ref 函数
上面的代码已经可以实现最初的需求了，但是还是存在对应的缺陷，例如如何区分如下的两个响应式数据，是原始值的包裹对象，还是非原始值的响应式数据呢？
const name1 = ref('hello world') const name2 = ref('hello vue3') 复制代码
因此，需要对 ref 函数进行优化，如下：
function ref(val){ // 创建包裹对象 const wrapper = { value: val } // 使用 Object.definedProperty 在 wrapper 对象上定义一个不可枚举、不可写的属性 __v_isRef: true Object.definedproperty(wrapper, '__v_isRef', { value: true }) // 创建响应式数据 return reactive(wrapper) } 复制代码
通过 Object.definedProperty 方法为包裹对象 wrapper 设置一个不可枚举、不可写的属性 __v_isRef 且值为 true，用于去代表该对象是一个 ref ，而非原始值的响应式数据对象。
ref 用于解决响应式丢失问题
什么是响应式丢失？
在编写 Vue.js 组件时，通常都需要把数据暴露到模板当中使用，如：
export default { setup(){ const state = reactive({foo: 1, bar: 2}) return { ...state } } } 复制代码
可以看到这里使用了 展开运算符（...）的方式将响应式数据暴露到外部，然后这么做会丢失响应式，以下两段代码是等价的：
return { ...state } 等价于 return {foo: 1, bar: 2} 复制代码
如果这么看，很容易发现 响应式丢失的原因 是向外暴露了一个普通对象，它不具有任何响应式的能力.
实现 toRef 函数处理响应式丢失
实际上就是通过返回一个类似 ref 结构的 wrapper 对象，但通过为 wrapper 对象实现 getter 函数，并在其中返回具体的响应式数据，即保证与原响应式数据之间的联系，实现如下：
function toRef(obj, key){ const wrapper = { get value(){ return obj[key] }, // 允许设置 set value(val){ obj[key] = val } }; // __v_isRef 定义，表明是一个 ref 类型 Object.definedProperty(wrapper, '__v_isRef', { value: true }); return wrapper; } // 使用 const state = reactive({foo: 1, bar: 2}) const newState = { foo: toRef(state, 'foo'), bar: toRef(state, 'bar') } 复制代码
封装 toRefs 函数
第一版本的 toRef 函数存在的不足，就是只能对的单个 key 进行处理，如果传入的响应式数据键非常多，那效果就不高了，于是通过封装 toRefs 函数实现批量转换：
function toRefs(obj){ const ret = {}; for(const key in obj){ // 组个调用 toRef 完成批量转换 ret[key] = toRef(obj, key) } return ret } 复制代码
为什么需要自动脱 ref
toRefs 带来的问题
toRefs 函数解决了响应式丢失的问题，但也带来了新的问题，那就是它会把响应式数据的第一层属性值转换为 ref，意味着必须要通过 value 属性去访问值，这其实增加了用户的心智负担，因此，需要提供自动脱 ref 的能力。
自动脱 ref
所谓自动脱 ref 指的是属性的访问行为，即如果读取的属性是一个 ref，则直接将该 ref 对应的 value 属性值返回。
可以基于前面定义的 __v_isRef 标识，通过使用 Proxy 为 toRefs 返回的对象创建代理对象，即通过代理来实现目标，上述内容封装成 proxyRefs 函数，如下：
function proxyRefs(target){ return new Proxy(target, { get(target, key, receiver){ const value = Reflect.get(target, key, receiver) // 自动脱 ref，如果是 ref 对象，则返回其 value 属性值 return value.__v_isRef ? value.value : value }, set(target, key, newValue, receiver){ // 通过 target[key] 访问真实值 const value = target[key] if(value.__v_isRef){ value.value = newValue return true } return Reflect.set(target, key, newValue, receiver) } }); } 复制代码
实际上，在编写 Vuej.s 组件时，组件中的 setup 函数所返回的数据会传递给 proxyRefs 函数进行处理，这也就是为什么在模板中直接访问 ref 时，不需要通过 value 属性访问和设置。
在 Vue.js 中，关于自动脱 ref 不仅存在上述场景外，reactive 函数也有自动脱 ref 的能力，例如：
const count = ref(0) const obj = reactive(count) // 直接访问 obj.count // 0 复制代码
总结
ref 的作用场景总结如下：
- 处理 原始值 类型的响应式
- 解决 响应式 数据丢失 为了解决上述问题，引入了
ref的概念，并且封装了toRef、 toRefs、proxyRefs等函数，其中toRef、 toRefs是解决具体问题，但同时产生了新的用户心智负担，如ref的响应式数据，必须要通过.value的方式访问。因此，又通过proxyRefs函数实现 自动脱ref，以减少用户心智负担。
