写于vue3.0发布前夕的helloworld

前言：

vue3.0马上要来了，于今昔写一篇vue将一个字符串hellowrold渲染于页面的过程，慰藉我这几个月写vue的‘枯燥’。

源码版本是2.6.10。

开始：

我们的模板足够简单：

<div id="app">{{msg}}</div>

vue实例的配置也足够简单：

new Vue({
        el:'#app',
        data:function(){
            return{
                msg: 'hello,world'
            }
        }
    })

下面带着配置进入vue的构造函数：

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

构造函数足够简单，判断了一下是否用new调用，然后进入实例的_init_方法:

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);
      }
    };
  }

init函数一进来，先使用vm保存了this，然后给组件定义了一个_uid属性，每初始化一个组建这个东西就+1从0开始，下来一个

config.performance && mark 这个属性是用来记录vue的性能的相关参数，因为是根组建，所以下来的if-else走else分支，然后开始mergeOptions, mergeOptions其实就是将vue实例上缺省的属性设置成了默认值，然后merge之后我们的option长这个亚子：

"{"components":{},"directives":{},"filters":{},"beforeCreate":[null],"destroyed":[null],"el":"#app"}"

接着开始proxy：

initProxy = function initProxy (vm) {
      if (hasProxy) {
        // determine which proxy handler to use
        var options = vm.$options;
        var handlers = options.render && options.render._withStripped
          ? getHandler
          : hasHandler;
        vm._renderProxy = new Proxy(vm, handlers);
      } else {
        vm._renderProxy = vm;
      }

这个hasProxy是用于检测当前环境是否支持Proxy，如果支持之后就进行代理操作，三元运算符表示如果当前实例上已经有render就用getHandler代理操作，否则就用hasHandler，因为我们没有render故而得到了hasHandler代理操作：

var hasHandler = {
      has: function has (target, key) {
        var has = key in target;
        var isAllowed = allowedGlobals(key) ||
          (typeof key === 'string' && key.charAt(0) === '_' && !(key in target.$data));
        if (!has && !isAllowed) {
          if (key in target.$data) { warnReservedPrefix(target, key); }
          else { warnNonPresent(target, key); }
        }
        return has || !isAllowed
      }
    };

proxy就不用细讲了，以上的代理的作用就是检测当前vm上有某个key时，也就是 key in vm时，proxy代理了这个操作。具体细节就是 先检测当前vm上有无此属性，然后isAllowed 这个值呢 由allowedGlobals产生，allowedGlobals呢是一个由全局对象或着js语言关键词组成的闭包map函数，长这样：

首先是关键字部分：

var allowedGlobals = makeMap(
      'Infinity,undefined,NaN,isFinite,isNaN,' +
      'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
      'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
      'require' // for Webpack/Browserify
    );

makeMap就是用这个字符串产生一个map对象，然后返回一个闭包函数，makeMap长这样：

function makeMap (
    str,
    expectsLowerCase
  ) {
    var map = Object.create(null);
    var list = str.split(',');
    for (var i = 0; i < list.length; i++) {
      map[list[i]] = true;
    }
    return expectsLowerCase
      ? function (val) { return map[val.toLowerCase()]; }
      : function (val) { return map[val]; }
  }

回到has那个方法里，也就是说如果现在key是一个关键字那么就不用执行后面的东西啦，此时isAllowed就是true，否则，如果key是个字符串而且以_开头，而且vm.$data无法访问，那么此时isAllowed就是false啦。下来那个if就是说如果vm上没有属性key，并且isAllowed是false，就会执行下边的两个警告。最后返回结果。然后代理完成，并在当前vm实例上绑定了一个属性_renderProxy引用当前经过proxy之后的vm。接下来进入各种初始化过程，包含生命周期钩子函数，事件，render，然后在调用了第一个生命周期钩子，beforeCreate，随后初始化injection，state，以及provider。injection和provider是vue的依赖注入机制，这里我们不需要细讲，我们着重进入initState:

function initState (vm) {
    vm._watchers = [];
    var opts = vm.$options;
    if (opts.props) { initProps(vm, opts.props); }
    if (opts.methods) { initMethods(vm, opts.methods); }
    if (opts.data) {
      initData(vm);
    } else {
      observe(vm._data = {}, true /* asRootData */);
    }
    if (opts.computed) { initComputed(vm, opts.computed); }
    if (opts.watch && opts.watch !== nativeWatch) {
      initWatch(vm, opts.watch);
    }
  }

一进来，先初始化了一个_watchers，然后开始初始化props和methods，因为这里我们没有定义这两个东西所以直接来到initData：

function initData (vm) {
    var data = vm.$options.data;
    data = vm._data = typeof data === 'function'
      ? getData(data, vm)
      : data || {};
    if (!isPlainObject(data)) {
      data = {};
      warn(
        'data functions should return an object:\n' +
        'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
        vm
      );
    }
    // proxy data on instance
    var keys = Object.keys(data);
    var props = vm.$options.props;
    var methods = vm.$options.methods;
    var i = keys.length;
    while (i--) {
      var key = keys[i];
      {
        if (methods && hasOwn(methods, key)) {
          warn(
            ("Method \"" + key + "\" has already been defined as a data property."),
            vm
          );
        }
      }
      if (props && hasOwn(props, key)) {
        warn(
          "The data property \"" + key + "\" is already declared as a prop. " +
          "Use prop default value instead.",
          vm
        );
      } else if (!isReserved(key)) {
        proxy(vm, "_data", key);
      }
    }
    // observe data
    observe(data, true /* asRootData */);
  }

首先拿到data,(敲黑板，这里拿到data之后，还会在当前实例上声明一个_data用于保存当前组建得data数据，这个_data后期会代理vm上访问data里得值)。然后进入while循环，如果data中某个key值与props或者methods上的key重复了，会予以警告，否则进入另一个代理程序，proxy：

function proxy (target, sourceKey, key) {
    sharedPropertyDefinition.get = function proxyGetter () {
      return this[sourceKey][key]
    };
    sharedPropertyDefinition.set = function proxySetter (val) {
      this[sourceKey][key] = val;
    };
    Object.defineProperty(target, key, sharedPropertyDefinition);
  }

这个代理呢实际就是将vm.key 的get和set代理到了 vm._data.key上，往后在vue实例中使用 this.msg = 'balabal'时，实际上是将这个值set到了this,_data.msg上。这是后话。代理完成之后，来到了observe：

 /**
   * Attempt to create an observer instance for a value,
   * returns the new observer if successfully observed,
   * or the existing observer if the value already has one.
   */
  function observe (value, asRootData) {
    if (!isObject(value) || value instanceof VNode) {
      return
    }
    var ob;
    if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
      ob = value.__ob__;
    } else if (
      shouldObserve &&
      !isServerRendering() &&
      (Array.isArray(value) || isPlainObject(value)) &&
      Object.isExtensible(value) &&
      !value._isVue
    ) {
      ob = new Observer(value);
    }
    if (asRootData && ob) {
      ob.vmCount++;
    }
    return ob
  }

入口处的判断表明如果value是原始值或者是VNode的实例时不予以ovserve的。随后如果此对象已经被observe过了的话会有一个'__ob__'属性引用了observe当前对象之后的结果，如果有ob就用以前已经存在的否则经过一系列判断之后进入Observer，这些判断条件包括一个全局变量shouldObserve声明的默认值就是true，一个是否时服务端渲染的函数这里当然是true，然后判断是否为对象或者数组，这里value就是我们data的原始值，所以为true，然后判断当前对象是否可扩展，of course是ture，然后下边这个属性因为现在还没有，取反就是true，然后进入Observer:

 var Observer = function Observer (value) {
    this.value = value;
    this.dep = new Dep();
    this.vmCount = 0;
    def(value, '__ob__', this);
    if (Array.isArray(value)) {
      if (hasProto) {
        protoAugment(value, arrayMethods);
      } else {
        copyAugment(value, arrayMethods, arrayKeys);
      }
      this.observeArray(value);
    } else {
      this.walk(value);
    }
  };

这里，observe实例先保存了传入的value，然后会有一个dep实例生成，然后下来定义了一个observe 判断时会用到的属性__ob__，接着判断是数组，还是对象，这里我们的data是一个对象走walk：

/**
   * Walk through all properties and convert them into
   * getter/setters. This method should only be called when
   * value type is Object.
   */
  Observer.prototype.walk = function walk (obj) {
    var keys = Object.keys(obj);
    for (var i = 0; i < keys.length; i++) {
      defineReactive$$1(obj, keys[i]);
    }
  };

walk遍历对象，每一个键值，使用defineReactive$$1监听其get，set方法：

 /**
   * Define a reactive property on an Object.
   */
  function defineReactive$$1 (
    obj,
    key,
    val,
    customSetter,
    shallow
  ) {
    var dep = new Dep();

    var property = Object.getOwnPropertyDescriptor(obj, key);
    if (property && property.configurable === false) {
      return
    }

    // cater for pre-defined getter/setters
    var getter = property && property.get;
    var setter = property && property.set;
    if ((!getter || setter) && arguments.length === 2) {
      val = obj[key];
    }

    var childOb = !shallow && observe(val);
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        if (Dep.target) {
          dep.depend();
          if (childOb) {
            childOb.dep.depend();
            if (Array.isArray(value)) {
              dependArray(value);
            }
          }
        }
        return value
      },
      set: function reactiveSetter (newVal) {
        var value = getter ? getter.call(obj) : val;
        /* eslint-disable no-self-compare */
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        /* eslint-enable no-self-compare */
        if (customSetter) {
          customSetter();
        }
        // #7981: for accessor properties without setter
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        childOb = !shallow && observe(newVal);
        dep.notify();
      }
    });
  }

defineReactive$$1一进来也是生成了一个dep对象，这里看下dep长什么亚子：

{"id":3,"subs":[]}

基本属性是一个id，还有一个subs，subs里会保存依赖收集时对应组建的watcher，这个我们下面会讲到，然后原型方法上是一组关于subs的操作方法，不再细讲。接着取到属性描述符，判断是否configurable，取得已经事先配置好的getter setter，然后如果是非shallow模式，会继续observe，这里我们的val是一个字符串，非对象，所以observe会直接返回，然后我们继续走到Object.defineProperty这里，对于data上的属性，都成为响应式属性，即get方法收集依赖，（他里边这个Dep.target就是收集依赖的时候的watcher实例），set唤起更新程序。设置完毕，层层返回直到observe函数里。返回ob对象。然后observe完毕。继续返回到initState函数里，下来initState函数会继续初始化computed和watch属性，我们代码里没有设置直接返回到最开始的init函数里，随后在当前vue实例初始化完毕之后，created钩子会触发。

篇幅过长，新开一篇接着讲。