记录学习vue-next源码 - reactivity

Posted chuxiaoguo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了记录学习vue-next源码 - reactivity相关的知识,希望对你有一定的参考价值。

前言:

为了学习vue-next源码,我不仅一遍做思维导图,还写了一个mini-vue库,该库目前只有reactivity部分,在库中还包含了相关的流程图等更方便理解原理,关于runtime-dom部分网上已经有相关的demo了。

思维导图
mini-vue-reactivity

提出几个疑问:

细节的代码,都已经在demo中做了注释。下面就一起来思考几个问题。
学习就是一个提疑的过程。如果真的想从源码中学习更多的知识,品尝代码中的细节也是很有意思的。
一问,为什么proxy代理的对象,在拦截方法中,是用Reflect原型访问对象属性的?

二问,scheduler的实现,为什么只用promise就可以?而vue2中却setTimeout,setimmediate等?

三问,为什么watch的失效函数是通过runner函数的参数传入的,而不通过返回stop函数的参数传入呢?

四问,组件定义的watch究竟需不需要我们手动去stop呢?

五问,为什么scheduler中要定义前置缓冲队列,同步队列,后缀缓冲队列?

从源码中学到了

优雅的命名

高级函数

weekmap的正确打开方式

调度的实现

以上是关于记录学习vue-next源码 - reactivity的主要内容,如果未能解决你的问题,请参考以下文章

深入 Vue3 源码,学习初始化流程

深入 Vue3 源码,学习初始化流程

深入 Vue3 源码,学习初始化流程

深入 Vue3 源码,学习初始化流程

摸透Vue3中的13个全局Api,让你的代码更优雅!

一篇文章深度理解 13 个 Vue3 中的全局 Api(收藏!)