Vue源码解读1—— 定义

最新推荐文章于 2024-01-27 08:30:00 发布

原创最新推荐文章于 2024-01-27 08:30:00 发布 · 298 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

4 篇文章

订阅专栏

这篇博客探讨了Vue的定义过程，从入口文件开始，详细阐述了如何在Vue原型上挂载方法，注册全局API，以及Vue构造函数的定义和相关方法的实现。

Vue 定义

entry-runtime-with-compiler.js文件为入口
runtime/index：在 Vue 原型上挂载了__patch__、$mount方法
core/index：注册全局 api,Vue.prototype 添加$isServer,$ssrContext,FunctionalRenderContext属性
instance/index：定义 Vue function
initMixin方法定义Vue.prototype._init

Vue.prototype._init = function (options?: Object) {
  const vm: Component = this;
  // vm实例上的唯一标志
  // a uid
  vm._uid = uid++;

  // ... 省略部分代码

  // 标志该对象为Vue实例，避免该对象被响应系统观测
  // a flag to avoid this being observed
  vm._isVue = true;
  // 合并options
  // 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 */
  if (process.env.NODE_ENV !== "production") {
    initProxy(vm);
  } else {
    vm._renderProxy = vm;
  }
  // expose real self
  vm._self = vm;
  initLifecycle(vm); // 初始化生命周期
  initEvents(vm); // 初始化事件中心
  initRender(vm); // 初始化渲染 createElement fn
  callHook(vm, "beforeCreate");
  initInjections(vm); // resolve injections before data/props
  initState(vm); // 初始化 data、props、computed、watcher等
  initProvide(vm); // resolve provide after data/props
  callHook(vm, "created");
  // 检测到如果有 el 属性，则调用 vm.$mount 方法挂载 vm，挂载的目标就是把模板渲染成最终的 DOM
  if (vm.$options.el) {
    vm.$mount(vm.$options.el);
  }
};