• Vue源码总结


    1,根据vue工程package.json配置文件查看scripts命令,找到build命令执行的js文件

    2,根据构建执行的js文件继续跟进,找到主入口文件

    3,从主入口文件直接分析主干代码,追踪export的Vue对象

    4,跟进到最内层,发现Vue对象其实就是一个构造函数,构造函数内调用了_init()方法。因此在我们new Vue(options)的时候,实例化Vue执行就会调用此方法

    5,在vue加载完成之后,初始化了initMixin, stateMixin, eventsMixin, lifecycleMixin, renderMixin这5个方法

    6,initMixin中定义了_init函数,这个函数的核心流程是:

    合并options配置挂载到vm.$options;

    调用initLifecycle初始化vm.$parent, vm.$root, vm.$children, vm.$refs 等属性值;

    调用initEvents初始化事件系统,实际上是v-on和@的注册的事件;

    调用initRender初始化渲染,通过执行createElement函数执行并返回虚拟DOM;

    调用beforeCreate钩子;

    调用initInjections函数初始化父子组件的inject和provide(二者成对出现);

    调用initState初始化state, props, methods, computed, watch等,将data, props都挂载到vm._data, vm._props上,设置访问数据代理,访问this.xx就是访问vm.xx;

    调用initProvide函数,同initInjections;

    调用created钩子。

    7,stateMixin中,对_data(vm.$data), _props(vm.$props)使用 Object.defineProperty 添加响应式

    8,eventsMixin中,在Vue原型上定义$on, $once, $off, $emit 事件方法,并返回vm

    9,lifecycleMixin中,在Vue原型上定义 _update, $forceUpdate, $destroy方法

    10,renderMixin中,在Vue原型上定义$nextTick方法和_render方法(该方法会调用vm.$createElement创建虚拟DOM)

  • 相关阅读:
    Abbkine ExKine 总蛋白提取试剂盒实验建议&FAQ
    CIE A-Level化学Paper 1真题讲解(2)
    谁在钉钉上做AI Agent?
    蚁剑高级模块开发
    【Rust日报】Ascent:在 Rust 中嵌入的逻辑编程语言
    记第一次与世界的交流
    小程序中使用echarts的相关配置以及折线图案例(简单易懂)
    JMeter的详细使用及相关问题
    关于 : vue路由的运用-route
    跨语言调用C#代码的新方式-DllExport
  • 原文地址:https://blog.csdn.net/wjs0406/article/details/134049881