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

  • 相关阅读:
    1451. Rearrange Words in a Sentence
    1450. Number of Students Doing Homework at a Given Time
    1452. People Whose List of Favorite Companies Is Not a Subset of Another List
    1447. Simplified Fractions
    1446. Consecutive Characters
    1448. Count Good Nodes in Binary Tree
    709. To Lower Case
    211. Add and Search Word
    918. Maximum Sum Circular Subarray
    lua 时间戳和时间互转
  • 原文地址:https://www.cnblogs.com/datiangou/p/10122787.html
Copyright © 2011-2022 走看看