详解vue-class迁移vite的一次踩坑记录

import { createDecorator } from "vue-class-component";

function createBindingHelper(bindTo, mapFn) {
  function makeDecorator(map, namespace) {
    // 存入到 vue-class-component 的 __decorators__ 数组中
    return createDecorator(function (componentOptions, key) {
      if (!componentOptions[bindTo]) {
        componentOptions[bindTo] = {};
      }
      var mapObject = ((_a = {}), (_a[key] = map), _a);
      componentOptions[bindTo][key] =
        namespace !== undefined
          ? mapFn(namespace, mapObject)[key]
          : mapFn(mapObject)[key];
      var _a;
    });
  }
  function helper(a, b) {
    if (typeof b === "string") {
      var key = b;
      var proto = a;
      return makeDecorator(key, undefined)(proto, key);
    }
    var namespace = extractNamespace(b);
    var type = a;
    return makeDecorator(type, namespace);
  }
  return helper;
}

// vue-class-component/lib/component.js
function Component (options: ComponentOptions<Vue> | VueClass<Vue>): any {
  if (typeof options === 'function') {
    return componentFactory(options)
  }
  return function (Component: VueClass<Vue>) {
    return componentFactory(Component, options)
  }
}

// 类组件
@Component
export default class HelloWorld extends Vue { ... }

export function componentFactory(
  Component: VueClass<Vue>,
  options: ComponentOptions<Vue> = {}
): VueClass<Vue> {
  // 。。。无关代码

  options.name =
    options.name || (Component as any)._componentTag || (Component as any).name;

  const proto = Component.prototype;

  (options.methods || (options.methods = {}))[key] = descriptor.value;

  // typescript decorated data
  (options.mixins || (options.mixins = [])).push({
    data(this: Vue) {
      return { [key]: descriptor.value };
    },
  });

  // computed properties
  (options.computed || (options.computed = {}))[key] = {
    get: descriptor.get,
    set: descriptor.set,
  };

  // add data hook to collect class properties as Vue instance's data
  (options.mixins || (options.mixins = [])).push({
    data(this: Vue) {
      return collectDataFromConstructor(this, Component);
    },
  });

  // vuex-class 包装的方法会在此处注入
  const decorators = (Component as DecoratedClass).__decorators__;
  if (decorators) {
    decorators.forEach((fn) => fn(options));
    delete (Component as DecoratedClass).__decorators__;
  }

  const Super =
    superProto instanceof Vue ? (superProto.constructor as VueClass<Vue>) : Vue;
  const Extended = Super.extend(options);

  // 。。。无关代码

  return Extended;
}

Vue.extend = function (extendOptions) {
  // 。。。无关代码

  var Sub = function VueComponent(options) {
    this._init(options);
  };

  // 。。。无关代码
  return Sub;
};

Vue.prototype._init = function (options) {
  // 。。。无关代码

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

  // 。。。无关代码
};

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

function initData(vm) {
  var data = vm.$options.data;
  data = vm._data = typeof data === "function" ? getData(data, vm) : data || {};

  // 。。。无关代码
}

function getData(data, vm) {
  // #7573 disable dep collection when invoking data getters
  pushTarget();

  try {
    const a = data.call(vm, vm);
    return a;
  } catch (e) {
    handleError(e, vm, "data()");
    return {};
  } finally {
    popTarget();
  }
}

export function componentFactory(
  Component: VueClass<Vue>,
  options: ComponentOptions<Vue> = {}
): VueClass<Vue> {
  // 。。。无关代码
  (options.mixins || (options.mixins = [])).push({
    data(this: Vue) {
      return collectDataFromConstructor(this, Component);
    },
  });
  // 。。。无关代码
}

function collectDataFromConstructor(vm, Component) {
  Component.prototype._init = function () {
    var _this = this;
    // proxy to actual vm
    var keys = Object.getOwnPropertyNames(vm); // 2.2.0 compat (props are no longer exposed as self properties)

    if (vm.$options.props) {
      for (var key in vm.$options.props) {
        if (!vm.hasOwnProperty(key)) {
          keys.push(key);
        }
      }
    }

    keys.forEach(function (key) {
      Object.defineProperty(_this, key, {
        get: function get() {
          return vm[key];
        },
        set: function set(value) {
          vm[key] = value;
        },
        configurable: true,
      });
    });
  }; // should be acquired class property values

  var data = new Component(); // restore original _init to avoid memory leak (#209)

  // 。。。无关代码

  return data;
}

function Vue(options) {
  this._init(options);
}

@Component
export default class HelloWorld extends Vue {
  // vuex
  @model.State
  count: number;
  @model.Mutation("increment")
  increment: () => void;
  @model.Mutation("setCount")
  setCount: () => void = () => {
    this.count = this.count + 1;
  };

  // data
  msg: string = "Hello Vue 3 + TypeScript + Vite";
  //   methods
  incrementEvent() {
    console.log(this);
    this.increment();
    this.msg = this.msg + " + " + this.count;
  }
  //   生命周期
  beforeCreate() {}
  created() {
    console.log(this);
    this.msg = this.msg + " + " + this.count;
  }
}

class A {
  increment;
  setCount = () => {};
  incrementEvent() {}
}

export default class HelloWorld {
  constructor() {
    this.setCount = () => {
      this.count = this.count + 1;
    };
    // data
    this.msg = "Hello Vue 3 + TypeScript + Vite";
  }
  //   methods
  incrementEvent() {
    console.log(this);
    this.increment();
    this.msg = this.msg + " + " + this.count;
  }
  //   生命周期
  beforeCreate() {}
  created() {
    console.log(this);
    this.msg = this.msg + " + " + this.count;
  }
}

export default class HelloWorld {
  // vuex
  count;
  increment;
  setCount = () => {
    this.count = this.count + 1;
  };
  // data
  msg = "Hello Vue 3 + TypeScript + Vite";
  //   methods
  incrementEvent() {
    console.log(this);
    this.increment();
    this.msg = this.msg + " + " + this.count;
  }
  //   生命周期
  beforeCreate() {}
  created() {
    console.log(this);
    this.msg = this.msg + " + " + this.count;
  }
}

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": false,
    "module": "ESNext",
    "lib": ["ESNext", "DOM"],
    "moduleResolution": "Node",
    "strict": true,
    "sourceMap": false,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noImplicitReturns": true
  },
  "include": ["./src"]
}