Vue2源码学习笔记之实例化

/* istanbul ignore else */
// ! 初始化代理
if (process.env.NODE_ENV !== "production") {
  initProxy(vm);
} else {
  vm._renderProxy = vm;
}

let initProxy;
 
if (process.env.NODE_ENV !== "production") {
  // ...
  initProxy = function initProxy(vm) {
    if (hasProxy) {
      // determine which proxy handler to use
      const options = vm.$options;
      const handlers =
        options.render && options.render._withStripped
          ? getHandler
          : hasHandler;
      vm._renderProxy = new Proxy(vm, handlers); // ! 使用代理
    } else {
      vm._renderProxy = vm; // ! 和生产环境一样直接赋值
    }
  };
}

const hasHandler = {
  has(target, key) {
    const has = key in target;
    const 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;
  },
};

// ! 渲染虚拟 Node， 传入 vm.$createElement 方法
vnode = render.call(vm._renderProxy, vm.$createElement);

vm.$options.render = function () {
  // render 函数的 this 指向实例的 _renderProxy
  with (this) {
    return _c("div", [_v(_s(a))]); // 在这里访问 a，相当于访问 vm._renderProxy.a
  }
};

// expose real self
vm._self = vm;
initLifecycle(vm); // ! 初始化生命周期相关属性 存储本身实例到父节点 新增属性 $parent $root $children $refs 等
initEvents(vm); // ! 初始化事件相关属性 更新 listeners
initRender(vm); // ! 初始化渲染相关属性, 创建VNode 另新增属性 $attrs 和 $listeners
callHook(vm, "beforeCreate"); // ! 调用 beforeCreate 钩子函数
initInjections(vm); // ! 初始化 injections 选项，必须在初始化状态之前
initState(vm); // ! 初始化状态 按顺序 props => methods => data => computed  => watch
initProvide(vm); // ! 初始化 Provide resolve provide after data/props
callHook(vm, "created"); // ! 调用 created 钩子函数

export function initLifecycle(vm: Component) {
  const options = vm.$options;
  // ...
}

// locate first non-abstract parent
let parent = options.parent;
if (parent && !options.abstract) {
  // ! 查找第一个非抽象的父组件
  while (parent.$options.abstract && parent.$parent) {
    parent = parent.$parent;
  }
  parent.$children.push(vm); // ! 把实例存储到父组件里面
}
 
vm.$parent = parent; // ! 添加父组件属性 $parent
vm.$root = parent ? parent.$root : vm; // ! 新增属性 $root

vm.$children = [];
vm.$refs = {};
 
vm._watcher = null;
vm._inactive = null;
vm._directInactive = false;
vm._isMounted = false;
vm._isDestroyed = false;
vm._isBeingDestroyed = false;

export function initEvents(vm: Component) {
  vm._events = Object.create(null);
  vm._hasHookEvent = false;
  // init parent attached events
  const listeners = vm.$options._parentListeners;
  if (listeners) {
    updateComponentListeners(vm, listeners);
  }
}

export function initRender(vm: Component) {
  vm._vnode = null; // the root of the child tree
  vm._staticTrees = null; // v-once cached trees
  // ...
}

const options = vm.$options;
const parentVnode = (vm.$vnode = options._parentVnode); // the placeholder node in parent tree
const renderContext = parentVnode && parentVnode.context;
vm.$slots = resolveSlots(options._renderChildren, renderContext);
vm.$scopedSlots = emptyObject;

vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false); // ! 编译器渲染模板的渲染方法
vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true); // ! 用户手写代码的渲染方法

export default {
  render(createElement) {
    return createElement("h1", "hello");
  },
};

export default {
  render() {
    return this.$createElement("h1", "hello");
  },
};

const parentData = parentVnode && parentVnode.data;
 
/* istanbul ignore else */
if (process.env.NODE_ENV !== "production") {
  defineReactive(
    vm,
    "$attrs",
    (parentData && parentData.attrs) || emptyObject,
    () => {
      !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm);
    },
    true
  );
  defineReactive(
    vm,
    "$listeners",
    options._parentListeners || emptyObject,
    () => {
      !isUpdatingChildComponent && warn(`$listeners is readonly.`, vm);
    },
    true
  );
} else {
  defineReactive(
    vm,
    "$attrs",
    (parentData && parentData.attrs) || emptyObject,
    null,
    true
  );
  defineReactive(
    vm,
    "$listeners",
    options._parentListeners || emptyObject,
    null,
    true
  );
}

() => {
  !isUpdatingChildComponent && warn(`$attrs is readonly.`, vm);
};

export let isUpdatingChildComponent: boolean = false;
 
// ! 更新子组件方法
export function updateChildComponent(
  vm: Component,
  propsData: ?Object,
  listeners: ?Object,
  parentVnode: MountedComponentVNode,
  renderChildren: ?Array<VNode>
) {
  if (process.env.NODE_ENV !== "production") {
    isUpdatingChildComponent = true;
  }
 
  // ...
 
  // update $attrs and $listeners hash
  // these are also reactive so they may trigger child update if the child
  // used them during render
  vm.$attrs = parentVnode.data.attrs || emptyObject;
  vm.$listeners = listeners || emptyObject;
 
  // ...
 
  if (process.env.NODE_ENV !== "production") {
    isUpdatingChildComponent = false;
  }
}

callHook(vm, "beforeCreate"); // ! 调用 beforeCreate 钩子函数

export function callHook(vm: Component, hook: string) {
  // #7573 disable dep collection when invoking lifecycle hooks
  pushTarget();
  const handlers = vm.$options[hook];
  const info = `${hook} hook`;
  if (handlers) {
    for (let i = 0, j = handlers.length; i < j; i++) {
      invokeWithErrorHandling(handlers[i], vm, null, vm, info);
    }
  }
  if (vm._hasHookEvent) {
    vm.$emit("hook:" + hook);
  }
  popTarget();
}

export function invokeWithErrorHandling(
  handler: Function,
  context: any,
  args: null | any[],
  vm: any,
  info: string
) {
  let res;
  try {
    res = args ? handler.apply(context, args) : handler.call(context);
    if (res && !res._isVue && isPromise(res) && !res._handled) {
      res.catch((e) => handleError(e, vm, info + ` (Promise/async)`));
      // issue #9511
      // avoid catch triggering multiple times when nested calls
      res._handled = true;
    }
  } catch (e) {
    handleError(e, vm, info);
  }
  return res;
}

if (vm._hasHookEvent) {
  vm.$emit("hook:" + hook);
}

<child
  @hook:beforeCreate="handleChildBeforeCreate"
  @hook:created="handleChildCreated"
  @hook:mounted="handleChildMounted"
/>

vm.$emit("hook:" + hook);

export function initState(vm: Component) {
  vm._watchers = [];
  const 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);
  }
}

props: ['initialCounter', 'size'],
data() {
  return {
    counter: this.initialCounter
  }
},
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}