zoukankan      html  css  js  c++  java
  • 创建Vue类的过程

    1.构造函数

    // src/core/instance/index.js
    //构造函数
    function Vue (options) {
      ...
      this._init(options)
    }
    

    2.全局配置对象

    // src/core/global-api/index.js
    //全局config对象,我们几乎不会用到
    import config from '../config'
    Vue.config = {
      keyCodes,
      // LIFECYCLE_HOOKS in src/shared/constants.js
      _lifecycleHooks: ['beforeCreate', 'created', ...]
    }
    

    3.默认options配置

    // src/core/global-api/index.js
    // 默认的options配置,我们每个组件都会继承这个配置。
    Vue.options = Object.create(null)
    ASSET_TYPES.forEach(type => {
      Vue.options[type + 's'] = Object.create(null)
    })
    Vue.options._base = Vue
    extend(Vue.options.components, builtInComponents)
    
    // 最后的结果:
    Vue.options = {
      beforeCreate, // 比如 vue-router 就会注册这个回调,因此会每一个组件继承
      components, // 前面提到了,默认组件有三个 `KeepAlive`,`transition`, `transitionGroup`,这里注册的组件就是全局组件,因为任何一个组件中不用声明就能用了。所以全局组件的原理就是这么简单
      directives, // 默认只有 `v-show` 和 `v-model`
      filters // 不推荐使用了
    }
    

    4.一些全局方法

    // src/core/global-api/index.js
    Vue.component // 注册组件
    Vue.directive // 注册指令
    Vue.set = set// 添加全局方法 数据的修改操作
    Vue.delete = del
    Vue.nextTick = nextTick // 添加全局方法 Vue.nextTick 下一个tick执行函数
    initUse(Vue)// 添加全局方法 Vue.use 注册插件
    initMixin(Vue)// 添加全局方法 Vue.mixin 混入mixin用的
    initExtend(Vue)
    initAssetRegisters(Vue)
    

    5.Vue.prototype 上不同作用的方法

    // src/core/instance/index.js
    initMixin(Vue)// 添加的 _init 方法,是Vue实例初始化的入口方法,会调用其他的功能初始化函数
    stateMixin(Vue)// 添加的三个用来进行数据操作的方法 data,props,watch
    eventsMixin(Vue)// 添加的事件方法 on,off,one,emit
    lifecycleMixin(Vue)// 添加的生命周期相关的方法 _update,$forceUpdate,$destroy
    renderMixin(Vue)// 添加的 $nextTick,_render和一堆renderHelper
    
  • 相关阅读:
    结构体、共用体
    strlen函数,strcat函数,strcpy函数,strncpy函数,strcmp函数
    memmove函数
    Spring Boot——2分钟构建spring web mvc REST风格HelloWorld
    maven3常用命令、java项目搭建、web项目搭建详细图解
    C++中的const关键字
    Pyp 替代sed,awk的文本处理工具
    Python 中的进程、线程、协程、同步、异步、回调
    Python-aiohttp百万并发
    学习Python的三种境界
  • 原文地址:https://www.cnblogs.com/HeCG95/p/12073457.html
Copyright © 2011-2022 走看看