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
    
  • 相关阅读:
    Java如何遍历二维数据
    Java标识符中常见的命名规则
    Java中常量的概念
    Java的数据类型
    Java中的方法是什么以及方法的书写格式
    Java中什么是构造方法
    Java中继承的概念
    Java中的匿名对象代码实例
    Java集合案例(产生不重复随机数)
    Java中集合的初等案例
  • 原文地址:https://www.cnblogs.com/HeCG95/p/12073457.html
Copyright © 2011-2022 走看看