浅谈vue中ref实现原理

·  阅读 2421

前提

嗨,大家好,小编又来了。上一篇文章给大家解析reactive在源码中的实现原理,这次小编来履行承诺了,给大家解析ref实现原理,知道大家求知的心情是迫切的,后续还有vite webpack解析,大家记得点赞关注啊。好了废话不多说了,我们开始了!!

疑问

可能大家已经开始着手vue3了,也有可能在面试官问大家的时候,知道reactive的实现原理吗?知道ref实现原理吗 大家可能听说过ref实现原理是defineProperty,但是如果大家看源码的时候,见到了吗。从哪个字眼中可以看到使用了defineProerty呢 这就牵扯到了class的编译结果,接下来带大家看下结果

疑问解答

class在线转换结果.png

  1. 大家看到class的解析原理了吗 其实我们es6中class转换后就是defineProperty 所以才说是ref的底层实现原理其实是defineProperty

源码解析开始

ref的使用.png

  1. 防止大家没有使用过ref 这里提供一个简单的使用例子,如果大家还是不懂的话 可以看官方文档或是留言问我也行

ref解析1.png

  1. 其实我们调用ref 就是createRef这个方法,这个方法会最后返回ref的实例 2.方法中有个判断是if(isRef(rawValue)) 表示是否已经是ref实例 如果已经是实例了,就没避免再执行了{注:ref实例化后 内部会有属性(__v_isRef = true)}

ref解析2.png

  1. 上图中是类{RefImpl},执行new的时候,会执行constructor构造函数,构造函数内会进行赋值
  2. 构造函数中包含代码{this._value = _shallow ? _rawValue : convert(_rawValue)},有很多人开始疑问了_shallow什么意思呢 其实就是浅代理 其实我们的浅搭理就是ref本身
  3. 内部的get value以及set value其实就是属性访问器模式,如果大家不了解的话,可以多看下设计模式,其实在get以及set的时候 是收集以及触发依赖的过程

ref解析3.png

  1. 仔细的同学可能就注意了 其实我并没有解释方法{convert}是干什么的,你看,解释就来了
  2. 其实就是为了判断是对象还是普通值 原则上ref的设计初衷是为了处理简单数据类型,但是如果你非要传递对象类型,我们也是可以处理的,只不过内部调用了reactive

结尾

好了 其实ref也是比较简单的,我感觉重要还是要理解class转换结果,这才是最重要的。好了 不罗嗦了 大家期待接下来的分析吧

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改