• Vue源码——摸着石头过河


    学到哪写哪,过程就像人类祖先走出非洲

    /*!
     * Vue.js v2.6.11
     * (c) 2014-2019 Evan You
     * Released under the MIT License. 
     */
    

    这是一个声明式编程范式取代命令式编程范式的时代,这是最好的时代,以后永远是最好的时代。

    初始化Vue实例

    当使用Vue时,首先需要new Vue来创建Vue实例,这背后是怎样的逻辑呢?

      function Vue(options) {
        if (!(this instanceof Vue)
        ) {
          warn('Vue is a constructor and should be called with the `new` keyword');
        }
        this._init(options);
      }
    

    其实调用了_init()方法并传入参数,这个方法在initMixin()方法中被定义。

     function initMixin(Vue) {
        Vue.prototype._init = function (options) {
          var vm = this;
          // a uid
          vm._uid = uid$3++;
    
          var startTag, endTag;
          /* istanbul ignore if */
          if (config.performance && mark) {
            startTag = "vue-perf-start:" + (vm._uid);
            endTag = "vue-perf-end:" + (vm._uid);
            mark(startTag);
          }
    
          // a flag to avoid this being observed
          vm._isVue = true;
          // merge options
          if (options && options._isComponent) {
            // optimize internal component instantiation
            // since dynamic options merging is pretty slow, and none of the
            // internal component options needs special treatment.
            initInternalComponent(vm, options);
          } else {
            vm.$options = mergeOptions(
              resolveConstructorOptions(vm.constructor),
              options || {},
              vm
            );
          }
          /* istanbul ignore else */
          {
            initProxy(vm);
          }
          // expose real self
          vm._self = vm;
          initLifecycle(vm);
          initEvents(vm);
          initRender(vm);
          callHook(vm, 'beforeCreate');
          initInjections(vm); // resolve injections before data/props
          initState(vm);
          initProvide(vm); // resolve provide after data/props
          callHook(vm, 'created');
    
          /* istanbul ignore if */
          if (config.performance && mark) {
            vm._name = formatComponentName(vm, false);
            mark(endTag);
            measure(("vue " + (vm._name) + " init"), startTag, endTag);
          }
    
          if (vm.$options.el) {
            vm.$mount(vm.$options.el);
          }
        };
      }
    
    欢迎大家来我的 [Gitee仓库](https://gitee.com/jiffyzhang)参观。 同时欢迎关注我的同名公众号:就这样写(keepStarve),未来很大可能会活跃在此地。
  • 相关阅读:
    IPython notebook(Jupyter notebook)指定IP和端口运行
    spark-2.2.0安装和部署——Spark集群学习日记
    安装Scala-2.11.7——集群学习日记
    hadoop2.7.3在centos7上部署安装(单机版)
    Centos7下面配置静态IP
    css 3列
    css 日历组件(浮雕效果)
    if(!document.getElementById) return false; JS里这句是什么意思?
    网页中图片路径错误时显示默认图片方法
    css3 图片放大缩小闪烁效果
  • 原文地址:https://www.cnblogs.com/zhang-bobo/p/13737198.html
Copyright © 2020-2023  润新知