zoukankan      html  css  js  c++  java
  • 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),未来很大可能会活跃在此地。
  • 相关阅读:
    Docker-Compose搭建单体SkyWalking 6.2
    Docker搭建MySQL主从集群,基于GTID
    【简记】修改Docker数据目录位置,包含镜像位置
    【拆分版】Docker-compose构建Kibana单实例,基于7.1.0
    【拆分版】Docker-compose构建Logstash多实例,基于7.1.0
    【拆分版】Docker-compose构建Zookeeper集群管理Kafka集群
    命令行模式和python交互模式
    详解 HTTPS、TLS、SSL、HTTP区别和关系
    windows下如何查看进程、端口占用、杀死进程教程
    pycharm最常用的快捷键总结
  • 原文地址:https://www.cnblogs.com/zhang-bobo/p/13737198.html
Copyright © 2011-2022 走看看