更新
- 代码更新成图片了, 代码块虽然没有高亮,感觉看着没有代码块方便呢? 如果大家看着不舒服我再改回去
前言
兴趣是最好的老师,对我等猿类更是如此。看了VueConf里面透露的API。只有一个感觉,像风一样自由~。特别的想尽快体验一下新版本的,也想过在Vue2.0的基础上模拟一下~!大佬与我的不同就是我想的时候,已经把这件事做了~。那么在Vue3.0之前我们来解读下大佬的源码,扩展下知识,争取早日...
主角 vue-function-api
github: github.com/vuejs/vue-f…
文章的主要内容就是解读下这个库的源码。该仓库使用typescript编写,所以读这篇文章之前,你需要:
typescript
的基础知识- 对
vue
有深入一些的了解 - 一点耐心,因为我可能表达的不够清楚
进入正题
建议对照源码,跟我一起去看这个有意思的lib
插件初始化
这里需要你了解vue插件的初始化过程
带着问题1,我们先来看install方法的实现
- 关于
Vue.config.optionMergeStrategies.setup
不理解的,可以看下相关的文章。我这里举个简单例子:开发过程中,使用mixin方式,对mounted
生命周期处理过后,在组件中又用到mounted
,你会发现mixin的和组件中的mounted
内容都执行了,而不是被组件中的覆盖了。这就是Vue.config.optionMergeStrategies
的作用。 - 看到问题2时,问题1也就迎刃而解了。vue插件初始化时,第一个参数是vue,第二个是个options对象,而传入的mixin才是这个插件的核心之一,如果作为options传入,感觉怪怪的~,所以经过处理后的install方法更合适一些。
继续看mixin这个方法干了什么?解决问题2
我们发现
mixin
里面,只是劫持了SetupHookEvent
, 校验了setup是否正确, 同时在beforeCreate里面混入了waitPropsResolved
方法
记住问题3,我们继续向下看waitPropsResolved
这个方法:
- 我们先来看这个方法里面的
safeRun
方法干了什么
在safeRun里面:使用watch包装了一下传入的
initSetup
方法,然后执行这个包装后的方法,这里暂且忽略watch的作用,一会我们猜测下watch的作用
- 接下来看
waitPropsResolved
的执行过程:
- 如果methods不存在,set一个方法, 触发SetupHookEvent,然后捕获这个set事件,执行
safeRun
方法- 如果methods是一个空对象(也就是没找到第一个方法),set一个方法, 触发SetupHookEvent,然后捕获这个set事件,执行
safeRun
方法- 如果methods里面存在方法,劫持第一个方法,当这个方法被复制的时候,执行
safeRun
方法
问题4: 为什么要触发触发SetupHookEvent
后,再执行safeRun
?
结合
waitPropsResolved
的名字,我猜测是这样做能保证props
已经准备好了,因为setup
方法是接受一个props参数的。以上三条有一个共同点,都是在捕获到方法被赋值之后,才去执行safeRun
。所以这里的结论是,当方法被赋值时,props肯定已经准备就绪了。(姑且这么认为,这里我也没做深入的研究,有不妥的地方,欢迎指正,欢迎讨论)
问题5: 为什么传入的initSetup
方法要使用watch包装一下呢~,而不是直接执行initSetup
?
- 我们先看看watch方法,initSetup方法是被包装成
() => { initSetup(vm, props) }
,作为第一参数source传入的,我们盯住这个source参数
- 继续看createSingleSourceWatcher
我们发现这里把source换了个名字getter
,交给了vue.$watch方法处理了~, 这个方法我们看vue的文档就好了。
咋滴。懵了吧?先总结一下,看看插件的执行顺序。我们再继续看initSetup
方法。
- 插件初始化时,给vue全局混入一个
beforeCreate
方法 beforeCreate
方法里面执行waitPropsResolved
方法waitPropsResolved
方法里面保证props就绪以后,把initSetup
方法交给watch
方法watch
方法再把() => { initSetup(vm, props)
交给了vue.$watch
了
这样我们就看出来这个插件的核心,是依赖vue.$watch
,只要props有变化,就执行一次initSetup
,我们继续看initSetup
方法。
- 执行组件的
setup
方法 - 处理返回的object,Wrapper类型的就是通过 value处理的值,其他的调用
setVmProperty
设置在vm上 - 组件上就可以愉快的使用了
这里留个小尾巴,没有讲解value方法,感兴趣的可以自己去研究研究~
学习源码的过程
该插件的逻辑很清晰,学习的源码就没上传github,说下我学习的过程,由于这个插件是使用ts编写,所以,我使用vue创建了一个ts的项目,把这个插件的源码导入到项目中,通过引用本地的插件,一点一点的分析源码。喜欢的通过学也可以这样试试,通过log,断点调试,对于理解源码非常有帮助。
总结
- Vue3.0之前,用这个插件先过个瘾。
- 虽然3.0里面的实现原理肯定不是这样的,可以通过学习这个插件的源码,提升下个人能力
- 就写这么多吧, 欢迎交流,指正~
- github: github.com/Kntt