Vue3.0来临之前,你可以做些事儿__Vue.js
发布于 3 年前 作者 banyungong 1296 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

更新

  • 代码更新成图片了, 代码块虽然没有高亮,感觉看着没有代码块方便呢? 如果大家看着不舒服我再改回去

前言

兴趣是最好的老师,对我等猿类更是如此。看了VueConf里面透露的API。只有一个感觉,像风一样自由~。特别的想尽快体验一下新版本的,也想过在Vue2.0的基础上模拟一下~!大佬与我的不同就是我想的时候,已经把这件事做了~。那么在Vue3.0之前我们来解读下大佬的源码,扩展下知识,争取早日…


主角 vue-function-api

github: https://github.com/vuejs/vue-function-api

文章的主要内容就是解读下这个库的源码。该仓库使用typescript编写,所以读这篇文章之前,你需要:

  1. typescript的基础知识
  2. vue有深入一些的了解
  3. 一点耐心,因为我可能表达的不够清楚

进入正题

建议对照源码,跟我一起去看这个有意思的lib

插件初始化

这里需要你了解vue插件的初始化过程

index.ts

带着问题1,我们先来看install方法的实现

install

  • 关于Vue.config.optionMergeStrategies.setup不理解的,可以看下相关的文章。我这里举个简单例子:开发过程中,使用mixin方式,对mounted生命周期处理过后,在组件中又用到mounted,你会发现mixin的和组件中的mounted内容都执行了,而不是被组件中的覆盖了。这就是Vue.config.optionMergeStrategies的作用。
  • 看到问题2时,问题1也就迎刃而解了。vue插件初始化时,第一个参数是vue,第二个是个options对象,而传入的mixin才是这个插件的核心之一,如果作为options传入,感觉怪怪的~,所以经过处理后的install方法更合适一些。

继续看mixin这个方法干了什么?解决问题2

mixin

我们发现mixin里面,只是劫持了SetupHookEvent, 校验了setup是否正确, 同时在beforeCreate里面混入了waitPropsResolved方法

记住问题3,我们继续向下看waitPropsResolved这个方法:

waitPropsResolved

  • 我们先来看这个方法里面的 safeRun方法干了什么

在safeRun里面:使用watch包装了一下传入的initSetup方法,然后执行这个包装后的方法,这里暂且忽略watch的作用,一会我们猜测下watch的作用

  • 接下来看waitPropsResolved的执行过程:
  1. 如果methods不存在,set一个方法, 触发SetupHookEvent,然后捕获这个set事件,执行safeRun方法
  2. 如果methods是一个空对象(也就是没找到第一个方法),set一个方法, 触发SetupHookEvent,然后捕获这个set事件,执行safeRun方法
  3. 如果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: https://github.com/Kntt

    版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: Kntt 原文链接:https://juejin.im/post/6844903905709703181

回到顶部