vue3源码解析文档 vuejs源码解析

今天乐乐来给大家分享一些关于vuejs源码解析方面的知识吧，希望大家会喜欢哦

1、在实习面试中，Vue相关被问到最多的就是围绕生命周期函数内部所作的一些操作，很多朋友可能了解的就是官网的下图，有时候倒霉遇上硬核点的面试官，深入问些东西就会被怼的哑口无言，本文就是在之前源码的基础上，分析一下，生命周期函数究竟发生了什么先上图在分析每个钩子之间究竟干了什么之前，先来看看钩子是怎么触发的，以第一个钩子为例调用callHook函数并向其传入this和'beforeCreate'字符串，那来看看callHook函数究竟是何方神圣注意到，该函数一开始，也就是钩子函数进入准备触发前，进行了一个pushTarget()的操作，注释写的是“在钩子函数触发时，禁用依赖收集”，那这个操作是干嘛呢言归正传，禁用了依赖收集后，创建handlers数组存入合并后options的hook，本例中就是找自定义或者继承来的beforeCreate钩子，然后在invokeWithErroeHandling函数中以此触发，顺序是先触发父级，后自己定义的而这个invokeWithErroeHandling函数如下该函数直接就在内部call了钩子，所以钩子内部的this指向vm实例以上就是钩子函数的触发过程，下面来看不同的生命周期之间究竟干了什么beforeCreate之前beforeCreate之后到created1.对于props：合法化，缓存key进数组方便下次迭代，defineReactive2.对于data：检验props，methods中是否有重名属性，defineReactive3.对于methods：代理到vm实例上，方便使用this.method.name调用4.对于computed：封装成watcher并用该watcher的value缓存该计算属性的value，再在每个计算属性上劫持一层getter和setter，在第一次调用getter的时候，取得最新的value，并将依赖缓存下来，之后再依赖不变的前提下，getter只返回watcher的value而不是又去取一遍值，再依赖发生变化的时候，通知watcher更新，watcher取的最新值作为value，从而实现依赖更新计算属性才更新5.对于watch：调用$watch封装成一个user watcher，如果有immediate options传入，就在封装的时候就调用一遍callback，有deep options传进来的话就将该属性的所有嵌套属性记为依赖beforeCreate之前主要是做准备工作，将该实例的options合并整理出来，再把$那些初始话created之前就是对options做操作，data，props设置数据劫持，methods代理在vm实例上，computed，watch封装成不同类型的watcher。

本文到这结束，希望上面文章对大家有所帮助。