前提
嗨，大家好，小编又来了。上一篇文章给大家解析reactive在源码中的实现原理，这次小编来履行承诺了，给大家解析ref实现原理，知道大家求知的心情是迫切的，后续还有vite webpack解析，大家记得点赞关注啊。好了废话不多说了，我们开始了！！
疑问
可能大家已经开始着手vue3了，也有可能在面试官问大家的时候,知道reactive的实现原理吗？知道ref实现原理吗 大家可能听说过ref实现原理是defineProperty，但是如果大家看源码的时候，见到了吗。从哪个字眼中可以看到使用了defineProerty呢 这就牵扯到了class的编译结果，接下来带大家看下结果
疑问解答
- 大家看到class的解析原理了吗 其实我们es6中class转换后就是defineProperty 所以才说是ref的底层实现原理其实是defineProperty
源码解析开始
- 防止大家没有使用过ref 这里提供一个简单的使用例子，如果大家还是不懂的话 可以看官方文档或是留言问我也行
- 其实我们调用ref 就是createRef这个方法，这个方法会最后返回ref的实例 2.方法中有个判断是if(isRef(rawValue)) 表示是否已经是ref实例 如果已经是实例了，就没避免再执行了{注：ref实例化后 内部会有属性(__v_isRef = true)}
- 上图中是类{RefImpl}，执行new的时候，会执行constructor构造函数，构造函数内会进行赋值
- 构造函数中包含代码{this._value = _shallow ? _rawValue : convert(_rawValue)}，有很多人开始疑问了_shallow什么意思呢 其实就是浅代理 其实我们的浅搭理就是ref本身
- 内部的get value以及set value其实就是属性访问器模式，如果大家不了解的话，可以多看下设计模式，其实在get以及set的时候 是收集以及触发依赖的过程
- 仔细的同学可能就注意了 其实我并没有解释方法{convert}是干什么的，你看，解释就来了
- 其实就是为了判断是对象还是普通值 原则上ref的设计初衷是为了处理简单数据类型，但是如果你非要传递对象类型，我们也是可以处理的，只不过内部调用了reactive
结尾
好了 其实ref也是比较简单的，我感觉重要还是要理解class转换结果，这才是最重要的。好了 不罗嗦了 大家期待接下来的分析吧
