• VUE 源码学习01 源码入口


    VUE【version:2.4.1】

    Vue项目做了不少,最近在学习设计模式与Vue源码,记录一下自己的脚印!共勉!注:此处源码学习方式为先了解其大模块,从宏观再去到微观学习,以免一开始就研究细节然后出不来~

    从package.json文件知道我们在执行命令npm run dev(只是以dev为例prod一样) 对应的是config.js文件里面的web-full-dev,然后找到config.js文件

    config.js
    'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    }
    

    这里就能清楚的知道配置入口文件是 entry-runtime-with-compiler.js

    entry-runtime-with-compiler.js
    import config from 'core/config'
    import Vue from './runtime/index'
    export default Vue
    

    这里我就只主要写出了文件的导入和导出,这里就能知道这个文件只是为了导出一个Vue,那这个Vue具体的来源呢,继续看import的Vue的来源

    runtime/index.js
    import Vue from 'core/index'
    

    该怎样继续不用啰嗦了,继续找 core/index.js

    你会发现最后找到了 instance/index.js

    此时你已经找到了核心初始化的代码!

    instance/index.js
    import { initMixin } from './init'
    import { stateMixin } from './state'
    import { renderMixin } from './render'
    import { eventsMixin } from './events'
    import { lifecycleMixin } from './lifecycle'
    import { warn } from '../util/index'
    
    function Vue (options) {
    if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
    ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
    }
    this._init(options)
    }
    
    initMixin(Vue)
    stateMixin(Vue)
    eventsMixin(Vue)
    lifecycleMixin(Vue)
    renderMixin(Vue)
    
    export default Vue
    

    从代码可以看出此文件主要就是定义了一个构造函数Vue,并且整个Vue的核心方法都到场了

    1.//初始化的入口,各种初始化工作
    2.initMixin(Vue) 
    3.//数据绑定的核心方法,包括常用的$watch方法
    4.stateMixin(Vue)
    5.//事件的核心方法,包括常用的$on,$off,$emit方法
    6.eventsMixin(Vue)
    7.//生命周期的核心方法
    8.lifecycleMixin(Vue)
    9.//渲染的核心方法,用来生成render函数以及VNode
    10.renderMixin(Vue)
    

    至此,我们已经找到核心VUE文件入口,这个instance/index.js文件经过mixin各个模块之后返回了构造函数Vue,以examples文件夹里面commits例子来说明,当我们new Vue()的时候,就调用这个构造函数,然后代码从this._init(options)进入主题!

    后续在进行下面各个功能模块探究!

  • 相关阅读:
    Eclipse 中生成帮助文档 (javadoc) 迎客
    网管利器:七大免费网络工具 迎客
    oracle 11g 学习笔记 10_27
    oracle 11g 学习笔记 10_29
    oracle 11g学习笔记 2012_10_22
    oracle 11g 学习笔记 2012_10_25(2)
    oracle 11g 学习笔记 10_26
    oracle 11g 学习笔记 2012_10_24(1)
    oracle 11g 学习笔记2012_10_23(2)
    oracle 11g 学习笔记 2012_10_25(a)
  • 原文地址:https://www.cnblogs.com/Nutrient-rich/p/7754675.html
Copyright © 2020-2023  润新知