zoukankan      html  css  js  c++  java
  • Vue源码解读-构造函数

    src/core/instance/index.js
    此文件主要实现了Vue初始化

    
    // 引入模块
    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'
    // 什么时候需要把代码放到util包呢,个人感觉如果代码能够复用而且脱离项目能够应用到另一个项目可以考虑放到util
    /*
        构造函数 大家在这里可能会觉得,既然选择打包工具,那为啥不选择class呢,应该是和后边需要定义Vue静态方法和属性有关,
        es6语法暂不支持对静态属性的定义
    */
    function Vue (options) {
      // this instanceof Vue 可以判断函数是不是 new关键字调用
      if (process.env.NODE_ENV !== 'production' &&
        !(this instanceof Vue)
      ) {
        // 封装好的警告方法 console.warn();
        warn('Vue is a constructor and should be called with the `new` keyword')
      }
      // 调用初始化方法
      this._init(options)
    }
    
    /* 
      Mixin 混入的意思在这里大家可以理解成扩展
      以下方法在vue prototype 中扩展方法
      这里通过不同的函数来给vue prototye添加不同的功能,
      这种代码拆分思想很值得借鉴,尤其是在写复杂逻辑,
      将复杂逻辑拆分成不同的功能,这样代码清晰方便维护
    */
    // Vue 初始化 简言之就是 合并配置,初始化生命周期,初始化事件中心,初始化渲染,初始化 data、props、computed、watcher 
    initMixin(Vue)
    // 在这里state可以理解为 在vue原型vue.prototype扩展了vue实例中$date,$props,$set,$delete,$watch
    stateMixin(Vue)
    // 对事件的扩展 包括$on,$once,$emit,$off 应用的设计模式为观察者模式
    eventsMixin(Vue)
    /* 
    扩展生命周期方法
    Vue.prototype._update 
    Vue.prototype.$forceUpdate 强制更新
    Vue.prototype.$destroy  销毁
    */
    lifecycleMixin(Vue)
    /* 
    Vue.prototype.$nextTick = function (fn: Function) {}
    Vue.prototype._render = function (): VNode {}
    */
    renderMixin(Vue)
    
    export default Vue
    
    

    原文地址:https://segmentfault.com/a/1190000017080309

  • 相关阅读:
    js打印的两种方法
    C# VS2010中,用微软自带的System.Data.OracleClient来连接Oracle数据库
    js获取本月第几周和本年第几周
    [转]优化数据库大幅度提高Oracle的性能
    sass的循环for,while,each
    sass的mixin,extend,placeholder,function
    float,absolute脱离文档流的总结
    React ref的用法
    cloneNode与事件拷贝
    mobx动态添加observable
  • 原文地址:https://www.cnblogs.com/datiangou/p/10122787.html
Copyright © 2011-2022 走看看