Vue3+ts，添加方法的原型方法

在 Vue3 和 TypeScript 中，可以通过定义类的原型方法来添加方法。假设我们要添加一个名为 `myMethod` 的方法：

import { defineComponent } from 'vue';

export default defineComponent({
  created() {
    this.myMethod();
  },
  methods: {
    // 其他方法
  }
});

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    myMethod(): void;
  }
}

// 在组件外部定义原型方法
Object.defineProperty(Vue.prototype, 'myMethod', {
  value() {
    console.log('myMethod');
  }
});

在上面的代码中，我们首先在组件中调用了 `this.myMethod()`，然后在组件外部使用 `Object.defineProperty` 定义了 `myMethod` 方法的原型。需要注意的是，在 TypeScript 中，我们需要使用 `declare module '@vue/runtime-core'` 来扩展 `ComponentCustomProperties` 接口，以便在组件中使用 `this.myMethod()` 时不会报错。

相关问题

Vue3+ts+setup，添加方法的原型链方法

在3 中，可以使用 `provide` 和 `inject` API 来实现类似于 Vue2 中 `Vue.prototype` 的功能。具体实现步骤如下：

1. 在 `main.ts` 中定义一个 `provide` 函数，将需要添加到原型链上的方法作为参数传入：

   import { createApp } from 'vue';
   import App from './App.vue';
   
   const app = createApp(App);
   
   app.provide('myMethod', (msg: string) => {
     console.log(msg);
   });
   
   app.mount('#app');

2. 在需要使用该方法的组件中，使用 `inject` API 将该方法注入到组件中：

   import { defineComponent, inject } from 'vue';
   
   export default defineComponent({
     setup() {
       const myMethod = inject('myMethod');
   
       // 使用 myMethod 方法
       myMethod('Hello World!');
     }
   });

这样就可以将需要添加到原型链中的方法添加到 Vue 实例中，从而在组件中使用该方法了。需要注意的是，由于 TypeScript 的类型检查，需要在 provide 和 inject 中指定方法的类型。

Vue3+ts+setup，原型以及原型链的案例

Vue3中使用的是Composition API，而不是原来的Options API，因此原型和原型链的应用与Vue3+ts+setup的案例可能不太相关。不过，我们可以举一个简单的ts+class的例子来说明原型和原型链的应用。

假设我们有一个Animal类：

class Animal {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
  eat(food: string) {
    console.log(`${this.name} is eating ${food}.`);
  }
}

我们可以创建一个Cat类，继承自Animal类：

class Cat extends Animal {
  constructor(name: string) {
    super(name);
  }
  meow() {
    console.log(`${this.name} is meowing.`);
  }
}

现在我们可以创建一个cat实例：

const cat = new Cat('Kitty');

我们可以调用cat实例上的eat和meow方法：

cat.eat('fish'); // 输出：Kitty is eating fish.
cat.meow(); // 输出：Kitty is meowing.

在这个例子中，Animal类是Cat类的父类，Cat类从Animal类中继承了属性和方法。当我们创建一个cat实例时，该实例实际上是Animal类的一个实例，同时也是Cat类的一个实例。因此，cat实例的原型链如下所示：

cat -> Cat.prototype -> Animal.prototype -> Object.prototype -> null

其中，cat指向Cat.prototype，Cat.prototype指向Animal.prototype，Animal.prototype指向Object.prototype，Object.prototype指向null。这个原型链可以让cat实例继承Animal类和Object类上的属性和方法。例如，我们可以调用cat实例上的toString方法：

console.log(cat.toString()); // 输出：[object Object]

这是因为cat实例继承了Object.prototype上的toString方法。