进入使用装饰器转换打字稿类以获取有效VUE组件所需的内容？

Question

如果我问“vue-class-component 是如何工作的”，很可能这个问题也被标记为宽的。顺便说一下，我检查了它的源代码，但不明白它是如何工作的，所以我需要从简单的事情开始。

这是 Vue 文档 中的简单示例

export default {
  props: ['foo'],
  created() {
    console.log(this.foo)
  }
}

： ECMAScript（甚至 OOP），下面的类不等于上面的对象。

export default class Component {

  private foo!: string;

  protected created(): void {
    console.log(this.foo)
  }
}

所以，我认为问题陈述是使用装饰器，如下所示

@MagicDecorator
class Component {

  @VueProperty({ type: String })
  protected foo!: string;

  @VueLifecycleHook
  protected created(): void {
   console.log(this.foo)
  }
}

将其转换为第一个列表。这个问题表述正确吗？

请注意，我没有完全按照 vue-class-component 的方式去做的目标 - 欢迎改进。例如，我将向生命周期挂钩、数据和计算属性添加装饰器，这与 vue-class-component 不同。

Answer 1

是的，你是正确的。装饰者做了所有的魔术。它与打字稿无直接相关。可以通过仅使用JavaScript和Babel的装饰插件来完成。我认为Vue级组件的源代码已经解释了所有内容，但让我们自己构建最低版本。为了使事情变得简单，我只使用JavaScript。

我们的目标是创建一个可以将类转换为VUE组件对象的装饰器，例如：

class MyComponent {
  data() {
    return {
      count: 0,
    };
  }
  plus() {
    this.count++;
  }
}
// will be converted to something like
const MyComponent = {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    plus() {
      this.count++;
    }
  }
}

它实际上很简单。我们创建一个新对象，然后将类的所有方法复制到对象。让我们首先创建我们的装饰函数：

function MagicDecorator(ComponentClass) {
  const options = {};
  return options;
}

选项将是我们转换后的结果。现在，我们想循环浏览课程，以了解什么属性和哪些方法。

function MagicDecorator(ComponentClass) {
  const options = {};
  Object.getOwnPropertyNames(ComponentClass.prototype).forEach((key) => {
    console.log(key); // data, plus
  });
  return options;
}

请注意， object.keys（componentClass.protype）无法使用。因为这些属性是不可启用的属性（由 object.defineproperty（））

，对于 opted>已安装，创建，或数据，我们只是直接复制它。您可以在VUE源代码中找到挂钩方法列表。

const hooks = [
  'data',
  'beforeCreate',
  'created',
  'beforeMount',
  'mounted',
  'beforeDestroy',
  'destroyed',
  'beforeUpdate',
  'updated',
  'activated',
  'deactivated',
  'render'
];

function MagicDecorator(ComponentClass) {
  const options = {};
  Object.getOwnPropertyNames(ComponentClass.prototype).forEach((key) => {
    if (hooks.includes(key)) {
      options[key] = ComponentClass.prototype[key];
    }
  });
  return options;
}

是的，这很简单，只需将其复制到我们的 options 。

现在，对于自定义方法，我们必须将其放入方法对象中。

function MagicDecorator(ComponentClass) {
  const options = {
    methods: {},
  };
  Object.getOwnPropertyNames(ComponentClass.prototype).forEach((key) => {
    if (hooks.includes(key)) {
      options[key] = ComponentClass.prototype[key];
      return
    }
    if (typeof ComponentClass.prototype[key] === 'function') {
      options.methods[key] = ComponentClass.prototype[key];
    }
  });
  return options;
}

实际上，现在它已经在工作，可以处理许多简单的组件！像上面的计数器组件一样，它现在得到了我们的装饰器的完全支持。

但是我们知道VUE已经计算出属性。我们也支持此功能。

计算的属性是通过Geters和Setter的支持。现在有点棘手，因为您会注意到我们可以直接访问它们，

ComponentClass.prototype[key]; // This will trigger the getter

因为当您以这种方式访问​​它时，您实际上是在调用Getter。幸运的是，我们可以使用 object.getownPropertyDescriptor（）获取实际的Getter和Setter功能。然后，我们要做的就是将其放入计算的字段中。

const options = {
  methods: {},
  computed: {},
};

// omit...

const descriptor = Object.getOwnPropertyDescriptor(
  ComponentClass.prototype,
  key
);
if (descriptor.get || descriptor.set) {
  options.computed[key] = {
    get: descriptor.get,
    set: descriptor.set
  };
}

在Vue-Class组件的源代码中，他们也使用描述符处理方法：

if (typeof descriptor.value === 'function') {
  options.methods[key] = descriptor.value;
  return;
}

最后，我们不会支持构造函数。我们只将其添加到循环的第一个并忽略它：

if (key === 'constructor') {
  return;
}

现在，我们有一个完整的示例。在此处查看它：

注释1：我们的最低示例不使用简单的类属性来支持数据：

class MyComponent {
  count = 0 // We don't support this

  // Only this is supported
  data() {
    return { count: 0 }
  }
}

如果我们想要为了支持类属性，我们必须将其转换为我们自己的反应性属性。

注2：Babel支持两个版本的装饰师。要与Vue-Class-Component的源代码保持一致，我正在使用旧版。因此，您必须在@babel/plugin-proposal-decorators 插件中指定 {遗产：true} 选项。